js收集页面加载性能数据

最新推荐文章于 2022-09-22 20:14:30 发布

原创最新推荐文章于 2022-09-22 20:14:30 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

AnguleJS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了JavaScript中的window.performance对象，通过该对象可以获取页面加载性能数据，包括navigationStart、unloadEventStart、redirectStart等多个关键指标，帮助开发者了解页面从开始加载到完全展示的各个阶段耗时情况，从而优化页面性能。

window.performance

[performance.timing]:

navigationStart: 表示从上一个文档卸载结束时的 unix 时间戳，如果没有上一个文档，这个值将和 fetchStart 相等。
unloadEventStart: 表示前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0。
unloadEventEnd: 返回前一个页面 unload 时间绑定的回掉函数执行完毕的时间戳。
redirectStart: 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0。
redirectEnd: 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0。
fetchStart: 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前。
domainLookupStart/domainLookupEnd: DNS 域名查询开始/结束的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
connectStart: HTTP（TCP）开始/重新建立连接的时间，如果是持久连接，则与 fetchStart 值相等。
connectEnd: HTTP（TCP）完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等。
secureConnectionStart: HTTPS 连接开始的时间，如果不是安全连接，则值为 0。
requestStart: HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存。
responseStart: HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存。
responseEnd: HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存。
domLoading: 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件。
domInteractive: 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件，注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源。
domContentLoadedEventStart: DOM 解析完成后，网页内资源加载开始的时间，在 DOMContentLoaded 事件抛出前发生。
domContentLoadedEventEnd: DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）。
domComplete: DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件。
loadEventStart: load 事件发送给文档，也即 load 回调函数开始执行的时间。
loadEventEnd: load 事件的回调函数执行完毕的时间。

;(function() {
    if (window.performance) {
        const info = window.performance.timing;
        const details = [
            {
                title: '网页重定向的耗时',
                value: info.redirectEnd - info.redirectStart + 'ms'
            },
            {
                title: '检查本地缓存的耗时',
                value: info.domainLookupStart - info.fetchStart + 'ms'
            },
            {
                title: 'DNS查询的耗时',
                value: info.domainLookupEnd - info.domainLookupStart + 'ms'
            },
            {
                title: 'TCP连接的耗时',
                value: info.connectEnd - info.connectStart + 'ms'
            },
            {
                title: '客户端发起请求的耗时',
                value: info.responseStart - info.requestStart + 'ms'
            },
            {
                title: '服务端响应的耗时',
                value: info.responseEnd - info.responseStart + 'ms'
            },
            {
                title: '渲染页面的耗时',
                value: info.domComplete - info.responseEnd + 'ms'
            },
            {
                title: '解析DOM树耗时',
                value: info.domComplete - info.domInteractive + 'ms'
            },
            {
                title: '白屏时间',
                value: info.domLoading - info.fetchStart + 'ms'
            },
            {
                title: 'DOMContentLoaded',
                value: info.domContentLoadedEventEnd - info.fetchStart + 'ms'
            },
            {
                title: 'Loaded',
                value: info.loadEventEnd - info.connectStart + 'ms'
            }
        ];

        console.log(details);
    }
}())