

一、浏览器的重排
在了解什么时重排之前,我们需要知道一个重要知识点:浏览器渲染页面默认采用的是流式布局模型。
因为浏览器渲染页面是基于流式布局的,对某一个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、使用事件委托事件处理程序
使用事件委托事件处理程序