响应式设计和CSS提高性能的方法

一、响应式设计

1、是什么？

是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。

2、常见特点

（1）同时适配PC+平板+手机等

（2）标签导航在接近手持终端设备时改变为经典的抽屉式导航

（3）网站的布局会根据视口来调整模块的大小和位置

3、实现方式

基本原理：通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
width=device-width：指自适应手机屏幕的尺寸宽度
maximum-scale：是缩放比例的最大值
initial-scale：是缩放的初始化
user-scalable：是用户的可以缩放的操作

实现响应式布局的方式有如下：

（1）媒体查询

当视口在375px~600px之间，设置字体大小为18px

@media screen (min-width:375px) and (max-width:600px){
   body{font-size:18px;}
}

（2）百分比

当浏览器的宽高发生变化时，通过百分比单位，可以使浏览器中的组件的宽高随着浏览器的变化而变化，从而实现响应式效果。

height、width的百分比属性依托于父标签的宽高，但是其他盒子属性不完全依赖父元素：

子元素的top/left/bottom/right如果设置百分比，则相对于直接非static定位的父元素的宽高

子元素的padding如果设置百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width，而与父元素的height无关。

子元素的margin如果设置成百分比，不管是垂直还是水平方向，都相对于父元素的width

border-radius如果设置为百分比，则是相对于自身宽度。

（3）vw/vh

vw相对于视图窗口宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的1%

（4）rem

相对于根元素html的font-size属性，默认浏览器字体大小是16px，即1rem=16px

可以结合媒体查询针对不同设备的分辨率改变font-size的值

@media screen and (max-width:414px){
   html{
      font-size:18px
   }
}

（5）主流UI框架的栅栏布局实现响应式

element-ui antd

4、优缺点：

优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题

缺点：仅适用布局、信息、框架并不复杂的部门类型网站；兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间变长；其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

二、CSS提高性能的方法

1、内联首屏关键CSS

通过内联css关键代码可以在下载完首屏html文件就可以立刻渲染，css内联使用使渲染时间提前

如果外部使用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码再渲染

注意：较大的css代码不适合内联（初始拥塞窗口，没有缓存）

2、异步加载css

在css文件请求、下载、解析完成之前，css会阻塞渲染，浏览器将不会渲染任何已处理的内容。加载完内联代码后，后面的外部引用css没必要阻塞浏览器渲染，此时可以采取异步加载的方式：

（1）使用JavaScript将link标签查到head标签最后

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( 
    myCSS, 
    document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling 
);

（2）设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设置为screen或all，从而让浏览器开始解析css

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

（3）通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。加载完成之后，将rel设回stylesheet

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

3、资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

4、合理使用选择器

css匹配的规则是从右往左匹配，例如#id .class h3的匹配规则为：先找到h3元素，然后去除祖先不是.class的元素，最后去除祖先不是#id的元素。

如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高，所以：

（1）不要嵌套使用过多复杂选择器，最好不要三层以上。

（2）使用id选择器就没必要再进行嵌套

（3）通配符和属性选择器效率最低，避免使用

5、减少使用昂贵的属性

页面发生重绘的时候，昂贵属性如box-shadow、border-radius、filter、透明度、:nth-child等，会降低浏览器的渲染性能

6、不要使用@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时，而且多个@import可能会导致下载顺序紊乱

7、其他

• 减少重排操作，减少不必要的重绘

• 了解哪些属性可以继承而来，避免对这些属性重复编写

• cssSprite合成所有icon图片，用宽高加上background-position的背景图方式显现出我们要的icon图，减少http请求

• 把小的icon图片转成base64编码

• css3动画或过渡尽量使用transform和opacity来实现动画，不使用left和top属性