【前端】重排和重绘

1.什么是重排和重绘?重排:若渲染树的一部分更新,且尺寸变化,就会发生重排。重绘:部分节点需要更新,但不改变其他集合形状。如改变某个元素的vidibility、outline、背景颜色等,就会发生重绘。PS:重绘不一定导致重排,但重排一定会导致重绘。重排会产生比重绘更大的开销。2.重排和重绘何时会发生?触发重排:(1)页面第一次渲染:在页面发生首次渲染的时候,所有组件都要进行首次布局,这是开销最大...

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.offsetLeft1'px';div.style.top = div.offsetTop1'px';// good 缓存布局信息 相当于读写分离var curLeft = div.offsetLeft;var curTop = div.offsetTop;div.style.left = curLeft1'px';div.style.top = curTop1'px';

(8)使用 css spirit,也叫 css 精灵,它将所有的图片放到一张图片上,然后通过定位来实现图片的使用。

参考:

重绘和重拍

重排与重绘

重排和重绘

重绘重排重渲染�

END

源文地址:https://www.guoxiongfei.cn/csdn/4915.html
0