直接用performance.getEntriesByType('resource')可获取全部已加载资源的PerformanceResourceTiming对象，但必须在load事件后调用，否则会漏掉图片等异步资源；duration仅反映响应下载耗时，归因瓶颈需手动计算各阶段差值（如TTFB、DNS、TCP），且跨域资源须服务端配置Timing-Allow-Origin头才能获取完整时序。
直接用 performance.getEntriesByType('resource') 拿数据，但必须等 load 事件之后
页面一加载完，浏览器就已默默记下所有资源的完整生命周期，不需要手动埋点。执行 performance.getEntriesByType('resource') 就能拿到全部图片、脚本、CSS 等资源的 PerformanceResourceTiming 对象数组。
但常见错误是过早调用：比如在 DOMContentLoaded 时就查，此时很多图片可能还没加载完，结果漏掉关键资源。稳妥做法只有两个：
- 监听
window.addEventListener('load', ...)，在回调里取 - 或用
setTimeout(..., 300)延迟几百毫秒再取（仅作兜底，不推荐替代 load）
注意：动态创建但尚未插入 DOM 的 src 赋值的资源，不会出现在结果里。
duration 字段几乎没用，真正要拆的是各阶段差值
duration 只等于 responseEnd - startTime，它跳过了重定向、DNS、TCP、TTFB 等前置环节，对性能归因完全无效。
定位瓶颈必须手动计算差值：
-
entry.redirectEnd - entry.redirectStart：重定向总耗时（含多次跳转） -
entry.domainLookupEnd - entry.domainLookupStart：DNS 查询时间（为 0 表示缓存复用） -
entry.connectEnd - entry.connectStart：TCP 连接 + TLS 握手时间（若entry.secureConnectionStart > 0则含 SSL） -
entry.responseStart - entry.requestStart：TTFB（首字节时间） -
entry.responseEnd - entry.responseStart：内容下载耗时
某个阶段值为 0 不代表数据丢失，大概率是被缓存跳过——比如 DNS 复用、强缓存资源不发请求。
跨域资源看不到完整时间，除非服务端加 Timing-Allow-Origin
如果资源来自其他域名（如 CDN 上的图片、字体、第三方 JS），默认只能拿到 name、startTime、duration 等基础字段，其余阶段时间全为 0。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
要解锁完整时序，必须由资源提供方在响应头中添加：
Timing-Allow-Origin: *
或者更安全的写法：
Timing-Allow-Origin: https://yourdomain.com
没有这个头，前端代码再怎么算差值也没用——因为原始数据就是空的。
Network 面板里看单个资源的 Timing 瀑布图最直观
Chrome 开发者工具的 Network 面板是验证和快速定位的首选：
- 刷新页面后，在 Network 列表中点击任一资源（如
app.js或logo.png） - 切换到下方的
Timing标签页，看瀑布图各色区块（DNS、Connection、SSL、Request、Response） - 右键表头 → 勾选
DNS Lookup、Connection Start、Waiting (TTFB)等列，让数值直接显示在表格里 - 按
Waterfall列排序，一眼揪出拖慢整体的长尾资源
这个视图不依赖代码执行时机，也不受跨域限制，是调试加载耗时的第一入口。但要注意：它只反映当前一次加载，而 performance.getEntriesByType 可用于自动化采集或上报。
最容易被忽略的是跨域资源的时间字段清零问题——很多人对着空值反复检查 JS 逻辑，却忘了去看响应头有没有 Timing-Allow-Origin。还有就是把 duration 当成 TTFB 或总链路耗时来用，结果优化方向完全跑偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
