JavaScript无法直接获取页面加载完整顺序，但可通过PerformanceObserver、Navigation Timing API及DOM事件监听等组合手段还原关键节点时间线和执行顺序。
JavaScript 本身无法直接“获取”页面加载的完整顺序（比如每个资源按时间戳精确排序的列表），但可以通过组合多种原生 API 和事件监听，**还原出关键节点的时间线和执行顺序**，从而分析页面加载流程。核心思路是：在不同生命周期阶段打点记录，再汇总分析。
监听页面资源加载时序
利用 PerformanceObserver 可以捕获各类资源（script、img、css、fetch 等）的实际加载、解析、执行时间：
- 监听
"resource"类型，获取每个资源的startTime、responseEnd、duration等字段 - 配合
entryType === "navigation"获取页面导航（即主文档加载）的完整耗时 - 注意：需在页面早期（如
<head>中）初始化，否则会错过部分资源
捕获关键 DOM 和脚本执行时机
结合标准事件与钩子，标记 JS 执行节奏：
-
document.readyState变化（loading→interactive→complete）反映 HTML 解析与 DOM 构建阶段 -
DOMContentLoaded表示 DOM 构建完成（不等 CSS/图片） -
window.onload表示所有资源（含图片、样式表）加载完毕 - 对每个
<script>标签（尤其defer或async）可手动添加时间戳日志，区分执行顺序
利用 Navigation Timing API 汇总主文档加载
performance.getEntriesByType("navigation") 返回导航性能数据，包含精确时间戳：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
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 的毫秒数，需用它做基准比对才准确。
