五、重绘与回流

css性能让javascript变慢？

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

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

回流

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

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

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

　　　3、改变节点内部文字结构也会触发重布局：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较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

1、避免使用触发重绘、回流的CSS属性

2、将重绘、回流的影响范围限制在单独的图层之内

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

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

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

用图层可以减少重绘和回流，但是图层会有合成的消耗，因此两者之间需要一个balance！

五、重绘与回流

原文：https://www.cnblogs.com/QianDingwei/p/11028362.html