如何利用 JavaScript 获取页面加载顺序-js教程-PHP中文网

javascript无法直接获取页面加载完整顺序，但可通过performanceobserver、navigation timing api及dom事件监听等组合手段还原关键节点时间线和执行顺序。

如何利用 javascript 获取页面加载顺序

JavaScript 本身无法直接“获取”页面加载的完整顺序（比如每个资源按时间戳精确排序的列表），但可以通过组合多种原生 API 和事件监听，**还原出关键节点的时间线和执行顺序**，从而分析页面加载流程。核心思路是：在不同生命周期阶段打点记录，再汇总分析。

监听页面资源加载时序

利用 PerformanceObserver 可以捕获各类资源（script、img、css、fetch 等）的实际加载、解析、执行时间：

监听 "resource" 类型，获取每个资源的 startTime、responseEnd、duration 等字段
配合 entryType === "navigation" 获取页面导航（即主文档加载）的完整耗时
注意：需在页面早期（如中）初始化，否则会错过部分资源

捕获关键 DOM 和脚本执行时机

结合标准事件与钩子，标记 JS 执行节奏：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

document.readyState 变化（loading → interactive → complete）反映 HTML 解析与 DOM 构建阶段
DOMContentLoaded 表示 DOM 构建完成（不等 CSS/图片）
window.onload 表示所有资源（含图片、样式表）加载完毕
对每个 <script></script> 标签（尤其 defer 或 async）可手动添加时间戳日志，区分执行顺序

利用 Navigation Timing API 汇总主文档加载

performance.getEntriesByType("navigation") 返回导航性能数据，包含精确时间戳：

startTime：导航开始时间（相对 performance.timeOrigin）
domInteractive：DOM 开始交互（readyState === "interactive"）
domContentLoadedEventStart / End：DOMContentLoaded 事件触发区间
loadEventStart / End：window.onload 触发时间

简单整合示例（控制台快速验证）

复制以下代码到浏览器控制台，即可输出带时间戳的关键节点：

function logLoadTimeline() {
  const nav = performance.getEntriesByType("navigation")[0];
  console.table({
    "HTML start": nav.startTime,
    "DOM interactive": nav.domInteractive,
    "DOM content loaded": nav.domContentLoadedEventEnd,
    "Window load": nav.loadEventEnd
  });

  performance.getEntriesByType("resource").forEach(r => {
    if (r.initiatorType === "script" || r.initiatorType === "link") {
      console.log(`[${r.name}] ${r.startTime.toFixed(1)}ms → ${r.responseEnd.toFixed(1)}ms`);
    }
  });
}
logLoadTimeline();

不复杂但容易忽略的是：所有时间值都是相对于 performance.timeOrigin 的毫秒数，需用它做基准比对才准确。