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

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

浏览器渲染机制与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树，将页面渲染到屏幕上去。

所以，当浏览器渲染到第3步时，就会加载页面引入的js文件，在一些网站中，有的将全部的js文件在<head></

head>之间引入，这样做无疑增加了浏览器压力，会导致页面加载速度减慢，所以建议大家对于JS的引入要视情况而定。

（一）比如网站中引入一些插件依赖的JS文件需在head标签内引入，也就是头部引入。如插件bootstrap-table.jsj所依赖的jquery.js文件；

（二）动态生成页面dom元素的JS文件，根据情况需要在头部引入；

（三）页面交互的JS文件在底部引入。如“新建”按钮功能的js交互文件；

（四）在style标签下面用window.onload引入处理较少的js逻辑处理代码