127 、performance性能测试

Perform作为前端工程师,无论是业务需要还是我们对于自己开发的Web站点的要求,往往都有性能监测以及数据上报的需求。而Performance API除了简单易用对前端工程师极其友好的特点之外,还有能提供高精确度的时间测量(千分之一毫秒)这个特点。

window.onload = function(){
    setTimeout(function(){
        let t = performance.timing
        console.log('DNS查询耗时 :' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
        console.log('TCP链接耗时 :' + (t.connectEnd - t.connectStart).toFixed(0))
        console.log('request请求耗时 :' + (t.responseEnd - t.responseStart).toFixed(0))
        console.log('解析dom树耗时 :' + (t.domComplete - t.domInteractive).toFixed(0))
        console.log('白屏时间 :' + (t.responseStart - t.navigationStart).toFixed(0))
        console.log('domready时间 :' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
        console.log('onload时间 :' + (t.loadEventEnd - t.navigationStart).toFixed(0))

        if(t = performance.memory){
            console.log('js内存使用占比 :' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
        }
    })
}

一,performance中会出现的属性字段:

memory:只有在chrome才有,提供了基本内存的使用情况

navigation:提供了操作的上下文,包括页面的加载,刷新,重定向次数等等

timing:提供了浏览器上下文事件结束的各种UNIX时间戳(当前的时间ms,不是时间段)

127 、performance性能测试

方法字段:

performance.getEntries() /:对网页发起的所有HTTP请求耗时信息统计(时间段 ms)

127 、performance性能测试

二,memory属性

jsHeapSizeLimit:内存大小限制

totalJSHeapSize:可使用的内存大小

usedJSHeapSize:JS对象(包括V8引擎内部对象)占用的内存

三,navigation属性

redirectCount:重定向次数到本页面

type:0 正常页面(非刷新,重定向)1 通过刷新进入 2 通过浏览器前进后退按钮进入

          255 非以上方式进入

四,timing属性

connectStart:HTTP域名解析完成的时间

connectEnd:HTTP浏览器与服务器之间连接建立完成的时间

domComplete:DOM文档解析完成,readyState变为complete

domContentLoadedEventStart:所有脚本已经执行完,开始执行DOMContentLoaded方法

domContentLoadedEventEnd:执行DOMContentLoaded方法结束

domInteractive:DOM结构加载结束,开始加载内嵌资源,readyState变为interactive

domLoading:DOM结构开始解析,readyState开始是loading

domainLookupStart:DNS域名查询开始

domainLookupEnd:DNS域名查询结束

fetchStart:浏览器发起任何请求之前的时间戳

loadEventStart:开始加载load事件

loadEventEnd:load事件加载结束

navigationStart:unload上一个文档的时间节点

redirectStart:第一个页面重定向开始的时间

redirectEnd:最后一个页面重定向结束的时间

requestStart:浏览器向服务器发起HTTP请求(包含缓存,本地资源)

responseStart:浏览器从服务器收到HTTP请求返回的第一个字节的时间

responseEnd:浏览器从服务器收到HTTP请求返回的最后一个字节的时间

secureConnectionStart:HTTPS协议握手之前的时间,如果非HTTPS,则为0

unloadEventStart:上一个文档unload事件的开始时间(需要是同源文档,否则为0)

unloadEventEnd:上一个文档unload事件的结束时间(需要是同源文档,否则为0)

五,时间应用

页面加载耗时:loadEventEnd - navigationStart

DNS查询耗时:domainLookupEnd - domainLookupStart

TCP链接完成握手耗时:connectEnd - connectStart

request请求耗时:responseEnd - responseStart

解析DOM树耗时:domComplete - domInteractive

白屏时间:domloading - fetchStart

DOMReady可操作时间:domContentLoadedEventEnd - fetchStart

onload总下载时间:loadEventEnd - fetchStart

重定向时间:redirectEnd - redirectStart

六,performance通用方法

performance.now()

根据navigation属性,开始计算毫秒数,通过两次时间相减可以计算某个操作的间隔时间

performance.mark(name)

基于name在浏览器的性能输入缓冲区中存入一个timestamp,可以多次重复录入,

可以使用performance.getEntriesByName()获取到对应的Array,

可以使用performance.clearMarks()清除

七,最后是时间关系图(W3C)

127 、performance性能测试

参考:Performance_js中计算网站性能监控利器_p312011150的博客-CSDN博客

Performance --- 前端性能监控 - 简书

上一篇:Multiple SSH Keys settings for different github account


下一篇:2021-09-05