很多前端开发者经常会在 JavaScript 代码中使用 jQuery 的 $(document).ready() 函数，以确保 DOM 已经加载完毕再执行他们的代码。这是一个非常好的实践，但并不是所有的情况都需要将代码包装在 $(document).ready() 函数中。在本文中，我们将探讨在哪些情况下需要使用 $(document).ready() 函数，并提供一些示例代码。
DOM 加载的时机
当浏览器读取 HTML 页面时，它会从头到尾逐行解析文档，并构建 DOM 树。当遇到外部脚本（<script>）标签时，它会停止解析 HTML，并执行 JavaScript 代码。如果 JavaScript 代码操作了未被解析的 HTML，那么代码就会失败。为了避免这种情况，可以使用 $(document).ready() 函数。该函数会在整个 DOM 都加载完成后才运行代码。
以下是一个简单的例子：
--------- -----
------
------
----------------------
-------
------
--------- -----------
------- -----------------------------------------------------------
--------
---------------------------- -
---------------- -- ---------
---
---------
-------
-------在上面的代码中，console.log() 只会在 DOM 完全加载完成后才会运行。如果我们没有使用 $(document).ready() 函数，那么代码可能会尝试在 DOM 加载之前执行，从而导致错误。
不需要使用 document.ready 的情况
虽然 $(document).ready() 是一个非常好的实践，但并不是所有的情况都需要将代码包装在其中。以下是一些情况：
1. 在页面底部引入脚本
在这种情况下，浏览器已经解析了整个文档，并且所有的 DOM 元素都已经加载和准备就绪。因此，在这种情况下，我们不需要使用 $(document).ready() 函数。
--------- -----
------
------
----------------------
-------
------
--------- -----------
------- -----------------------------------------------------------
------- ---------------------------
-------
-------2. 使用 defer 或 async 属性
使用 defer 或 async 属性可以确保脚本的执行不会阻塞页面的加载。defer 属性表示脚本的执行会延迟到 DOM 解析完成之后，而 async 属性表示脚本的执行不会阻塞页面的解析，但是它也不能保证 DOM 已经完全加载完成。
--------- -----
------
------
----------------------
------- ----- ---------------------------
-------
------
--------- -----------
-------
-------3. 使用 ES6 模块
如果你使用的是 ES6 模块，那么你可以将代码包装在 import 语句中。ES6 模块会等待所有依赖项都加载完成后再执行代码。
--------- -----
------
------
----------------------
------- --------------
------ - ---------- - ---- ----------------
-------------
---------
-------
------
--------- -----------
-------
-------结论
虽然 $(document).ready() 是一个非常好的实践，但并不是所有的情况都需要将代码包装在其中。在页面底部引入脚本、使用 defer 或 async 属性、使用 ES6 模块等情况下，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28149