HTML中使用Performance API获取页面性能指标的方法

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《HTML中使用Performance API获取页面性能指标的方法》，涉及到，有需要的可以收藏一下

应确保在页面完成导航后调用，如在window.load事件或document.readyState为'complete'时；注意仅记录当前文档导航，避免在空白页测试，并确认类型名拼写正确。

performance.getEntriesByType('navigation') 返回空数组怎么办

说明：这是最常遇到的问题——调用 performance.getEntriesByType('navigation') 却拿不到任何数据，不是 API 失效，而是调用时机不对。

实操建议：

• 必须在页面完成导航后执行，比如在 window.addEventListener('load', ...) 或 document.readyState === 'complete' 之后；performance.getEntriesByType('navigation') 只记录当前文档的导航事件，刷新前就执行会返回空
• 不要在新打开的空白标签页（如 about:blank）里测试，它没有导航上下文
• 若仍为空，可先检查 performance.getEntries() 是否有内容，再确认类型名拼写（区分大小写，必须是 'navigation'，不是 'Navigation' 或 'nav'）

用 performance.timing 计算 DNS、TCP、首字节等耗时是否还可靠

说明：performance.timing 是旧接口，Chrome 120+ 已完全弃用，Firefox 和 Safari 也仅保留兼容性支持。直接读取它可能返回 0 或 undefined，尤其在 SPA 路由切换后。

实操建议：

• 改用 performance.getEntriesByType('navigation')[0] 获取第一个 navigation 条目，其字段如 domainLookupStart、connectEnd、responseStart 等语义一致，且为标准现代字段
• 注意这些字段值是相对于 performance.timeOrigin 的毫秒数，不是绝对时间戳，做减法即可得耗时
• 若需兼容 IE11 或极老环境才保留 performance.timing 回退逻辑，但生产环境应默认忽略

如何安全获取资源加载耗时（JS/CSS/图片）

说明：performance.getEntriesByType('resource') 看似简单，但容易漏掉动态插入的资源或跨域资源（因 CORS 限制，部分字段如 duration 可能被清零）。

实操建议：

• 优先在 load 事件后调用，确保所有初始资源已加载完成
• 对每个 entry 检查 entry.initiatorType（如 'script'、'img'、'css'）和 entry.duration > 0，过滤掉无效条目
• 跨域资源若未声明 crossorigin 属性，其 duration 会是 0，需前端统一加属性：