$(document).ready 无需 jQuery：2025 年的现代替代方案

为什么在 2025 年应该放弃 jQuery 的 $(document).ready？

如果你还在写 $(document).ready(function() { ... })——要么你在处理遗留项目，要么你错过了现代 JavaScript 的潜力。在 2025 年，jQuery 就像一部 按键手机：能用，但大家早已转向触屏。

在 Stack Overflow 上，问题 $(document).ready equivalent without jQuery 已获得 数十万次浏览。这意味着全球开发者都在寻找轻量、快速且现代的方法，在 DOM 加载后执行代码。答案很简单：浏览器的原生支持早已覆盖了 jQuery 曾经解决的所有需求。

在本文中，我们将介绍 3 种最佳方法，用纯 JavaScript 替代 $(document).ready，讨论性能细节，并展示你今天就能使用的真实代码示例。

DOMContentLoaded——无需 jQuery 的主角

$(document).ready 最直接的替代方案是 DOMContentLoaded 事件。它在浏览器完全加载并解析 HTML 文档后触发，但 在图片、样式和其他资源加载之前。这正是 jQuery 在底层所做的。

基本语法如下：

document.addEventListener('DOMContentLoaded', function() {\n    // 你的代码将在 DOM 完全加载后执行\n    console.log('DOM 已完全加载并准备就绪！');\n    document.querySelector('.header').style.color = '#2c3e50';\n});

为什么这比 jQuery 更好？

\n
• 速度：无需为了一个功能加载 30+ KB 的库。
\n
• 可控性：你确切知道加载时发生了什么。
\n
• 兼容性：适用于所有现代浏览器（IE9+、Chrome、Firefox、Safari、Edge）。
\n

但有一个细节：如果你的脚本在 DOM 加载 之后 才引入，事件将不会触发。解决方案是检查 document.readyState：

function ready(fn) {\n    if (document.readyState !== 'loading') {\n        fn(); // DOM 已加载\n    } else {\n        document.addEventListener('DOMContentLoaded', fn);\n    }\n}\nready(function() {\n    console.log('保证在 DOM 加载后执行');\n});

这个模式是 2025 年替代 $(document).ready 的 黄金标准。

defer 属性：最简单的方法，无需一行额外代码

如果我告诉你，甚至可以完全不写 DOMContentLoaded 呢？在 <script> 标签中使用 defer 属性就能为你完成所有工作：

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

它是如何工作的？ 浏览器在解析 HTML 的同时并行加载脚本，但 仅在文档完全解析后才执行它。这相当于 script.js 中的所有代码都自动包裹在 $(document).ready 中。

优点：

\n
• 无需额外代码——只需添加一个属性。
\n
• 带有 defer 的脚本按照它们在 HTML 中出现的顺序执行。
\n
• 在 97% 的浏览器中有效（包括旧版 Safari）。
\n

何时使用？ 非常适合需要操作 DOM 但不阻塞渲染的普通脚本。例如：

<script src="analytics.js" defer></script>\n<script src="app.js" defer></script>\n<!-- app.js 将在 analytics.js 之后执行，但在 window.onload 之前 -->

与 jQuery 对比：在 app.js 中写 $(document).ready 是多余的代码。而使用 defer，你只需写：

// app.js — 无