页面渲染,重绘和回流

1.页面渲染

a.解析HTML文件代码,生成DOM树,生成css树包括display:none的标签和js动态添加的元素或者样式
b.DOM树和css树结合生成渲染树(Render Tree)
c.根据生成的渲染树的进行布局(Layout),计算渲染树节点在设备视口(viewport)的位置和大小,得到节点的几何信息(位置,大小以及其他属性)
d.绘制(Painting):根据渲染树以及回流得到的几何信息,得到节点的绝对像素
e.Display:根据渲染树以及回流得到的节点的位置大小,在屏幕转化为实际像素,将像素发给GPU,展示在页面.
2.回流(重排 reflow):当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新绘制(Painting)
3.重绘(repaint): 当渲染树中的一些元素需要更新不会影响布局的属性，而这些属性只是影响元素的外观，风格，进行了重新绘制(比如background-color)
4.重绘和回流的触发
每个页面至少需要一次回流,回流必将引起重绘，而重绘不一定会引起回流,触发的一些情况:
a.DOM元素的添加、修改、删除( Reflow + Repaint)
b.仅修改DOM元素的字体颜色（Repaint）
c.应用新的样式或者修改任何影响元素外观的属性( Reflow + Repaint)
d.Resize浏览器窗口、滚动页面( Reflow + Repaint)
e.读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、 currentStyle(in IE))
f.改变字体大小( Reflow + Repaint)
g.添加、删除样式表( Reflow + Repaint)
h.内容的改变，如用户在输入框中写字( Reflow + Repaint)
i.激活伪类( Reflow + Repaint)
j.设置style属性( Reflow + Repaint)
k.页面初次渲染
如何避免回流和重绘:
a.先将元素从document离线,处理完后一起显示更新
（1）使用DocumentFragment进行缓存操作,引发一次回流和重绘
（2）使用display:none技术，只引发两次回流和重绘;
b.集中修改样式属性　　
（1）尽可能少的修改元素style上的属性　　
（2）尽量通过修改className来修改样式　　
（3）通过cssText属性来设置样式值　　　　
element.style.width=”80px”; //reflow　　　　
element.style.height=”90px”; //reflow　　　　
element.style.border=”solid 1px red”; //reflow　　　　
以上就产生多次reflow，调用的越多产生就越多　　　　
element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow
（4）缓存Layout属性值　　　　
var left=elem.offsetLeft;
多次使用left也就产生一次reflow 　　
（5）设置元素的position为absolute或fixed　　　　
元素脱离标准流，也从DOM树结构中脱离出来，在需要reflow时只需要reflow自身与下级元素 　　
（6）避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)　
（7）尽量不要用table布局　　　　
table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合，可以设置table-layout为auto或fixed，
这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
(8) 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性