【前端】重排和重绘 -凯发k8官方网

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

总结

以上是凯发k8官方网为你收集整理的【前端】重排和重绘的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。