document load 和 document ready , DOMContentLoaded的区别

发布于 2026-09-08分类：JavaScript阅读 33

document load 和 document ready、DOMContentLoaded 的区别

页面加载完成涉及三种常见事件。

1. `load`

当页面所有资源全部加载完成后（包括 DOM 文档树、CSS 文件、JS 文件、图片资源等），触发 load 事件。

问题：如果图片资源较多，加载时间较长，onload 等待执行的函数需要等待较长时间，所以一些效果可能受到影响。

window.addEventListener('load', () => {
  console.log('所有资源已加载');
});

2. `$(document).ready()`（jQuery 语法）

当 DOM 文档树加载完成后就执行回调（不等待图片、CSS 等），所以会比 load 触发更早。

原生的 JS 不包括 ready() 这个方法，只有 load 方法（即 onload 事件）。

// jQuery
$(document).ready(() => {
  console.log('DOM 已就绪');
});

3. `DOMContentLoaded`（原生）

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。是原生 JS 中"DOM 就绪"的标准事件。

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM 解析完成');
});

触发顺序总结

DOMContentLoaded → （图片等加载完毕） → load

补充：把脚本标签放在 <body> 末尾也能达到类似 DOMContentLoaded 的效果，因为脚本执行时 DOM 已解析。给 <script> 加 defer 属性也会等 DOM 解析完再执行；加 async 则下载完立刻执行，与 DOMContentLoaded 顺序不固定。