【前端】重排和重绘

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创建一个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 精灵，它将所有的图片放到一张图片上，然后通过定位来实现图片的使用。

参考：

重绘和重拍

重排与重绘

重排和重绘

重绘重排重渲染

END

作者：Dora_5537
来源：CSDN
原文：https://blog.csdn.net/Dora_5537/article/details/91357410
版权声明：本文为博主原创文章，转载请附上博文链接！