【浏览器渲染原理】解析和DOM树构建之处理脚本和样式表的顺序

时间:2020-11-28 19:45:00

1样式表

浏览器在加载网页的过程中,先下载HTML并开始解析。如果发现外部CSS资源链接,就发送下载请求。浏览器在下载CSS资源的同时,解析HTML文件。

在应用样式的时候,不会更改DOM树,因此解析样式表的时候也不会停止文档解析。


2 脚本

解析器遇到<script>标记时,立即解析并执行脚本。一旦发现有脚本文件的引用,就必须等待脚本文件下载完。这时,文档的解析会暂停,并且等到脚本执行完再继续。所以,脚本文件的下载和执行,会阻断其他资源文件的下载。


3 预加载器

当浏览器被脚本文件阻塞时,预加载器(一个轻量级的解析器)会继续浏览剩下的标记,寻找需要下载的资源。如果发现有需要下载的资源,预加载器在开始接收这些资源。预加载器只能检索HTML标签中的URL,无法检测到使用脚本代码添加的URL,这些资源要等脚本代码执行时才会获取。


【参考资料】

1 浏览器的工作原理:现代网络浏览器幕后揭秘 http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about

2 如何通过预加载器提升网页加载速度 http://www.admin10000.com/document/3724.html