• home > webfront > SGML > html5 >

    前端性能监控:window.performance 属性分析

    Author:zhoulujun Date:

    window performance是用来测量网页和web应用程序的性能,他提供一组精确的数据,通过一些简单的计算,就可以得出一些有关网页的性能数据。

    window.performance 是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持。

    memory

    memory是window.performance对象中一个重要的属性,他表示javascript对内存的占用。

    window.performance.memory;
    //memory对象格式
    memory:{
        jsHeapSizeLimit:1136000000,// 内存大小限制
        totalJSHeapSize:11200000,// 可使用的内存
        usedJSHeapSize:10000000 // JS 对象(包括V8引擎内部对象)占用的内存,一定小于 totalJSHeapSize
    }

    内存分析非常重要

    navigation

    navigation同样作为window.performance对象下的重要属性,他主要表示当前页面的进入方式,是重定向,正常进入,刷新进入还是回退进入。

    navigation字段统计的是一些网页导航相关的数据:

    1. redirectCount:重定向的数量(只读),但是这个接口有同源策略限制,即仅能检测同源的重定向;

    2. type 返回值应该是0,1,2 中的一个。分别对应三个枚举值:

      • 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式)

      • 1 : TYPE_RELOAD (用户通过刷新,包括JS调用刷新接口等方式访问页面)

      • 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

    最重要的是timing字段的统计数据,它包含了网络、解析等一系列的时间数据。

    timing API

    timing属性主要包括了浏览器从unload(卸载)之前的页面到新页面的load(加载完成)期间的一些列动作所消耗的时间

    timing的整体结构如下图所示:
    timing的整体结构

    timing各字段的含义如下:

    • startTime:有些浏览器实现为navigationStart,代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com,在地址栏输入google.com并回车,浏览器的执行动作依次为:unload当前文档(即baidu.com)->请求下一文档(即google.com)。navigationStart的值便是触发unload当前文档的时间节点。

      如果当前文档为空,则navigationStart的值等于fetchStart。

    • redirectStartredirectEnd:如果页面是由redirect而来,则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点;

    • unloadEventStartunloadEventEnd:如果前一个文档和请求的文档是同一个域的,则unloadEventStartunloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0;

    • fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间,浏览器会检查当前文档的缓存;

    • domainLookupStartdomainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询(比如使用了cache),则两者的值都等于fetchStart

    • connectStartconnectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如使用持久化连接webscoket),则两者都等于domainLookupEnd

    • secureConnectionStart:可选。如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0;

    • requestStart代表浏览器发起请求的时间节点,请求的方式可以是请求服务器、缓存、本地资源等;

    • responseStartresponseEnd分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;

    • domLoading代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性,domLoading的值就等于readyState改变为loading的时间节点;

    • domInteractive代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady,它早于DOMReady触发,代表html文档解析完毕(即dom tree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点;

    • domContentLoadedEventStart:代表DOMContentLoaded事件触发的时间节点:

      页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

    • domContentLoadedEventEnd:代表DOMContentLoaded事件完成的时间节点,此刻用户可以对页面进行操作,也就是jQuery中的domready时间;

    • domComplete:html文档完全解析完毕的时间节点;

    • loadEventStartloadEventEnd分别代表onload事件触发和结束的时间节点

    计算性能指标

    可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标,比如DNS查询耗时、白屏时间、domready等等。如下:

    • DNS查询耗时 = domainLookupEnd - domainLookupStart

    • TCP链接耗时 = connectEnd - connectStart

    • request请求耗时 = responseEnd - responseStart

    • 解析dom树耗时 = domComplete - domInteractive

    • 白屏时间 = responseStart - fetchStart

    • domready时间 = domContentLoadedEventEnd - fetchStart

    • onload时间 = loadEventEnd - fetchStart

    不可使用 Performance API 时,计算白屏时间

    <head>
      <meta charset="UTF-8">
      <title>白屏</title>
      <script type="text/javascript">
        // 不兼容performance.timing 的浏览器,如IE8
        window.pageStartTime = Date.now();
      </script>
      <!-- 页面 CSS 资源 -->
      <link rel="stylesheet" href="common.css">
    
      <script type="text/javascript">
        // 白屏时间结束点
        window.firstPaint = Date.now();
      </script>
    </head>


    Resource timing API

    Resource timing API是用来统计静态资源相关的时间信息,详细的内容请参考W3C Resource timing。这里我们只介绍performance.getEntries方法,它可以获取页面中每个静态资源的请求


    附上一段获取性能数据的代码

    var timing = window.performance.timing;
    //重定向耗时
    var redirectTime = timing.redirectEnd - timing.redirectStart;
    console.log('重定向耗时',redirectTime);
    //卸载上一个页面耗时
    var unloadTime = timing.unloadEventEnd - timing.unloadEventStart;
    console.log('卸载上一个页面耗时',unloadTime);
    //DNS查询耗时
    var domainTime = timing.domainLookUpEnd - timing.domainLookUpStart;
    console.log('DNS查询耗时',domainTime);
    //TCP连接耗时
    var tcpConnectTime = timing.connectEnd - timing.connectStart;
    console.log('TCP连接耗时',tcpConnectTime);
    //DOM开始加载前所花费时间
    var beforeDomLoadTime = timing.responseEnd - timing.navigationStart;
    console.log('DOM开始加载前所花费时间',beforeDomLoadTime);
    //请求耗时
    var responseTime = timing.responseEnd - timing.requestStart;
    console.log('请求耗时',responseTime);
    //DOM完成加载耗时
    var domLoadTime = timing.domCompelect - timing.domLoading;
    console.log('DOM完成加载耗时',domLoadTime);
    //DOM结构完成解析耗时
    var domComplieTime = timing.domInteractive - timing.domLoading ;
    console.log('DOM结构完成解析耗时',domComplieTime);
    //脚本加载时间
    var contentLoadTime = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
    console.log('脚本加载时间',contentLoadTime);
    //onload事件时间
    var loadTime = timing.loadEventEnd - timing.loadEventStart;
    console.log('onload事件时间',loadTime);
    //页面完全加载耗时
    var fullTime = redirectTime + unloadTime + domainTime + tcpConnectTime + responseTime+
      domLoadTime + domComplieTime ;

    在 HTTP 1.0/1.1 连接上,Chrome 会将每个主机强制设置为最多六个 TCP 连接。如果您一次请求十二个条目,前六个将开始,而后六个将被加入队列。最初的一半完成后,队列中的第一个条目将开始其请求流程。

    要为传统的 HTTP 1 流量解决此问题,您需要实现域分片。也就是在您的应用上设置多个子域,以便提供资源。然后,在子域之间平均分配正在提供的资源。

    在 HTTP 2 中,到服务器的单个 TCP 连接作为多路复用连接。这消除了 HTTP 1 中的六个连接限制,并且可以通过单个连接同时传输多个资源。


    本文内容来源:

    前端性能监控:window.performance https://www.cnblogs.com/libin-1/p/6501951.html

    window.performance 性能监控 https://juejin.im/post/5aed57e251882567382f7a92


    转载本站文章《前端性能监控:window.performance 属性分析》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/html5/2019_0919_8506.html

    延伸阅读: