什么是回流和重绘？如何优化？

浏览器渲染一个页面有两条线程：一条是渲染js脚本，一条是渲染css脚本。但是两条线程是互斥的。

回流（重排）：当render tree的一部分或者全部元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，回流就产生了。

重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘。

结论：回流必定触发重绘，而重绘不一定触发回流。

如何避免回流：1、不使用能够触发回流的属性；2、建立一个图层，让回流在图层里面进行，限制回流和重绘的范围，减少浏览器的运算工作量。

Css是怎么“划分图层”的：在页面加载完dom之后，浏览器会根据自身制定的一些特殊css 属性对页面进行划分为一个个图层。例如position: absolute|fixed 。

图层的优点：当一个元素在自己的图层内发生变化时，他的回流和重绘只会在图层内发生变化，减少了浏览器的计算量。

图层内部做了什么：
1、对图层里面的节点做回流和重布局运算，计算出他们的样式
2、生成图形和位置
3、将每个节点绘制填充在图层位图中
4、将涂层作为纹理发送到GPU上
5、将所有的图层合并，显示在浏览器的页面上

总结：滥用图层会让页面进行了太多的合并运算而导致页面卡顿。所以图层的用途应该让那些经常要进行位置结构，布局变换的元素去使用。例如轮播图。

有哪些可替换的属性可以优化回流与重绘呢，一共有一下9点：
1：用transform 代替 top，left ，margin-top， margin-left… 这些位移属性
2：用opacity 代替 visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流
但是第二点经过我的实验，发现如果不加 transform: translateZ(0) 配合opacity的话还是会产生回流的，而只用visibility 就只会产生重绘不会回流
而 opacity 加上 transform: translateZ/3d 这个属性之后便不会发生回流和重绘了
3：不要使用 js 代码对dom 元素设置多条样式，选择用一个 className 代替之。
4：如果确实需要用 js 对 dom 设置多条样式那么可以将这个dom 先隐藏，然后再对其设置
5：不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight… 这些。浏览器有一个回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个栈。但是如果你多次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，导致页面回流增加。
所以为了避免这个问题，应该用一个变量保存在循环体外。
6：不要使用table 布局，因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局
7：动画的速度按照业务按需决定
8：对于频繁变化的元素应该为其加一个 transform 属性，对于视频使用video 标签
9：必要时可以开启 GPU 加速，但是不能滥用

使用 GPU 加速提升动画性能时，最好给当前动画元素增加一个高一点的 z-index 属性，人为干扰复合层的排序，可以有效减少 Chrome 创建不必要的复合层，提升渲染性能。

什么是 16ms 优化？

• 大多数设备的刷新频率是 60 次/秒，（1000/60 = 16.6ms）也就说是浏览器对每一帧画面的渲染工作要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。
• 浏览器在一帧里面，会依次执行以下这些动作。减少或者避免 layout，paint 可以让页面不卡顿，动画效果更加流畅。

1. JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
2. Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
3. Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
4. Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
5. Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

转载：https://blog.csdn.net/longyanchen/article/details/92841120

原著是一个有趣的人,若有侵权,请通知删除