你不知道的前端性能优化 - 布局与样式 （二）

前言：所有的优化点都有其适用的条件，所有的优化点都能够量化看到效果，具体项目具体分析，并不是每个项目都能适用这里的每个点，望周知。

布局与样式

在提出优化点之前，我们先明白几个浏览器渲染的重要概念，重绘(reflow) 、 回流(repaint)和图层(layer)。

上一篇其实应该说了一些，在整个页面被渲染出来之前会进行 layout(布局) 和 paint (绘制)的过程。

简单的说

​ 重绘：其实就是触发浏览器的 paint 的过程。

​ 回流：其实不仅仅是触发了 paint 的过程还触发 layout 的过程，触发顺序由后往前。

也就是说 回流相当于 layout -> patint ; 重绘相当于 patint的过程， 所以回流必定触发重绘，重绘不一定触发回流。

还有一个重要的概念 Layer (图层)，我们怎么理解它呢，其实图层就相当浏览器分层的渲染策略，比如我们可以举一些原生就会增加 Layer 的标签: <canvas> <video> (除了这些还有，下面会讲到)。当遇到这些标签的时候，浏览器会生成一个新的图层，之后该元素内的重绘和回流的过程只存在于该图层中，之后再进行图层的合并过程。 那么重绘和回流的效率就会提高，额外增加了一个图层的合并(composite Layers)的过程。

有没有一种方式可以避免重绘和回流呢？那么就是用CSS启用硬件加速。

硬件加速就是GPU加速很多电脑显卡都支持GPU加速。

1. 能触发回流的样式：

   width	top	text-align
   height	bottom	overflow-y
   padding	left	font-weight
   margin	right	overflow
   display	position	font-family
   border-width	float	line-height
   border	clear	vertival-align
   min-height		white-space
   		font-size

2. 只触发重绘的样式:

   color	background	outline-color
   border-style	background-image	outline
   border-radius	background-position	outline-style
   visibility	background-repeat	outline-width
   text-decoration	background-size	box-shadow

3. 能触发回流的js

   offsetTop	scrollTop	clientTop	width	getComputedStyle()
   offsetLeft	scrollLeft	clientLeft	height	IE的：currentStyle
   offsetWidth	scrollWidth	clientWidth		getBoundingClientRect()
   offsetHeight	scrollHeight	clientHeight

   除了上面的这些还有，只要是获取元素位置相关的，浏览器都会在当前时间点去计算得到该属性，该计算的过程就会触发回流。

4. 开启GPU加速的方式常见的触发硬件加速的css属性：

   • transform

   • opacity

   • filters

   • Will-change
     

     will-change介绍-来自MDN
     
     对于动画的其它属性，比如background-color，width等，还是会引起回流重绘的，不过可以提升这些动画的性能

明白了以上的概念后，我们就可以引出下面的优化点了。

1. 减少回流重绘
   相对来说回流是一个性能比较低的过程。布局、定位和文字的改变往往都会触发回流。

   对照上表有以下的优化点，

   在布局上：

   1. 可以用translate替代top/left...改变
      本质上是启用了GPU加速渲染

   2. 用opacity替代visibility
      因为如果使用 opacity 不一定会产生重绘。

   在操作dom元素上:

   1. 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
   2. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来，当然每个浏览器都做了相应的优化所以没必要这么弄
   3. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量，例如循环调用 getBoundingClientRect() 方法，将会导致页面一直处于回流的过程。
   4. 不要使用 table 布局，因为你改动一点点都将影响整个 table 的布局
   5. 动画实现的速度的选择
   6. 对于动画新建图层
      这是一种很好的方式，之后的重绘和回流就都只在该图层中进行了。谷歌浏览器创建图层的条件如下：
      • 3D或透视变换（perspective transform）CSS属性
      • 使用加速视频解码的<video>节点
      • 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
      • 混合插件（如Flash）
      • 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
      • 拥有加速CSS过滤器的元素
      • 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
      • 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
   7. 启用 GPU 硬件加速
      使用 transform、opacity、filters、Will-change可以启用GPU加速

   图层不能无限制的创建，超过一定范围后反而会将页面变得更卡。这是由于图层虽然减少了重绘和回流的时间，但是增加了图层合并的步骤，如果很多图层合并将导致页面卡死。

此外还有很多种方式能够减少布局带来的性能损耗。js的执行会阻塞布局的渲染所以js方面的优化往往更优于布局层面上的优化，js层面上的优化能看到的效果比较显著，所以在真实的项目中，这种布局上的优化往往很少人去做。

总结一下：

1. 在布局上尽量使用GPU加速，尽量使用 transform 代替 left \ ...
2. 对于页面的动画，我们最好新建图层，把回流和重绘的消耗降低
3. 不在 js 上持续的获取 dom 元素的定位属性
4. js优化带来的效益高，所以布局层面上的优化比较少人做，所以这些东西得养成布局习惯。

本文章由作者自学完前端性能优化后的自述，如有不正 欢迎大佬们在评论席交流。

其它篇幅传送门：

你不知道的前端性能优化 一 静态资源优化
你不知道的前端性能优化 二 布局于样式
你不知道的前端性能优化 三 缓存优化