美文网首页
window.performance

window.performance

作者: 瓢鳍小虾虎 | 来源:发表于2021-10-08 14:56 被阅读0次

    主要利用performance.timing的各个属性评估性能:
    属性比较多,可以这样归类:

    网络相关

    1. fetch开头的字段(缓存检查)
    2. domain开头的字段(dns请求)
    3. conect开头的字段(TCP建立连接)
    4. request/response开头的字段(http请求和响应)

    dom加载相关:dom开头的字段

    onload事件相关:load开头的字段

    常用性能指标计算公式

    DNS查询耗时 = domainLookupEnd - domainLookupStart
    TCP链接耗时 = connectEnd - connectStart
    request请求耗时 = responseEnd - responseStart
    解析dom树耗时 = domComplete - domInteractive
    白屏时间 = domloadng - fetchStart
    domready时间 = domContentLoadedEventEnd - fetchStart
    onload时间 = loadEventEnd - fetchStart


    静态资源统计apiperformance.getEntries() 返回一个数组,包含所有js、css、img等静态资源加载的数据。常用的属性duration表示加载时长。

    其他的不怎么常用的就看文档好了~

    MDN文档
    使用performance监控前端性能

    相关文章

      网友评论

          本文标题:window.performance

          本文链接:https://www.haomeiwen.com/subject/pdrxoltx.html