常用性能测量APIs

刺骨的言语ヽ痛彻心扉 2022-10-11 13:42 117阅读 0赞

我们可以将一些性能统计的测量指标，计算后发给服务端用于分析。这里以`Time to Interacrtive(可交互时间)`为例：

methods: { 
      gettTime () { 
        // Time to Interacrtive 可交互时间
        let timing = performance.getEntriesByType('navigation')[0]
        let tti = timing.domInteractive - timing.fetchStart
        console.log('TTI: ' + tti)
      }
    },
    created () { 
      this.gettTime()
    }

打印结果如下：  
![在这里插入图片描述][2021070109055191.png]  
这里也列出一些常用的测试指标，有兴趣的同学可以自己尝试

*  DNS 解析耗时: domainLookupEnd - domainLookupStart
 *  TCP 连接耗时: connectEnd - connectStart
 *  SSL 安全连接耗时: connectEnd - secureConnectionStart
 *  网络请求耗时 (TTFB): responseStart - requestStart
 *  数据传输耗时: responseEnd - responseStart
 *  DOM 解析耗时: domInteractive - responseEnd
 *  资源加载耗时: loadEventStart - domContentLoadedEventEnd
 *  First Byte时间: responseStart - domainLookupStart
 *  白屏时间: responseEnd - fetchStart
 *  首次可交互时间: domInteractive - fetchStart
 *  DOM Ready 时间: domContentLoadEventEnd - fetchStart
 *  页面完全加载时间: loadEventStart - fetchStart
 *  http 头部大小： transferSize - encodedBodySize
 *  重定向次数：performance.navigation.redirectCount
 *  重定向耗时: redirectEnd - redirectStart

我们也可以使用`观察者`对服务进行一些监控，这里以`longtask(长任务)`为例：  
我们写死一个1.5s任务，使用observer监控所有`longtask`

methods: { 
      observe () { 
        const observer = new PerformanceObserver((list) => { 
          for (const entry of list.getEntries()) { 
            console.log(entry)
          }
        })
    
        observer.observe({ entryTypes: ['longtask']})
      },
      calculatePi (duration) { 
        const start = new Date().getTime()
        while (new Date().getTime() < start + duration) { 
          // do something
        }
      }
    },
    created () { 
      this.observe()
      this.calculatePi(1500)
    }

可以看到`calculatePi()`的执行有被监测到  
![在这里插入图片描述][20210701091250467.png]  
在Chrome 89版本，支持 “element”, “event”, “first-input”, “largest-contentful-paint”, “layout-shift”, “longtask”, “mark”, “measure”, “navigation”, “paint”, "resource"等事件，更多细节请参考[PerformanceObserver()][PerformanceObserver]

[2021070109055191.png]: /images/20221005/befd744fa9274d89a3728082dc04d8e3.png
[20210701091250467.png]: /images/20221005/14fc76c1301540879bfe5a5935771566.png
[PerformanceObserver]: https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/PerformanceObserver