原生JS应用中是否仍需要使用$document.ready()的现代等效实现？

要不要做DOM就绪的包装，完全取决于你的脚本加载方式，绝大多数现代开发场景下已经不需要额外的入口包装，具体可以参考以下规则：

• 如果你的普通脚本放在</body>闭合标签之前加载：浏览器会按从上到下的顺序解析HTML，等到解析到script标签时，前面的所有DOM节点已经生成完成，直接编写业务代码即可，不需要额外加任何监听逻辑，这是目前最简单、最推荐的普通脚本加载方式。
• 如果你的脚本需要放在<head>标签中加载：
  • 给script标签添加defer属性，或者声明type="module"将脚本设为ES模块，二者默认都会等待DOM解析完成后再执行脚本，同样不需要额外加DOM就绪的监听包装。
  • 如果没有加上述属性，就需要手动添加原生的DOMContentLoaded事件监听，功能完全等价于jQuery的$document.ready()：

    document.addEventListener('DOMContentLoaded', () => {
      // 在此处编写需要等DOM就绪才能执行的代码
    })
    

• 特殊场景：如果你的代码逻辑依赖图片、字体、样式表等所有外部资源全部加载完成才能运行，才需要监听window.load事件，它的触发时机比DOMContentLoaded更晚。

当前行业实践总结 #

现在绝大多数项目要么将脚本放在HTML末尾，要么使用ES模块/带defer属性的头脚本，都不需要额外加入口包装。只有当你有部分逻辑需要提前执行、部分逻辑需要等DOM就绪的特殊场景，才需要手动加DOMContentLoaded监听。

内容的提问来源于stack exchange，提问作者finitud