加载性能优化

性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS）能减少这一时间

• 减少文件体积，压缩代码

使用代码压缩工具压缩代码，去掉多余空格和换行等多余部分

• CSS异步加载

将马上要用到的文件，放在页面头部加载。其他模块的CSS可以使用loadCSS 和 Preload待页面渲染完后异步加载

• 减少阻塞加载，不要用 @import

@import会影响CSS的加载速度

• dns-prefetch预解析

在页面中添加dns-prefetch属性，告诉浏览器对指定域名预解析，进行预解析之后，用户在访问相应域名就不会再有延迟了，从而加快加载速度

动画优化

• 硬件加速

通过GPU进行渲染从而使动画变得更加顺滑流程
注意事项：
- 慎用硬件加速，虽然它带来的提升是显而易见的，但是其对内存的影响也是巨大的
- GPU渲染会影响字体的抗锯齿效果，文本会变得模糊

• 优先使用transtion做动画效果

 优先选择transform，尽量不要使用height，width，margin和padding，因为相较于其它属性transtion可以直接减少主线程的计算量

图片优化

• 图片压缩
• 图片懒加载

由于一个页面同时向后台发送的请求是有数量限制的(一般浏览器是4到8个，IE67是2个)，所以如果页面上有很多资源需要请求，就会导致页面加载时间变得很长。懒加载就能有效缓解此问题，优先加载当前页面的图片资源，在通过页面滑动的位置实时监听并根据页面滑动的位置请求响应资源

• 图片预加载

页面加载的时候，先加载一部分内容（一般是先加载首屏内容），其它内容等到先加载的一部分内容（一般是首屏内容）加载完了，再进行加载

重排与重绘

• 避免重绘

元素的外观发生改变时，会触发页面重绘。在网站的使用过程中，重绘是无法避免的。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。虽然浏览器有做了相应的优化，但是我们让然应该尽量避免重绘，可以可以使页面更加流畅 

• 减少使用某些属性

在浏览器绘制屏幕时，所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写CSS时，如果有可以替代的方案我们应当尽量减少使用box-shadow/border-radius/filter/透明度/:nth-child等属性，这样当浏览器绘制或者重绘时，浏览器会有更好的渲染效果

• 减少重排

重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。如下所示，有很多操作会触发重排，我们应该避免频繁触发这些操作
触发重排的属性：
width、height、padding、margin、display、border-width、position
top、left、right、bottom、font-size、float、text-align
overflow-y、font-weight、overflow、font-family
line-height、vertical-align、clear、white-space、min-height

代码格式优化

• 缩写CSS

许多CSS属性都有缩写的方法
例如background: #00FF00 url(bgimage.gif) no-repeat fixed top
在这个背景属性的设置中我们将背景颜色、背景图、位置等相关信息在一个属性中进行设置，用较少的代码完成了一系列相关样式属性，极大的缩小了代码的格式大小

• 慎用特殊CSS样式
• 将styleSheets放在页面的顶部
• 去除多余无用的CSS
• 重复的样式可以统一设置，避免重复设置

重复的CSS属性，可以统一设置在引用

• 正确使用display的属性

display: inline后不应该再使用 width、height、margin、padding 以及 float；
display: inline-block 后不应该再使用 float；
display: block 后不应该再使用 vertical-align；
display: table-* 后不应该再使用 margin 或者 float

• 慎用浮动
• 避免使用复杂的选择器，层级最好不超过三层
• 通过CSS继承属性减少代码量

color、font-size等等可以通过父级元素继承给子元素的属性就无需重复设置

• 选择器的使用

- 保持简单，不要使用嵌套过多过于复杂的选择器。
- 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。
- 不要使用类选择器和ID选择器修饰元素标签，如h3#markdown-content，这样多此一举，还会降低效率。
- 保存良好可读性与可维护性

• 删除不必要的单位

在CSS中，长度单位中如果出现0是可以进行简写的。例如：padding:0.1px的0.1px是可以简写.1px的。并且当长度为0的时候单位默认是px，此时px也是可以进行简写的

其它优化

• 服务器压缩
• 使用工具规范CSS代码编写规范
• 慎重选择高消耗的样式

高消耗属性在绘制前需要浏览器进行大量计算：box-shadows、border-radius、transparency、transforms、CSS filters（性能杀手）

https://juejin.im/entry/59d4b78e6fb9a00a496e8fd4

https://www.jianshu.com/p/b2c0f32d3dd7

http://baijiahao.baidu.com/s?id=1603253323416106525&wfr=spider&for=pc