如何使用JavaScript获取浏览器DOMContentLoadedTime值（Chrome事件触发后）

嘿，这个问题问得挺实用的！我来给你详细拆解清楚怎么获取这个时间，以及Chrome里的相关情况。

首先，现代浏览器（包括Chrome在内）都推荐用Performance Navigation Timing API来获取这类性能数据——毕竟旧的performance.timing接口已经被标准标记为废弃了，咱们尽量用更规范的新方法。

方法一：PerformanceNavigationTiming（推荐） #

通过这个API能直接拿到导航相关的性能条目，里面就包含了DOMContentLoaded的关键时间点：

// 获取页面导航的性能数据条目
const navigationEntry = performance.getEntriesByType('navigation')[0];
// 计算DOMContentLoaded完成的耗时（从浏览器开始请求资源到事件完成的时间差）
const domContentLoadedTime = navigationEntry.domContentLoadedEventEnd - navigationEntry.fetchStart;

console.log(`DOMContentLoaded完成耗时：${domContentLoadedTime}ms`);

简单解释下：domContentLoadedEventEnd是DOMContentLoaded事件完全执行完毕的时间戳，fetchStart是浏览器开始发起页面资源请求的时间戳，两者相减就是从加载开始到DOMContentLoaded完成的总耗时。

方法二：废弃的performance.timing（仅兼容旧环境） #

如果需要兼容一些比较老的浏览器，也可以用这个方法，但记住它已经不被推荐了：

const timingData = performance.timing;
const domContentLoadedTime = timingData.domContentLoadedEventEnd - timingData.fetchStart;

console.log(`DOMContentLoaded完成耗时：${domContentLoadedTime}ms`);

当然可以！DOMContentLoaded是页面加载流程里的一个固定节点，一旦这个事件触发完成，对应的时间数据就会被永久存在浏览器的Performance记录里——不管你之后触发什么事件（比如点击按钮、输入文本、执行脚本等），随时都能通过上面的代码获取到准确的数值。

给你举个实际的例子，比如加个按钮，点击后弹出这个时间：

<button id="showTimeBtn">点我看DOMContentLoaded耗时</button>

<script>
document.getElementById('showTimeBtn').addEventListener('click', () => {
  const navigationEntry = performance.getEntriesByType('navigation')[0];
  const domContentLoadedTime = navigationEntry.domContentLoadedEventEnd - navigationEntry.fetchStart;
  alert(`DOMContentLoaded耗时：${domContentLoadedTime}ms`);
});
</script>

哪怕页面加载完好几个小时了，你点击这个按钮，依然能拿到准确的耗时数据，完全不受后续事件的影响。

内容的提问来源于stack exchange，提问作者user3326775