页面加载时渲染过程中的 HTML、JS 关系

2023-10-01 10:41:45

在网页加载和渲染过程中，HTML、JavaScript（JS）和浏览器之间的交互错综复杂。本文将深入探讨页面访问时 HTML 和 JS 在渲染过程中的关系，揭示它们之间的微妙互动。

当浏览器开始加载页面时，它首先解析 HTML 代码，并根据其结构构建文档对象模型（DOM）。DOM 是一个表示 HTML 文档中元素的树形结构，它允许浏览器操作和修改页面内容。

HTML 渲染阶段包括以下步骤：

JS 脚本通常在 HTML 文档中加载，并且可以在 HTML 渲染阶段的不同时间点执行。这取决于 JS 脚本的类型和执行方式。

外部 JS 脚本

外部 JS 脚本在页面加载时动态下载。当它们加载后，浏览器会在 DOMContentLoaded 事件触发之前执行它们。这意味着外部 JS 脚本可以在 HTML 渲染阶段的布局和绘制步骤后执行。

内联 JS 脚本

内联 JS 脚本直接包含在 HTML 代码中。当浏览器遇到这些脚本时，它会立即执行它们。这允许 JS 脚本在 DOMContentLoaded 事件触发之前修改 HTML 结构和样式。

DOMContentLoaded 事件

DOMContentLoaded 事件在 DOM 完全解析和构建后触发。这表示 HTML 渲染阶段已经完成，并且 JS 脚本可以安全地访问和操作 DOM。

HTML 渲染阶段和 JS 执行之间存在以下交互：

HTML 渲染依赖于 JS： 在某些情况下，JS 脚本可以修改 HTML 结构或样式，影响页面的布局和绘制。例如，JS 可以动态添加或删除元素，或者改变它们的属性。
JS 依赖于 HTML 渲染： JS 脚本通常在 DOMContentLoaded 事件触发后执行，此时 HTML 已经完全渲染。这确保了 JS 脚本可以访问和操作完全构建的 DOM。
事件驱动交互： JS 脚本可以使用事件侦听器响应 HTML 元素的事件，例如点击、鼠标悬停等。这允许 JS 脚本在用户交互时动态更新页面。

优化页面渲染过程对于提高用户体验和网站性能至关重要。以下是一些最佳实践：

最小化外部 JS 脚本数量： 外部 JS 脚本可能会延迟页面加载。仅在需要时才使用外部脚本，并将其尽可能合并。
使用内联 JS 脚本用于关键修改： 如果需要在 HTML 渲染阶段早期修改 HTML，请考虑使用内联 JS 脚本。
推迟 non-critical JS 脚本： 对于不太关键的 JS 脚本，请使用异步加载或延迟加载技术，以便它们不会阻塞页面渲染。
避免修改已渲染的 HTML： 尽量避免在 DOMContentLoaded 事件触发后修改已渲染的 HTML。这可能会导致重排和重新绘制，从而降低性能。