Web 浏览器如何加载和执行网页的组件？

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

当浏览器遇到网页时，它会启动一系列事件来加载和执行其各个组件。这个过程可以理解为一系列步骤：

1. HTML 解析：

• 浏览器下载 HTML 文档。
• 它开始解析 HTML，创建表示页面结构的文档对象模型 (DOM)。

2.资源加载和执行：

• 当解析器遇到外部资源（例如 CSS、JavaScript）时，它会请求并下载它们。
• CSS 加载： 下载并解析 CSS 文件，并将样式应用到DOM.
• 内联 JavaScript： <script> 内的 JavaScript 代码解析并执行标签。</script>
• 外部 JavaScript： 下载、解析并执行外部 JavaScript 文件。

3.图片加载：

• 中指定的图片请求并下载标签，成为 DOM 的一部分。

4.文档就绪：

• 加载所有资源并且 DOM 完成后，document.readyState 属性将变为“完成”，并触发“DOMContentLoaded”事件。

5。文档就绪后执行 JavaScript：

• $(document).ready() 块内或依赖于 DOM 完成的任何 JavaScript 代码都将在此阶段执行。

6。页面渲染：

• 页面通过 DOM、CSS 样式和图像组合来渲染。
• 元素根据其位置和样式显示。

7。用户交互：

• 页面通过 JavaScript 事件处理程序响应用户交互，例如单击或输入文本。

示例序列：

对于提供的示例页面，加载和执行顺序大致如下如下：

1. HTML 解析
2. 加载并解析 jQuery.js
3. 加载并解析 abc.js
4. 加载并解析 abc.css
5. 解析内部
6. 解析内部 JavaScript
7. 加载 abc.jpg
8. 加载并解析 kkk.js
9. 文档准备好
10. 执行 $( document).ready 块（将 #img 的 src 更改为kkk.png)
11. 页面渲染和显示

附加说明：

• 资源加载可能是异步的，并行发生HTML 解析。
• 特定于浏览器的设置可能会影响这些的顺序和时间步骤。
• 外部资源可能会被缓存，影响加载时间和执行顺序。

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