基于结构、行为、样式分离的思想,大多数网站开发者将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树,将页面渲染到屏幕上去。
所以,当浏览器渲染到第3