【前端】重排和重绘 - 好文

1. 什么是重排和重绘？

重排：若渲染树的一部分更新，且尺寸变化，就会发生重排。

重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的vidibility、outline、背景颜色等，就会发生重绘。

PS：重绘不一定导致重排，但重排一定会导致重绘。重排会产生比重绘更大的开销。

2. 重排和重绘何时会发生？

触发重排：

（1）页面第一次渲染：在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次重排

（2）浏览器窗口尺寸改变

（3）元素位置和尺寸（宽、高、内外边距、边框等）发生改变的时候

（4）增加或删除DOM节点

（5）内容发生改变（文字数量或图片大小等等）

（6）元素字体大小变化

（7）激活CSS伪类（例如：:hover）

（8）增加或修改样式，设置style属性

（9）查询某些属性或调用某些方法，如：调用getComputedStyle方法，或者IE里的currentStyle时，也会触发重排

（10）display:none（重排并重绘）

触发重绘：

（1）vidibility

（2）outline

（3）背景颜色：color、background-color

（4）visibility:hidden（重排）

3. 如何减少重排和重绘以提升页面性能？

（1）样式集中改变：不要一个个修改属性，应通过一个class来修改。
错误写法：div.style.width="50px";div.style.top="60px"; 正确写法：div.className+="modify";
（2）DOM离线化：一旦我们给元素设置display:none
时，元素不会存在于渲染树中，相当于将其从页面“拿掉”，我们之后的操作将不会触发重排和重绘，这叫做DOM的离线化。
dom.display = 'none' // 修改dom样式 dom.display = 'block'
（3）批量添加DOM：通过使用DocumentFragment
<https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment>
创建一个DOM碎片,在它上面批量操作DOM
，操作完成之后，再添加到文档中，这样只会触发一次重排。使用innerHTML永远比DOM操作快。（特别注意：innerHTML不会执行字符串中的嵌入脚本，因此不会产生XSS漏洞）。

（4）复制节点，在副本中修改，然后直接替换当前的节点。

（5）降低受影响的节点：在页面顶部插入节点将影响后续所有节点，而绝对定位元素的改变会影响较少的元素，将position属性设置为absolute或fixed。

（6）分离读写操作。
div.style.top = "10px"; div.style.bottom = "10px"; div.style.right = "10px";
div.style.left = "10px"; console.log(div.offsetWidth);
console.log(div.offseHeight); console.log(div.offsetRight);
console.log(div.offsetLeft);
原来的操作会导致四次重排和四次重绘，变换顺序之后只会触发一次重排在第一个console
的时候，浏览器把之前上面四个写操作的渲染队列都给清空了。因为渲染队列本来就是空的，所以剩下的console并没有触发重排，仅仅拿值而已。

（7）缓存布局信息。
// bad 强制刷新触发两次重排 div.style.left = div.offsetLeft + 1 + 'px'; div.style.top =
div.offsetTop + 1 + 'px'; // good 缓存布局信息相当于读写分离 var curLeft = div.offsetLeft;
var curTop = div.offsetTop; div.style.left = curLeft + 1 + 'px'; div.style.top
= curTop + 1 + 'px';
（8）使用 css spirit，也叫 css 精灵，它将所有的图片放到一张图片上，然后通过定位来实现图片的使用。

参考：

重绘和重拍 <https://blog.csdn.net/sinat_24496253/article/details/70052480>

重排与重绘 <https://www.imweb.io/topic/5c2206a7611a25cc7bf1d848>

重排和重绘 <https://www.cnblogs.com/stone5/p/9041154.html>

重绘重排重渲染 <http://www.sohu.com/a/119068992_505813>

END

热门工具换一换