5、重绘与回流

css性能让javascript变慢？

会的，频繁触发重绘与回流，会致使UI频繁渲染，最终致使js变慢。

有两个线程：一个线程JavaScript解析，一个线程是UI渲染，这两个实际上是互斥的两个线程。

当javascript 线程运行的时候 ui 线程则会停止暂停，反之亦然。

那这是为何呢？

缘由是，当ui 线程运行对页面进行渲染的时候 js 脚本不免会涉及到页面视图上的一些样式的改变，为了使这个改变动加准确 js 脚本只好等待ui 线程渲染完成的时候才去执行。

因此当一个页面的元素样式改动频繁的时候ui 线程就会持续渲染，形成js 代码反应慢半拍，卡顿的状况。

回流

• 当render tree中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(reflow)
• 当页面布局和几何属性改变时就须要回流

• 触发页面重布局的属性：
  一、盒子模型相关属性会触发重布局：width ，height，padding，margin，display，border-width，border，min-heigh。

　　　二、定位属性及浮动也会触发重布局：top，bottom，left，right，position，float，clear

　　　三、改变节点内部文字结构也会触发重布局：text-align，overflow-y，font-weight，overflow，font-family，line-height，vertival-align，white-space，font-size

重绘

• 当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。

• 只触发重绘的属性：
  color
  border-style
  border-radius
  visibility
  text-decoration
  background
  background-image
  background-position
  background-repeat
  background-size
  outline-color
  outline
  outline-style
  outline-width
  box-shadow

总结：回流必将引发重绘，而重绘不必定会引发回流

如今咱们知道了那些属性会触发回流，那如何避免回流呢？

其实有两个方法：

第一，不使用以上能触发图层回流的属性，

第二，创建一个图层，让回流在这些图层里面进行，限制回流和重绘的范围，减小浏览器的运算工做量

新建DOM的过程

1. 获取DOM后分割为多个图层
2. 对每一个图层的节点计算样式结果（Recalculate style--样式重计算）
3. 为每一个节点生成图形和位置（Layout--回流和重布局）
4. 将每一个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
5. 图层做为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）

将频繁重绘回流的DOM元素单独做为一个独立图层，那么这个DOM元素的重绘和回流的影响只会在这个图层中。

Chrome建立自动建立图层的条件

• 3D或透视变换（perspective transform）CSS属性
• 使用加速视频解码的<video>节点
• 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
• 混合插件（如Flash）
• 对本身的opacity作CSS动画或使用一个动画webkit变换的元素
• 拥有加速CSS过滤器的元素
• 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在本身的层里）
• 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

如何手动建立图层l两种方法：

• will-change:transform
• transform:translateZ(0)

Chrome浏览器的more tools下面的Layers能查看图层信息，rendering能查看浏览器页面正在重绘的元素。

用图层能够减小重绘和回流，可是图层会有合成的消耗，所以二者之间须要一个balance！

实战优化点：

1. 用translate替代top改变
2. 用opacity（不会触发回流，更不会触发重绘,没有paint的过程，由于paint的过程是生成图层，可是opcacity其实是直接改变的图层的alpha通道，因此不涉及图层的重绘）替代visibility（会触发重绘可是不会触发回流），可是要同时有translate3d 或 translateZ 这些能够建立的图层的属性存在才能够阻止回流
3. 不要一条一条地修改 DOM 的样式，预先定义好 class，而后修改 DOM 的 className

4. 把 DOM 离线后修改，好比：先把 DOM 给 display:none (有一次 Reflow)，而后你修改100次，而后再把它显示出来，若是确实须要用 js 对 dom 设置多条样式那么能够将这个dom 先隐藏，而后再对其设置

5. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。浏览器有一个回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发全部样式的更改且刷新这个栈。可是若是你屡次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，致使页面回流增长。因此为了不这个问题，应该用一个变量保存在循环体外。

6. 不要使用 table 布局，可能很小的一个小改动会形成整个 table 的从新布局
7. 动画实现的速度的选择。动画的时间间隔短，动画连续，可是不断的回流重绘影响性能，动画的时间长，动画卡顿，性能会好点。
8. 对于动画新建图层，对于频繁变化的元素应该为其加一个 transform 属性，对于视频使用video 标签
9. 启用 GPU 硬件加速，经过设置transform：translateZ(0);transform: translate3d(0,0,0)