揭秘HTML5的隐藏开关：监控资源加载状态readyState属性全解析！

在前端开发中，我们常常需要知道页面或资源的加载状态------是已经准备好让用户交互，还是还在后台默默加载？这时候，HTML5的 readyState 属性就像一个"心跳监测仪"，默默记录着文档、请求或媒体的每一个关键生命节点。它看似低调，却是前端性能优化和用户体验设计的幕后功臣。今天，我们就来揭开它的神秘面纱。

一、什么是readyState？

readyState 是HTML5中用于描述文档、请求或媒体资源加载状态的属性。它通过返回不同的状态值，帮助开发者判断当前操作是否完成、是否可以进行下一步交互。根据使用场景的不同，readyState的含义和值也会有所差异，但其核心目标始终一致：监控加载过程的每一个关键阶段。

二、常见属性与值：不同场景下的"状态密码"

1. 文档（Document）的readyState

文档的 readyState 通过 document.readyState 访问，常用于监控整个页面的加载进度。它包含以下四种状态：

uninitialized（未初始化）：文档尚未开始加载（例如页面刚打开时）。
loading（加载中）：文档正在加载，但尚未完成。
interactive（可交互）：文档已加载完成，DOM树已构建完毕，可以执行脚本和事件绑定。
complete（完全加载）：文档及所有子资源（如图片、样式表）已完全加载。

javascript 复制代码

document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    console.log("页面加载完成，可以执行初始化操作！");
  }
};

2. XMLHttpRequest（XHR）的readyState

在异步请求（如Ajax）中，readyState是XMLHttpRequest对象的状态指示器，共有五个值：

0 (UNSENT) ：请求未初始化，尚未调用 open() 方法。
1 (OPENED) ：请求已初始化，open() 已调用，但未发送。
2 (HEADERS_RECEIVED) ：send() 已调用，服务器响应头已接收。
3 (LOADING)：响应体正在传输中（可能部分数据已接收）。
4 (DONE)：请求完成，响应体已全部接收。

javascript 复制代码

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("请求完成，数据已接收：", xhr.responseText);
  }
};
xhr.open("GET", "https://example.com/data", true);
xhr.send();

3. 媒体元素（Audio/Video）的readyState

对于音频/视频元素，readyState属性返回媒体的就绪状态，用于判断是否可以播放或需要缓冲：

0 (HAVE_NOTHING)：没有关于媒体是否就绪的信息。
1 (HAVE_METADATA)：已加载元数据（如时长、尺寸）。
2 (HAVE_CURRENT_DATA)：当前播放位置的数据可用，但不足以播放下一帧。
3 (HAVE_FUTURE_DATA)：当前及至少下一帧的数据可用。
4 (HAVE_ENOUGH_DATA)：数据足够开始播放。

javascript 复制代码

const video = document.querySelector("video");
video.onloadeddata = function() {
  if (video.readyState >= 3) {
    console.log("视频已加载足够数据，可以开始播放！");
  }
};

三、使用技巧：如何高效利用readyState？

1. 动态加载资源的优化

在页面加载过程中，可以通过监听 document.readyState 的变化，动态调整资源加载策略。例如，在 interactive 状态下优先加载关键资源，避免阻塞用户交互。

javascript 复制代码

if (document.readyState === "interactive") {
  // 加载非关键资源（如广告、统计脚本）
  const script = document.createElement("script");
  script.src = "https://example.com/non-critical.js";
  document.head.appendChild(script);
}

2. 异步请求的进度控制

在XHR请求中，结合 readyState 和 progress 事件，可以实时监控数据传输进度，并在用户界面中反馈加载状态。

javascript 复制代码

xhr.onprogress = function(event) {
  if (xhr.readyState === 3) {
    console.log(`已接收数据：${event.loaded} / ${event.total} 字节`);
  }
};

3. 媒体资源的预加载策略

通过监听媒体元素的 readyState，可以决定是否开始播放或提示用户等待。例如，在 HAVE_FUTURE_DATA 状态下启动自动播放，避免卡顿。

javascript 复制代码

video.oncanplay = function() {
  if (video.readyState >= 3) {
    video.play();
  } else {
    alert("视频正在缓冲，请稍后再试！");
  }
};

四、应用场景：从页面加载到媒体播放的全面覆盖

1. 页面初始化与性能优化

在 document.readyState 为 complete 时，执行页面初始化操作（如渲染图表、绑定事件），确保所有资源加载完毕后再触发复杂计算，避免阻塞用户交互。

2. 异步请求的错误处理

在XHR请求中，通过 readyState === 4 判断请求是否完成，再结合 status 码（如404、500）处理错误，提升容错能力。

javascript 复制代码

if (xhr.readyState === 4) {
  if (xhr.status === 200) {
    // 成功处理
  } else {
    console.error("请求失败，状态码：", xhr.status);
  }
}

3. 视频播放的用户体验优化

在视频播放前，通过 readyState 检查缓冲进度，动态调整播放策略。例如，在 HAVE_NOTHING 状态下显示加载动画，在 HAVE_ENOUGH_DATA 时自动播放。

五、注意事项：避开这些"坑"！

1. 兼容性问题

旧版浏览器支持：虽然主流浏览器均支持readyState属性，但IE8及以下版本对媒体元素的readyState支持有限。
文档状态的兼容性 ：在IE中，document.readyState 的 interactive 状态可能与标准浏览器略有差异，需通过事件监听进行验证。

2. 状态值的误判

文档状态的"complete"陷阱 ：document.readyState === "complete" 并不意味着所有异步脚本已执行完毕，需结合 window.onload 事件确保完全加载。
XHR请求的"DONE"状态 ：readyState === 4 仅表示请求完成，需进一步检查 status 码（如200-399）确认请求是否成功。

3. 媒体元素的动态更新

实时状态变化 ：媒体元素的readyState会随着缓冲进度动态变化，需通过 onprogress 或 oncanplay 事件实时监听，避免依赖静态检查。

六、总结：readyState的"幕后英雄"价值

readyState 作为HTML5的核心属性之一，其价值远不止于简单的状态监控。它像一位"无声的指挥家"，在文档加载、异步请求和媒体播放中精准把控每一个关键节点。掌握它的使用技巧，不仅能优化前端性能，还能显著提升用户体验。

在实际开发中，合理利用 document.readyState、XMLHttpRequest.readyState 和媒体元素的 readyState，将帮助你构建更高效、更稳定的Web应用。下次当你需要判断资源加载状态时，不妨看看这位"幕后英雄"的表现吧！