渲染引擎-webkit

因为平时谷歌浏览器用的比较多，而谷歌是webkit渲染引擎的，所以以该渲染引擎来讲，如下图：

webkit渲染引擎流程.png

由上图可以看出来，浏览器的渲染过程主要有以下几步：
1、解析html生成dom树；
2、解析css生成css规则树；
3、将dom树和css规则树合并生成渲染树；
4、遍历渲染树开始布局，计算每个节点的位置大小等信息；
5、将渲染树的每个节点绘制到屏幕。

需注意的是，在dom树生成的过程中可能会被css和js阻塞（渲染阻塞）：

当浏览器遇到一个script标记时，dom构建会暂停，直到脚本执行完毕，然后再继续构建dom。，每次去执行js脚本都会严重阻塞dom树的构建，如果js脚本还操作了css，刚好这时候css并没下载和构建，这时候浏览器就会延迟脚本的执行和dom的构建，从而先去下载和构建css。
因此，我们通常会把css在head里引入，而js则写在代码底部（body后面）