DOMContentLoaded、readystatechange、load、ready：页面加载事件详解

页面加载事件：掌控页面加载过程

对于前端开发者而言，页面加载事件至关重要，它们赋予了我们掌控页面加载过程的能力，包括加载资源、执行脚本和更新页面状态。

DOMContentLoaded：DOM树构建完毕

DOMContentLoaded事件在HTML文档解析完毕，DOM树构建完成时触发。此时，页面结构已经准备就绪，但外部资源（如图像和样式表）可能尚未加载完毕。这个事件通常用于加载外部脚本，确保它们在DOM准备就绪后立即执行。

readystatechange：XMLHttpRequest状态改变

readystatechange事件适用于XMLHttpRequest对象，用于从服务器获取数据。该事件在XMLHttpRequest状态发生变化时触发，共有四个状态：

• UNSENT：请求未初始化
• OPENED：请求已创建但未发送
• HEADERS_RECEIVED：服务器已发送响应头
• LOADING：数据正在加载
• DONE：请求已完成

通过监听readystatechange事件，我们可以追踪XMLHttpRequest的加载状态，并在加载完成后执行相应操作。

load：所有资源加载完毕

load事件在页面上的所有资源（包括HTML、CSS、图像）加载完毕时触发。这是整个页面加载过程的最终阶段，表明页面已完全准备就绪，可以执行需要所有资源的操作，如显示页面内容或启动应用程序。

ready：自定义加载完成事件

ready事件是一个自定义事件，可以在页面加载完成后触发。它通常用于等待所有必要的脚本和资源加载完毕后再执行某些操作。通过触发ready事件，我们可以确保页面完全加载完毕，再执行需要这些资源的操作。

比较：选择合适的事件

下表总结了这四个事件的时机和用途：

事件	时机	用途
DOMContentLoaded	DOM树构建完毕	加载外部脚本
readystatechange	XMLHttpRequest状态改变	跟踪XMLHttpRequest加载状态
load	所有资源加载完毕	显示页面内容或启动应用程序
ready	自定义加载完成事件	等待所有资源加载完毕

示例代码

DOMContentLoaded

document.addEventListener("DOMContentLoaded", function() {
  // 加载外部脚本
});

readystatechange

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  // 处理XMLHttpRequest状态变化
};

load

window.addEventListener("load", function() {
  // 显示页面内容或启动应用程序
});

ready

document.addEventListener("ready", function() {
  // 等待所有资源加载完毕后再执行操作
});

常见问题解答

1. 如何确定页面何时加载完毕？

可以使用load事件来确定页面何时完全加载完毕，因为它在所有资源加载完成后触发。

2. 在页面加载过程中，是否有多个事件可以触发？

是的，在页面加载过程中，可能会触发多个事件，例如DOMContentLoaded、load和ready事件。

3. 如何在页面加载完成后执行脚本？

可以在load或ready事件处理程序中执行脚本，以确保页面完全加载完毕后再执行脚本。

4. 如何自定义ready事件？

可以通过触发CustomEvent对象来自定义ready事件，并在页面加载完毕时触发它。

5. 这些事件对页面性能有何影响？

监听事件会对页面性能产生轻微影响，因此，仅在需要时才监听事件非常重要。