回流重绘_ 字节宝

HTML默认是流式布局，css与js会打破这种布局，改变DOM的几何属性与外观属性。在绘制时根据渲染树布局，再根据布局绘制，这就是回流重绘。

在生成渲染树之后，至少会渲染一次，但在后续交互时还会不断地重新渲染。这时只会回流重绘或只有重绘，因此引出一个定向法则：回流必定引发重绘，重绘不一定引发回流。

用户的交互操作引发了网页的重渲染。

1.使用visibility:hidden替换display:none

2.使用transform代替top

top是几何属性，操作top会改变节点位置引发回流，使用transform:translate3d(x,0,0)代替top，只会引发图层重绘，还会间接启动GPU加速。

3.避免使用Table布局

通常可用<ul>、<li>和<span>等标签取代table系列标签生成表格。

4.避免规则层级过多

浏览器的CSS解析器解析css文件时，对CSS规则是从右到左匹配查找，样式层级过多会影响回流重绘效率，建议保持CSS规则在3层左右。

5.避免节点属性值放在循环中当成循环变量

代码语言：javascript复制

 for (let i = 0; i < 10000; i  ) {
 const top = document.getElementById("css").style.top;
 console.log(top);
 }

如果这样做，每次循环操作都会操作DOM发生回流。

应在循环外部使用变量保存一些不会变化的DOM映射值。

代码语言：javascript复制

 const top = document.getElementById("css").style.top;
 for (let i = 0; i < 10000; i  ) {
 console.log(top);
 }

6.动态改变类而不改变样式

不要尝试每次操作DOM改变节点样式，这样会频繁触发回流。

7.将频繁回流重绘的节点设置为图层。

在浏览器中设置频繁回流或重绘的节点为一张新图层，那新图层就能够阻止节点的渲染行为影响别的节点，这张图层中如何变化都无法影响到其他图层。

8.使用requestAnimationFrame作为动画帧

动画速度越快，回流次数越多。requestAnimationFrame()以16.6ms的速度(浏览器刷新频率60Hz)更新一次，所以可用requestAnimationFrame()代替setInterval()。

9.属性排序

属性排序指根据预设规范排列属性。提供一个预设规范，根据该规范以一定的顺序排列所有属性。

根据布局 → 尺寸 → 界面 → 文字 → 交互的方式顺序定义。

0 人点赞