用PerformanceTiming来检测页面机能

2024年5月20日 118次阅读 来源: 答案在风中飘着

window.performance.timing下的属性

navigationStart

当前浏览器窗口的前一个网页封闭，发作unload事宜时的Unix毫秒时候戳。假如没有前一个网页，则即是fetchStart属性。

unloadEventStart

假如前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事宜发作时的Unix毫秒时候戳。假如没有前一个网页，或许之前的网页跳转不是在同一个域名内，则返回值为0;

unloadEventEnd

假如前一个网页与当前网页属于同一个域名，则返回前一个网页unload事宜的回调函数终了时的Unix毫秒时候戳。假如没有前一个网页，或许之前的网页跳转不是在同一个域名内，则返回值为0。

redirectStart

返回第一个HTTP跳转最先时的Unix毫秒时候戳。假如没有跳转，或许不是同一个域名内部的跳转，则返回值为0。

redirectEnd

返回末了一个HTTP跳转终了时（即跳转回应的末了一个字节吸收完成时）的Unix毫秒时候戳。假如没有跳转，或许不是同一个域名内部的跳转，则返回值为0。

fetchStart

返回浏览器预备运用HTTP请求读取文档时的Unix毫秒时候戳。该事宜在网页查询当地缓存之前发作。

domainLookupStart

返回域名查询最先时的Unix毫秒时候戳。假如运用耐久衔接，或许信息是从当地缓存猎取的，则返回值等同于fetchStart属性的值。

domainLookupEnd

回域名查询终了时的Unix毫秒时候戳。假如运用耐久衔接，或许信息是从当地缓存猎取的，则返回值等同于fetchStart属性的值。

connectStart

返回HTTP请求最先向服务器发送时的Unix毫秒时候戳。假如运用耐久衔接（persistent connection），则返回值等同于fetchStart属性的值。

connectEnd

返回浏览器与服务器之间的衔接竖立时的Unix毫秒时候戳。假如竖立的是耐久衔接，则返回值等同于fetchStart属性的值。衔接竖立指的是一切握手和认证历程悉数终了

secureConnectionStart

返回浏览器与服务器最先平安链接的握手时的Unix毫秒时候戳。假如当前网页不请求平安衔接，则返回0。

requestStart

返回浏览器向服务器发出HTTP请求时（或最先读取当地缓存时）的Unix毫秒时候戳。

responseStart

返回浏览器从服务器收到（或从当地缓存读取）末了一个字节时（假如在此之前HTTP衔接已封闭，则返回封闭时）的Unix毫秒时候戳

domLoading

返回当前网页DOM构造最先剖析时（即Document.readyState属性变成“loading”、响应的readystatechange事宜触发时）的Unix毫秒时候戳。

domInteractive

返回当前网页DOM构造终了剖析、最先加载内嵌资本时（即Document.readyState属性变成“interactive”、响应的readystatechange事宜触发时）的Unix毫秒时候戳。

domContentLoadedEventStart

返回当前网页DOMContentLoaded事宜发作时（即DOM构造剖析终了、一切剧本最先运转时）的Unix毫秒时候戳。

domContentLoadedEventEnd

返回当前网页一切须要实行的剧本实行完成时的Unix毫秒时候戳。

domComplete

返回当前网页DOM构造天生时（即Document.readyState属性变成“complete”，以及响应的readystatechange事宜发作时）的Unix毫秒时候戳。

loadEventStart

返回当前网页load事宜的回调函数最先时的Unix毫秒时候戳。假如该事宜还没有发作，返回0。

loadEventEnd

返回当前网页load事宜的回调函数运转终了时的Unix毫秒时候戳。假如该事宜还没有发作，返回0。

怎样剖析页面团体加载速率

平常页面统计所须要的参数（dom剖析时候，domContentLoaded时候，onload时候， 白屏时候，getStyleConfig接口返回时候 – 预备加载新页面的肇端时候）

        let pt = window.performance.timing;  
        /* dom剖析时候 
         *
         *
         *1.domComplete  
         *当前网页DOM构造天生时（即Document.readyState属性变成“complete”，以及响应的
         *readystatechange事宜发作时）的Unix毫秒时候戳
         *
         *2.domInteractive 
         *当前网页DOM构造终了剖析、最先加载内嵌资本时
         *即Document.readyState属性变成“interactive”、响应的readystatechange事宜触发时
         *的Unix毫秒时候戳。
         */
        let domComplete = pt.domComplete - pt.domInteractive;
        /* domContentLoaded时候
         *
         *
         *当前网页DOM构造天生时（即Document.readyState属性变成“complete”，以及响应的
         *1.domContentLoadedEventEnd  
         *网页DOMContentLoaded事宜发作时（即DOM构造剖析终了、一切剧本最先运转时）的Unix毫秒时候
         *戳。
         *
         *2.navigationStart 
         *当前浏览器窗口的前一个网页封闭，发作unload事宜时的Unix毫秒时候戳。
         *假如没有前一个网页，则即是fetchStart属性
         */
         let domLoaded = pt.domContentLoadedEventEnd - pt.navigationStart;
        /* onload时候
         *1.loadEventEnd
         *当前网页load事宜的回调函数运转终了时的Unix毫秒时候戳。假如该事宜还没有发作，返回0。
         */
        let onload = pt.loadEventEnd - pt.navigationStart;
        // 白屏时候，getStyleConfig接口返回时候 - 预备加载新页面的肇端时候
        let white = window.dbStyleConfigEnd ? window.dbStyleConfigEnd - pt.navigationStart : '';
        let dbStyle = window.dbStyleConfigEnd - window.dbStyleConfigStart;
        let url = `/statistics/activityPagePerf?hdType=${CFG.appName}&oaId=${CFG.actId}&domComplete=${domComplete}&domLoaded=${domLoaded}&onload=${onload}&white=${white}&dbStyle=${dbStyle}`;

  1. 主如果检察目标值PAGET_页面加载时候,此目标指的是页面团体加载时候但不含(onload事宜和redirect), 此目标值可直接回响反映用户体验, 从此项目标能够晓得指定某时候段的页面加载速率值,以及和天,周,月的对照状态.

  2. 也能够查询目标ALLT_页面完整加载时候, 能够查询到从浏览器最先导航(用户点击链接或在地址栏输入url或点革新,退却按钮)到页面onload 事宜js完整跑完的一切时候.

假如发明页面加载速率有增添或削减,则能够分项查询前面的每一个目标值,总的来说他们的关联以下:

1.dom最先加载前一切消费时候=重定向时候+域名剖析时候+竖立衔接消费时候+请求消费时候+吸收数据消费时候

2.pageLoadTime页面加载时候=域名剖析时候+竖立衔接消费时候+请求消费时候+吸收数据消费时候+剖析dom消费时候+加载dom消费时候

3.allLoadTime页面完整加载时候=重定向时候+域名剖析时候+竖立衔接消费时候+请求消费时候+吸收数据消费时候+剖析dom消费时候+加载dom消费时候+实行onload事宜消费时候

4.resourcesLoadedTime资本加载时候=剖析dom消费时候+加载dom消费时候

    原文作者：答案在风中飘着
    原文地址: https://segmentfault.com/a/1190000009847155
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞