浏览器渲染机制

DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。
Render Tree: DOM和CSSOM合并后生成Render Tree。
Layout: 计算出Render Tree每个节点的具体位置。
Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上。

• 1.当用户输入一个URL时，浏览器就会向服务器发出一个请求，请求URL对应的资源
  2.接受到服务器的响应内容后，浏览器的HTML解析器，会将HTML文件解析成一棵DOM树，DOM树的构建是一个深度遍历的过程，当前节点的所有子节点都构建完成以后，才会去构建当前节点的下一个兄弟节点。
  3.将CSS解析成CSSOM树（CSS Rule Tree）
  4.根据DOM树和CSSOM树，来构建Render Tree（渲染树）,注意渲染树，并不等于DOM树，因为一些像head或display:none的东西，就没有必要放在渲染树中了。
  5.Layout，计算出每个节点在屏幕中的位置。
  6.正式开画（paint）。Layout后，浏览器已经知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置是哪里，就进入了最后一步painting,按照算出来的规则，通过显卡，把内容画到屏幕上。

  借用一张图：
  

ps.扩展
Repaint ——改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
Reflow ——元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。
reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

1.影响页面渲染速度主要因素有哪些？

reflow(回流)和repaint(重绘)

2.哪些情况下会导致reflow发生？

改变窗囗大小；改变文字大小；添加/删除样式表；内容的改变，如用户在输入框中敲字；激活伪类，如:hover
(IE里是一个兄弟结点的伪类被激活)；操作class属性；脚本操作DOM；计算offsetWidth和offsetHeight；设置style属性。

3.如何避免reflow(回流)？

reflow是不可避免的，只能将reflow对性能的影响减到最小。

1.尽可能限制reflow的影响范围。需要改变元素的样式，不要通过父级元素影响子元素。最好直接加在子元素上。

2.通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。

3.减少不必要的DOM层级（DOM depth）。改变DOM树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行reflow上面。

4.避免不必要的复杂的CSS选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的CPU。
5.不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className
6.把 DOM 离线后修改。
7.不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
8.尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。
9.为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow 。
10.尽可量少使用table布局，牵一发而动全身。