一、纯前端时间戳
在 <head> 里面记录一个时间戳，在文档底部用 onload 记录结束时间戳。
<!--头部-->
<head>
<script>
const start = Date.now()
</script>
</head>
<!--底部-->
<script>
window.onload = () => {
const end = Date.now()
console.log(`消耗了 ${end - start} ms`)
}
</script>
缺点
文档加载之前的时间被忽略了，比如建立连接、网络延迟、解析数据的时间。
二、配合后端
可以记录到从后端建立连接到文档加载完成之后的时间。
缺点
存在前后端时间不一致的问题，增加后端工作量，从页面开始到访问到后端资源的这段时间依旧被忽略了。
三、配合 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+ 支持。
网友评论