页面渲染html的过程以及重排和重绘

浏览器渲染页面的一般过程：

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

为了形成渲染树，浏览器做的事情：

1.从DOM树根节点开始，遍历每一个可见的节点

2.对每一个可见的节点，找到合适的匹配的CSSOM规划，并且应用样式

3.显示可见节点，节点包括内容和被计算的样式

总结：（浏览器的执行过程）

1.处理html标签建立DOM树

2.处理CSS标签建立CSSOM树

3.连接CSSOM树和DOM树形成一个渲染树

4.在渲染树上运行布局来计算每个节点的形状

5.在屏幕上画每个节点

重排和重绘

1.重排（Reflow）:当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并且重新构造渲染树

2.重绘（Repaint）:是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，比如：改变某个元素的背景色，文字颜色，边框颜色

3.重绘不一定会影响重排，重排必然会导致重绘

4.以上浏览器渲染页面说到，如果DOM或者CSSOM被修改，浏览器渲染页面过程会被重复执行，就是重排，将重排后的节点绘画在屏幕上就是重绘。

5.因为重排影响浏览器的性能，我们要尽可能在操作的时候减少重排：

造成重排的操作:

①添加、删除可见的DOM元素

②元素的位置发生改变

③元素的尺寸发生改变（内外边距，边框宽度等几何属性）

④页面渲染初始化

⑤浏览器窗口尺寸变化

⑥获取某些属性，当获取一些属性时，浏览器为取得正确的值也会触发重排，它会导致队列刷新。（获取offset系列值时）