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