html窗口载入完成时间,如何记录页面加载时间

一、纯前端时间戳

在

里面记录一个时间戳，在文档底部用 onload 记录结束时间戳。

const start = Date.now()

window.onload = () => {

const end = Date.now()

console.log(`消耗了 ${end - start} ms`)

}

缺点

文档加载之前的时间被忽略了，比如建立连接、网络延迟、解析数据的时间。

二、配合后端

可以记录到从后端建立连接到文档加载完成之后的时间。

缺点

存在前后端时间不一致的问题，增加后端工作量，从页面开始到访问到后端资源的这段时间依旧被忽略了。

三、配合 HTML5 中的 PerformanceTiming.navigationStart

PerformanceTiming.navigationStart 是一个返回代表一个时刻的 unsigned long long 型只读属性，为紧接着在相同的浏览环境下卸载前一个文档结束之时的 Unix毫秒时间戳。如果没有上一个文档，则它的值相当于 PerformanceTiming.fetchStart MDN。

window.onload = () => {

const load = Date.now() - performance.timing.navigationStart

console.log(`消耗了 ${load} ms`)

}

缺点

存在兼容性问题，因为是 HTML5 新特性，目前只有 IE9+ 支持。