如何在HTML页脚准确显示页面加载时长？寻求现代JS方案

问题原因 #

你当前代码里的loadStart是脚本在<head>中执行的时间，这个时间点晚于浏览器实际启动页面加载的时刻（比如DNS解析、请求发送等前期阶段已经完成）。而浏览器开发者工具展示的加载时长，是从页面导航启动的瞬间（即浏览器开始处理页面请求的时刻）到load事件完全触发完成的时间，两者的起始时间基准不同，所以数值自然不一致。

现代实现方案 #

推荐使用标准的Performance Navigation Timing API（Navigation Timing Level 2），它能精准获取浏览器记录的全页面生命周期时间戳，计算结果和浏览器展示的加载时长完全匹配。

方案一：推荐的现代写法 #

(() => {
    window.addEventListener('load', () => {
        // 获取当前页面的导航性能数据条目
        const navigationEntry = performance.getEntriesByType('navigation')[0];
        // 计算从导航开始到load事件结束的时长
        const loadDuration = (navigationEntry.loadEventEnd - navigationEntry.navigationStart) / 1000;
        const timeElement = document.querySelector('#timestamp');
        // 用textContent更安全，避免XSS风险
        timeElement.textContent = `Page load time: ${loadDuration.toFixed(2)} sec`;
    });
})();

关键参数说明 #

• navigationEntry.navigationStart：浏览器开始处理当前页面导航的时间点，和浏览器开发者工具的加载起始时间完全一致
• navigationEntry.loadEventEnd：页面load事件所有回调执行完成的时间点
• toFixed(2)：将时长保留两位小数，提升可读性

兼容旧浏览器的备选方案（不推荐，API已废弃） #

如果需要兼容较旧的浏览器，可以使用已标记为废弃但仍被多数浏览器支持的performance.timing：

(() => {
    window.addEventListener('load', () => {
        const timingData = performance.timing;
        const loadDuration = (timingData.loadEventEnd - timingData.navigationStart) / 1000;
        const timeElement = document.querySelector('#timestamp');
        timeElement.textContent = `Page load time: ${loadDuration.toFixed(2)} sec`;
    });
})();

额外优化建议 #

• 无需在<head>中提前记录时间，Performance API已经完整记录了所有关键阶段的时间戳
• 优先使用textContent而非innerHTML，避免不必要的HTML解析和XSS安全风险

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