浏览器渲染机制与JS文件引入顺序

基于结构、行为、样式分离的思想，大多数网站开发者将css、js文件由外部引入。众所周知，浏览器的渲染机制是自上而下的，如下图所示：

1、  首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。

2、  然后浏览器的HTML解析器会将这个文件解析，并且构建成一棵DOM树。

3、  在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。

4、  JS解析器或者是CSS解析器解析完这个元素时候，HTML又继续解析下个元素，直到整棵DOM树构建完成。

5、  DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render树。

6、  接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是一棵layout树。

7、  最后浏览器根据这棵layout树，将页