第一步：解析html标签，构建DOM树
在这个阶段，引擎开始解析html，解析出来的结果会成为一棵dom树（包含全节点，包括隐藏的节点和<head>标签）
dom树构建完成以后主要作为下阶段渲染树状图的输入,并且成为网页和脚本的交互界面。(最常用的就是getElementById等等)
当解析器到达script标签的时候，发生下面四件事情
html解析器停止解析
如果是外部脚本，就从外部网络获取脚本代码
将控制权交给js引擎，执行js代码
恢复html解析器的控制权
结论：由于<script>标签是阻塞解析的，将脚本放在网页尾部会加速代码渲染。
第二步：解析CSS标签，构建CSSOM树
js会阻塞解析，因为它会修改文档(document)。css不会修改文档的结构，如果这样的话，似乎看起来css样式不会阻塞浏览器html解析。但是事实上 css样式表是阻塞的。阻塞是指当cssom树建立好之后才会进行下一步的解析渲染
通过以下手段可以减轻cssom带来的影响
将script脚本放在页面底部
尽可能快的加载css样式表
将样式表按照media type和media query区分，这样有助于我们将css资源标记成非阻塞渲染的资源
非阻塞的资源还是会被浏览器下载，只是优先级较低
第三步：把DOM和CSSOM组合成渲染树（render tree）
这个阶段会让原本的dom树和cssom树相结合，成为一颗新的渲染树 render tree
值得注意的是：render tree不会将所有原本的dom树全部构建出来，一些不需要显示的元素则不会被构建到render tree中
渲染树不会添加 css中设置为display:none的dom元素
渲染树不会添加 <head>标签中的元素
第四步：在渲染树的基础上进行布局，计算每个节点的几何结构
布局渲染:
布局(layout)：定位坐标和大小，是否换行，各种position, overflow, z-index属性
当js脚本中存在修改会影响dom的布局时，会产生回流（Reflow）,回流会让浏览器重新执行第四步和第五步的操作
第五步，调用 GPU 绘制，合成图层，显示在屏幕上
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting
当js脚本中存在修改会影响dom样式,但不影响布局时，会产生重绘（Repaint）,重绘会让浏览器重新执行第五步的操作
帖子还没人回复快来抢沙发