浏览器的渲染机制

关于浏览器的渲染机制，这应该是每一个前端需要了解的一个很重要的知识点

这对于后面的web性能优化有着至关重要的作用。

如图：

1.首先浏览器解析html，生成一个dom树。
2.然后会解析css，生成一个cssom树。
3.根据解析的dom树与cssom树相匹配，生成一个渲染树。
4.根据渲染树进行页面的布局（这里会计算每一个节点的几何信息）。
5.把各个解析的节点几何信息绘制在页面中，生成一个静态页面。

在页面构建渲染树时，引入的一些js脚本文件，js脚本控制一些节点的显示和隐藏
包括颜色边框等等，这都需要返回以上的步骤来重新绘制，js控制脚本会多次修改dom树。

当用户浏览网页，通过js脚本来交互作用的时候，这里dom树可能会发生一些变化，这些操作的过程就叫repaint或者是reflow。

repaint

repaint：当页面的元素通过js脚本交互，页面元素发生改变，但是不会影响元素在页面中的位置，浏览器仅仅会用新的样式来重新绘制样式。这些操作就属于repaint。

reflow

reflow：当页面元素通过js脚本交互，页面元素发生改变，影响了元素在页面中的位置（页面元素位置的变化需要重新布局），或者是文档的结构的变化。这个过程就是reflow。