JavaScript 文档加载

在 JavaScript 中，文档加载是指将 JavaScript 代码与 HTML 文档结合使用的过程。在浏览器中，当 HTML 文档被加载时，浏览器会逐步解析和执行其中的 JavaScript 代码。

文档加载过程包括以下几个重要的事件：

DOMContentLoaded

DOMContentLoaded 事件在 HTML 文档被完全解析和构建的同时触发，无需等待样式表、图像或子框架的加载完成。这个事件标志着可以安全地操作 DOM，并且通过 JavaScript 修改页面的元素、样式或事件监听器。

document.addEventListener("DOMContentLoaded", function(event) {
    // DOMContentLoaded 事件的回调函数
    // 在这里可以执行操作 DOM 的代码
});

load

load 事件在整个页面及其所有依赖资源（如样式表、图像和嵌入式内容）完成加载后触发。此时，整个页面已经完全加载，包括所有外部文件和资源。

window.addEventListener("load", function(event) {
    // load 事件的回调函数
    // 在这里可以执行操作 DOM 的代码、发送网络请求等
});

使用外部 JavaScript 文件

为了使代码更简洁、可维护和可重用，通常会将 JavaScript 代码保存在外部文件中，并通过 HTML 的 <script> 标签来引入。

<script src="path/to/script.js"></script>

异步加载 JavaScript

为了提高页面加载速度，可以将 JavaScript 文件异步加载。这样可以避免 JavaScript 代码阻塞页面的渲染过程。异步加载可以使用 <script> 标记的 async 属性。

<script src="path/to/script.js" async></script>

延迟加载 JavaScript

与异步加载不同，通过在 <script> 标记中使用 defer 属性，可以使 JavaScript 文件在页面完全加载后再执行。这样有助于提高页面的渲染速度，并确保 JavaScript 代码能够操作完整的 DOM。

<script src="path/to/script.js" defer></script>

以上就是 JavaScript 文档加载的基本概念和一些常用的技巧。通过理解和掌握文档加载过程，可以更好地组织和管理 JavaScript 代码，提升页面的性能和用户体验。

参考资料：

• DOMContentLoaded Event
• load Event
• The Definitive Guide to JavaScript Load Events