浏览器的重排和重绘

收藏

一、浏览器的重排

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

因为浏览器渲染页面是基于流式布局的，对某一个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、使用事件委托事件处理程序

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