1.解析HTML标签。构建DOM树
2.解析CSS，构建cssom树
3.把dom和cssom组合成渲染树(render tree)
4.把渲染树的每个节点进行布局，计算每个节点的几何结构
5.把每个节点绘制到屏幕上（painting）
流程图如下：
1.png
layout ：布局
render：渲染
painting：绘制
关于Repaint 和
我们可以简单的理解成：
Repaint: 重新绘制
Reflow: 重新计算
说的详细一点，当一个DOM节点出现的时候并且把它放置在页面上，分两步骤。
1.把它的样子画出来
2.把它放在他应该在的位置
有时候我们在页面中有些操作会改变dom 节点的样式，这个时候Repaint(重新绘制)和Reflow(重新计算就出现了)
Repaint(重新绘制)
例如：我们点击一个按钮他的背景色发生变化，这个时候它的样式就发生了变化，就可以理解成我们的页面重新画了他一遍repaint
Reflow(重新计算)
例如：我们点击一个按钮他的边框出现了变化，他周围的元素都受到了影响，导致位置受到都发生了变化，页面要重新绘制元素的样式并进行拜访，这个时候就是页面进行了Reflow
这样我们就可以理解什么是Repaint和reflow了，回顾一看，reflow的成本呢repain的成本高的太多了（毕竟出现了reflow一定会出现repain）
注意：如果在一些性能可以的PC端上发生reflow并没有什么，但是如果发生在手机上，这个就会造成卡顿，用户体验并不是很好
一般那些情况下会出现reflow和repaint呢
1.当你增加、删除、修改 DOM 结点时，会导致 2.Reflow 或 Repaint。
3.当你移动 DOM 的位置，或是搞个动画的时候。
4.当你修改 CSS 样式的时候。
5.当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
6.当你修改网页的默认字体时。
如何优化：
网友评论