HTML DOM readyState 属性（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，理解页面加载状态是优化用户体验和实现动态交互的核心。HTML DOM readyState 属性正是一款用于检测页面加载阶段的“探测器”。无论是为初学者扫清概念障碍，还是为中级开发者提供进阶技巧，本文都将通过直观的比喻、代码示例和实际案例，深入解析这一属性的原理与应用。

什么是 readyState 属性？

定义与核心作用

HTML DOM readyState 属性是浏览器提供的一种状态标识符，用于描述当前文档（Document）的加载进度。它返回一个字符串值，开发者可通过该值判断页面是否完全加载、DOM 是否可操作，从而触发相应的逻辑。

类比理解：像交响乐一样感知页面加载

想象一个网页的加载过程如同一场交响乐演出：

• 乐器（HTML、CSS、JavaScript） 逐步入场，但演奏（页面渲染）需要所有元素就位。
• readyState 就像指挥家手中的指挥棒，通过不同状态（如“准备中”“可操作”“结束”）告知开发者当前的“演出进度”。

readyState 的五种状态值

状态列表与含义

readyState 的取值共有 5 种，每个值对应页面加载的不同阶段：

注意：实际开发中主要关注前三种状态，后两种较少涉及。

状态转换的可视化流程

从加载到就绪的“生命旅程”

页面加载过程可简化为以下步骤：

1. uninitialized → loading

   • 浏览器开始解析 HTML，但 DOM 树尚未构建。
   • 类比：乐团成员陆续到场，但尚未开始排练。

2. loading → interactive

   • DOM 树构建完成，可以操作元素，但外部资源（如 CSS、图片）可能未加载。
   • 类比：乐手已就位，但部分乐器音色未调试完毕。

3. interactive → complete

   • 所有资源加载完毕，页面完全就绪。
   • 类比：演出正式开始，所有元素协调一致。

如何获取与监听 readyState？

基础语法与代码示例

通过 document.readyState 可直接获取当前状态值。例如：

console.log(document.readyState); // 输出当前状态，如 "loading" 或 "interactive"

动态监听状态变化

若需实时跟踪状态变化，可结合 setInterval 或事件监听：

function checkState() {
  const state = document.readyState;
  console.log(`当前状态：${state}`);
  if (state === "complete") {
    clearInterval(interval);
  }
}

const interval = setInterval(checkState, 1000);

实战场景：readyState 的应用

场景一：延迟加载非关键资源

假设一个电商页面需要加载大量图片，但优先保证核心功能可用：

if (document.readyState === "interactive") {
  // 在 DOM 可操作时加载商品列表
  loadProductList();
} else if (document.readyState === "complete") {
  // 在所有资源加载后显示促销弹窗
  showPromotionPopup();
}

场景二：避免“未定义元素”错误

当动态创建元素时，需确保 DOM 已加载：

if (document.readyState === "interactive") {
  const newDiv = document.createElement("div");
  document.body.appendChild(newDiv);
  console.log("元素已安全添加！");
} else {
  console.error("DOM 未就绪，无法操作元素！");
}

常见误区与解决方案

误区 1：将 readyState 与 DOMContentLoaded 混淆

• DOMContentLoaded 是事件，触发于 interactive 状态，表示 DOM 构建完成。
• 区别：readyState 是属性，需主动查询；而事件是自动触发的“信号”。

误区 2：忽略资源加载延迟

即使 readyState 为 interactive，某些资源（如图片）可能未加载完成。此时可结合 onload 事件：

window.addEventListener("load", () => {
  console.log("所有资源加载完毕，可安全操作");
});

误区 3：过度依赖 readyState 的轮询

频繁使用 setInterval 监听状态可能浪费性能。推荐改用事件驱动：

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "complete") {
    console.log("页面完全加载完成");
  }
});

进阶技巧：结合框架与异步操作

与 React/Vue 的协同

在前端框架中，readyState 可用于控制组件的加载状态：

// React 示例
function App() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const handler = () => {
      if (document.readyState === "complete") {
        setIsReady(true);
      }
    };
    document.addEventListener("readystatechange", handler);
    return () => {
      document.removeEventListener("readystatechange", handler);
    };
  }, []);

  return isReady ? <MainContent /> : <LoadingSpinner />;
}

处理异步数据请求

在页面加载完成后发起 API 请求：

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "complete") {
    fetchDataFromAPI().then(data => {
      renderData(data);
    });
  }
});

总结与展望

HTML DOM readyState 属性是开发者掌控页面加载节奏的“导航仪”。通过理解其状态含义、监听机制和实际应用，开发者能够：

1. 避免因 DOM 未加载导致的脚本错误；
2. 实现资源的按需加载，提升性能；
3. 构建更可靠、响应迅速的交互逻辑。

未来随着 Web 开发复杂度的提升，合理利用 readyState 将成为优化用户体验的关键一环。掌握这一属性，开发者便能在页面加载的“交响乐”中，精准把控每个音符的节奏。

通过本文，希望读者能建立起对 readyState 的系统认知，并在实际项目中灵活运用这一属性，让代码与页面加载状态“同频共振”。