无法加载

浏览器的重排和重绘

FavoriteLoading收藏

一、浏览器的重排

在了解什么时重排之前,我们需要知道一个重要知识点:浏览器渲染页面默认采用的是流式布局模型。

因为浏览器渲染页面是基于流式布局的,对某一个DOM节点信息进行修改时,就需要对该DOM结 构进行重新计算,该DOM结构的修改会决定周边DOM结构的更改范围,主要分为全局范围和局部范围,全局范围就是从页面的根节点HTML标签开始,对整个渲染树进行重新计算,例如,当我们改变窗 口的尺寸或者修改了根元素的字体大小时,局部范围只会对渲染树的某部分进行重新计算,例如要改变 页面中某个div的宽度,只需要重新计算渲染树中的与该div相关的部分即可。

而重排的过程就发生在DOM节点信息修改的时候,重排实际是根据渲染树中每个渲染对象的信息, 计算出各自渲染对象的信息,例如DOM元素的位置,尺寸,大小等,然后将其安置在界面中正确的位置。

重排是一种明显的改变页面布局的操作,下面总结了几种引起页面重排的操作。

1. 页面首次渲染。

2. 浏览器窗口大小发生改变。

3. 元素尺寸或者位置发生改变。

4. 元素内容发生变化。

5. 元素字体发生变化。

6. 添加或者删除可见的DOM元素

7. 获取特定的属性。例如offsetTOP offsetLeft等等 scrollTop,scrollLeft

二、浏览器的重绘

相比于重排,重绘简单的多,重绘只是改变元素在页面中的展示样式,而不会引起元素在文档流中位置的改变,例如更改了元素的字体颜色,背景色,透明度等,浏览器都会将这些新样式赋予元素并重新绘制。

在修改某些常见的属性时,会引发重绘的操作,接下来列举出了一部分。

1. color

2. background

3. box-shadow

4. border-radius

简单来说重排一定会引起重绘的操作,但是重绘却不一定会引起重排的操作。

三、性能优化

浏览器的重排和重绘时比较消耗性能的操作,所以我们应该尽量减少重排与重绘的操作,这样也是 网站性能优化的一种方式。

1、将多次改变样式的属性操作合并为一次

var ad = document.getElementById("ad"); 
ad.style.width="100px"; 
ad.style.height="100px"; 
ad.style.background="red"; 
ad.style.marginTop="20px";

可以预先声明CSS类名,只需要添加类名就可以。

div .ad{ 
    width:100px; 
    height:1000px; 
    background:red; 
    margin-top:20px; 
}

2、将需要多次重排的元素设置为绝对定位

需要进行重排的元素都是出于正常文档流中的,如果他不在正常的文档流中,那么它的变化就不会 影响到其他元素的变化。这样就不会引起重排的操作。

3、在内存中多次操作节点,完成后在添加至文档树中

通过变量遍历操作的节点,遍历存在内存中,完成后添加至文档树中。

4、将要进行复杂处理的元素处理为display属性为none处理完成后在进行显示

因为display为none的属性不会出现在渲染树中。

5、将频繁获取会引起重排的属性缓存到变量

将一些offsetLeft或者offsetRight等属性存在变量里面。

6、尽量减少使用table布局

table中的任何一个元素改变,都会引起重排。

7、使用事件委托事件处理程序

使用事件委托事件处理程序

留下评论

微信:15182814906

QQ:1548902957

邮箱:1548902957@qq.com