在前端开发中，我们通常需要在页面加载完成后才能进行一些操作，例如改变元素的样式、添加事件监听器等。为了实现这个目的，我们可以使用文档就绪事件（document ready event），该事件会在文档完全加载并解析完成后触发。在jQuery和其他许多JavaScript库中，我们可以使用 $(document).ready() 或 $() 函数来绑定文档就绪事件的处理函数。
但是，在实践中，我们可能会遇到一些问题。例如，当我们在<head>标签中引入的外部脚本需要在页面加载完成后才能运行时，我们该怎么办？本文将探讨何时执行 $(文档) 就绪回调以及如何在不同情况下正确地绑定它们。
文档就绪状态
在深入讨论之前，我们需要先理解文档就绪状态。文档就绪状态指的是文档已经被浏览器完全加载并解析完成，包括所有嵌套的资源文件（例如图像、样式表和脚本）。文档就绪状态有不同的定义方式，例如：
- DOMContentLoaded 事件：当文档和其所有子资源完成解析后触发。
- window.onload 事件：当所有文档和资源完成加载后触发。
大多数情况下，我们只需要在 DOMContentLoaded 事件触发时执行我们的代码即可。这是因为 DOMContentLoaded 的触发时间要比 window.onload 更早，所以用户可以更快地看到页面的响应。然而，在某些情况下，我们可能需要等待所有资源加载完成才能执行我们的代码，例如在处理图像或其他外部媒体资源时。
绑定文档就绪事件
在jQuery中，我们可以使用 $() 函数来绑定一个文档就绪事件的处理函数：
$(document).ready(function() {
// 在文档就绪时执行的代码
});或者，我们可以使用简单形式的 $() 函数：
$(function() {
// 在文档就绪时执行的代码
});这两种形式是等效的。如果我们想要使用原生的 JavaScript 来绑定 DOMContentLoaded 事件，则可以使用以下方式：
document.addEventListener('DOMContentLoaded', function() {
// 在文档就绪时执行的代码
});请注意，在某些浏览器（例如IE9及以下版本）中，可能无法正确地触发 DOMContentLoaded 事件。在这种情况下，我们可以考虑使用其他库（例如jQuery）来解决这个问题。
推迟脚本执行
有时候，我们需要推迟脚本的执行直到文档就绪状态。在这种情况下，我们可以使用 defer 或 async 属性来加载脚本。
当我们将一个脚本标记为 defer 时，它将在文档解析完成后执行，但在 DOMContentLoaded 事件触发前执行。这意味着我们可以安全地将脚本放在文档的 <head> 中：
<head> <script defer src="script.js"></script> </head>
相反，当我们将一个脚本标记为 async 时，它将在下载完毕后立即执行，不受文档就绪状态的影响。这意味着我们应该尽可能将脚本放在文档的底部，避免因为脚本的下载和执行而阻塞页面的渲染：
<body> <!-- 页面内容 --> <script async src="script.js"></script> > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/12240) ，转载请注明来源 [https://www.javascriptcn.com/post/12240](https://www.javascriptcn.com/post/12240)