定义

DomReady 时间 = 页面可互动（初步可用）的时刻是衡量前端页面加载体验非常核心的性能指标。

DomReady = 从页面开始加载 → HTML 解析完成 → DOM 树构建完成 的时间，即：

  • HTML被完全解析
  • DOM树已经构建好
  • 但CSS、图片、视频等静态资源可能还没加载完

它对应浏览器事件:

1
document.addEventListener("DOMContentLoaded", fn)

DomReady 和 load 的区别

DomReady 比 load 时间早得多。

指标 触发时机 是否等待CSS 是否等待图片/视频
DomReady(DOMContentLoaded) DOM树构建完成 会等待 CSS（因为 CSS 可能会阻塞 DOM） ❌不等待图片
window.load 页面所有资源加载完毕 ✅ ✅

DomReady 如何计算

常见的计算方式：

1
const domReadyTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;

或在 Performance API 时代（更推荐）：

1
2
let [entry] = performance.getEntriesByType("navigation");
console.log(entry.domContentLoadedEventEnd);

DomReady 时间越短越好吗

通常越短越好。
它意味着你的页面 HTML 解析速度快，用户能更早开始使用页面。

但需要注意：

  • CSS 文件太多 → DomReady 会延长（CSS 会阻塞 DOM 构建）

  • JS 在 <head> 中没有 defer → 会阻塞 DOM 解析

  • HTML 文件太大 → 解析时间变长

如何优化 DomReady

减少同步 JS（阻塞 HTML 解析）

把 <script> 加上：

1
<script src="xx.js" defer></script>

或放在 body 底部。

压缩 HTML

减少解析量

减少或延后 CSS

将非关键 CSS 延迟加载：

1
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

避免大量 DOM 操作

会延迟DOM构建