如何记录页面加载时间

一、纯前端时间戳

<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+ 支持。

发表评论

电子邮件地址不会被公开。 必填项已用*标注