• Home
  • 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。

    • redirectStart和redirectEnd：如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点；

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

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

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

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

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

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

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

    • 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文档完全解析完毕的时间节点；

    • loadEventStart和loadEventEnd分别代表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

    收藏
    上一篇：Preload与Prefetch的区别以及webpack项目中如何优化
    下一篇：懒加载优化：JavaScript IntersectionObserver API监听元素是否可见
    延伸阅读：