Web 浏览器如何加载和执行网页资源？

理解网页的加载和执行顺序

简介

当用户请求网页时，浏览器会经历一个系统的过程来加载并渲染页面。此过程涉及各种资源的顺序下载、解析和执行，包括 HTML、CSS、JavaScript 和图像。

加载和执行顺序

HTML 解析：

1. 浏览器加载 HTML 文档并启动解析
2. HTML 解析创建文档对象模型 (DOM)，它表示页面的结构和内容。

外部资源下载：

3. 解析 HTML 时，浏览器会检测 CSS 文件和 JavaScript 等外部资源
4. 浏览器并行启动这些资源的异步下载。

内联 CSS 和 JavaScript 执行：

5. As HTML 被解析，浏览器遇到内联 CSS 和 JavaScript 块。
6. 这些资源被执行

CSS 应用：

7. 下载 CSS 文件时，浏览器会解析并将规则应用到 DOM。
8. DOM 中的元素具有样式

JavaScript 执行：

9. HTML 解析过程中遇到外部 JavaScript 文件就会下载并执行。
10. 浏览器会阻止解析，直到 JavaScript 执行完毕完成。

DOM 操作：

11. 解析完成后，DOM 就可以进行操作了。
12. JavaScript 可以修改DOM，影响布局和内容

文档就绪事件：

13. 当 HTML 解析和外部资源加载完成时，会触发文档就绪事件。
14. 执行此事件中的 JavaScript 代码来初始化页面元素并处理用户

图像加载

在您的示例中，在 HTML 解析过程中遇到 abc.jpg 时会下载并显示。当 $(document).ready 事件被触发时，kkk.png 被下载并设置为图像源。

浏览器差异

加载和执行顺序可能会因浏览器的不同而略有不同。例如，某些浏览器会限制每个域的同时请求数以优化资源加载。

缓存

缓存机制会影响资源加载。可以从存储而不是服务器加载缓存资源，从而减少下载时间。

并行执行

通常，HTML 解析、JavaScript/DOM 操作和 CSS 应用程序在单独的线程中并行运行。但是，JavaScript 执行可能会阻止 HTML 解析，直到脚本完成。 CSS 规则增量应用，允许异步渲染。

参考文献

• [浏览器工程书籍](https://browser.engineering/)
• [jQuery文档](https://docs.jquery.com/Tutorials:Introducing_$(document).ready())

以上是Web 浏览器如何加载和执行网页资源？的详细内容。更多信息请关注PHP中文网其他相关文章！