浏览器的也许事情流程

以一般的HTML页面为例：

1. 剖析HTML文档，天生dom树
2. 剖析css发作css划定规矩树
3. 剖析JavaScript，经由历程DOM-API来操纵dom树和css划定规矩树
4. 经由历程dom树和css划定规矩树来组织衬着树（rendering tree）
5. 挪用操纵系统的GUI接口画页面

回流（reflow）和重绘（repaint）

回流：

元素的大小尺寸、位置发作变化时，会从新盘算衬着树，页面要举行从新排版事情，这个历程等于回流。<br>

重绘：

元素做了一些不影响排版的转变，比方背景色、下划线等等，只需要从新绘制的历程，叫做重绘。

明显回流带来的价值大于重绘，由于重绘仅仅是从新画一遍元素罢了，然则重绘是从新盘算+从新画。

回流的缘由：

• Initial。网页初始化的时刻。
• Incremental。一些Javascript在操纵DOM Tree时。
• Resize。其些元件的尺寸变了
• StyleChange。假如CSS的属性发作变化了。
• Dirty。几个Incremental的reflow发作在同一个元素的子树上。

更详细的说，就是这些罕见的操纵会引起回流：

1. 调解窗口大小
2. 字体大小
3. 款式表更改
4. 元素内容变化，尤其是输入控件
5. CSS伪类激活，在用户交互历程当中发作
6. DOM操纵，DOM元素增删、修正
7. width, clientWidth, scrollTop等规划宽高的盘算

ps：然则浏览器并不会在我们一举行上面的操纵就举行回流，浏览器会积累一批reflow然后一同举行回流，不过有的操纵会让浏览器立马举行回流，比方resize窗口，转变了页面默许的字体，或者说猎取以下这些值：

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop/Left/Width/Height
• clientTop/Left/Width/Height
• IE中的 getComputedStyle(), 或 currentStyle

怎样削减reflow和repaint

1. 防止频仍的修正款式，能够将要修正的多个款式定义为一个class类，然后将类名一次赋值即可

2. 把dom离线操纵:

   • 运用documentFragment 对象在内存里操纵DOM
   • 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比方修正100次，然后再把他显示出来。
   • clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的谁人的交流一下
3. 不要把DOM结点的属性值放在一个轮回里当做轮回里的变量。不然这会致使大量地读写这个结点的属性。
4. 为动画的HTML元件运用fixed或absoult的position，那末修正他们的CSS是不会reflow的，由于脱离了文档流

参考

削减重排与重绘

浏览器的衬着道理简介