一、属性的分解

feedcb786acd68f73b140cf6d838f02.png
memor：对内存的占用
navigation：网页导航相关数据
1、redirectCount：重定向的数量（只读），这个接口有同源策略限制，即仅能检测同源的重定向；
2、type：返回0,1,2
0：TYPE_NAVIGATE（用户通过常规导航方式访问页面，列如点一个链接、或者一般get方式）
1：TYPE_RELOAD（用户通过刷新，包括通过js调运接口方式访问页面）
2：TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

timing 整体结构如下
33872196-d6c35844-df50-11e7-8bcc-1fdcac66ce64.png

  • navigationStart：部分浏览器实现为startTime。代表浏览器开始unload前一个页面文档的开始时间节点，比如我们正在浏览器访问baidu.com ，在地址栏输入google.com地址并回车，浏览器的执行动作依次为：unload当前文档（即baidu.com）->请求下一文档（即google.com）navigationStart的值便是触发unload当前文档的时间节点；
  • 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连接（比如使用持久化链接websocket），这两个值都为domainLookupEnd；
  • secureConnectionStart：可选。如果页面使用HTTPS，它的值时安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如国该属性可用，但没有使用HTTPS，则返回0；
  • responseStart 和 responseEnd：分别代表浏览器收到服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时间；
  • domLoading：代表浏览器开始解析html文档的时间节点。IE浏览器下的document有readyStart属性，domLoading的值就等于readyStart改变为loading的时间节点；
  • domInteractive：代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady,，它早于DOMReady触发，代表htm文档解析完毕（dom tree创建完成）但是内嵌资源（外链css、js）还未加载的时间点
  • domContentLoadedEventStart：代表DOMContentLoaded事件触发时间节点；
  • domContentLoadedEventEnd：代表DOMContentLoaded事件完成的时间节点，此时用户可以对页面操作了
  • domComplete：html文档完全解析完毕的时间节点
  • loadEventStart 和 loadEventEnd：分别代表onload事件触发和结束的时间节点；
  • 检测网络带宽 navigator.connection.downlink * 1024 /8 // KB/s

使用该api时需要在页面完全加载完成之后才能使用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出**

需要再页面onload之后才能获取到的时间节点
domInteractive
** domContentLoadedEventEnd
** loadEventEnd
loadEventStart
performance.getEntries()
**

二、计算性能指标

performance.timing
1、区间阶段耗时
DNS 解析耗时 = domainLookupEnd - domainLookupStart
 TCP 链接耗时 = connectEnd - connectStart
SSL 安全连接耗时 = **connectEnd- **secureConnectionStart
TTFB 网络请求耗时 = responseStart- requestStart
数据传输耗时 = responseEnd- responseStart
DOM 解析耗时 = domInteractive- responseEnd （**需在onload之后）
资源加载耗时 = loadEventStart- domContentLoadedEventEnd **（需在onload之后）
2、关键性能指标
首包时间 = responseStart- domainLookupStart** 白屏时间 = responseEnd- fetchStart
首次可交互时间 = domInteractive- fetchStart （需在onload之后）
HTML加载完成时间 = domContentLoadedEventEnd- fetchStart （需在onload之后）
页面完全加载时间 = loadEventEnd- fetchStart **（需在onload之后）

performance.getEntries()
返回所有静态资源信息（如下图），返回类型为数组。initiatorType为资源类型，durtaion为请求时间

625e76211030ddfcf86bbad6f233dfc.png

  1. // 标记一个开始点
  2.   const performance = window.performance;
  3.   const navigator = window.navigator;
  5.   // 操作系统
  6.   const os = navigator.userAgent.split("(")[1].split(";")[0];
  7.   const navigationType = ["导航方式", "刷新", "后退按钮"];
  9.   // 根据名称生成高精度时间戳（打点）
  10.   performance.mark("loading-start");
  12.   // 以下时间节点以及性能计算不需要在onload时获取
  13.   const {
  14.     domainLookupStart,
  15.     // 请求连接被发送到网络时的时间戳
  16.     connectStart,
  17.     // 网络建立的时间节点
  18.     connectEnd,
  19.     secureConnectionStart,
  20.     responseEnd,
  21.     responseStart,
  22.     requestStart,
  23.     fetchStart,
  24.     domainLookupEnd,
  25.     // 加载页面的起始时间
  26.     navigationStart,
  27.     domComplete,
  28.     redirectStart,
  29.     redirectEnd,
  30.   } = performance.timing;
  32.   const {
  33.     // 返回地理定位信息
  34.     geolocation,
  35.     // 是否连接互联网，true未断网
  36.     onLine,
  37.     // 所在平台，返回win32
  38.     platform,
  39.     // 网络情况
  40.     connection,
  41.   } = navigator;
  43.   const {
  44.     totalJSHeapSize,
  45.     usedJSHeapSize
  46.   } = performance.memory;
  48.   let info = {
  49.     // 内存占用情况 
  50.     memory: performance.memory,
  52.     // 重定向耗时 
  53.     Redirect: redirectEnd - redirectStart,
  55.     // DNS查找耗时 
  56.     DNSLookup: domainLookupEnd - domainLookupStart,
  58.     // SSL 安全连接耗时
  59.     ssl: connectEnd - secureConnectionStart,
  61.     // TCP链接耗时 
  62.     TCPLink: connectEnd - connectStart,
  64.     // Time to First Byte（TTFB）
  65.     // 网络请求耗时 TTFB 有多种计算方式，ARMS 以 Google Development 定义为准
  66.     ttfb: responseStart - requestStart,
  68.     // 数据传输耗时
  69.     HTTPResponse: responseEnd - responseStart,
  71.     // 白屏耗时 
  72.     WhiteScreen: responseStart - navigationStart,
  74.     // 2.关键性能指标
  75.     // 首包时间
  76.     Firstbyte: responseStart - domainLookupStart,
  78.     // First Paint Time, 首次渲染时间 / 白屏时间
  79.     FPT: responseEnd - fetchStart,
  81.     //页面的来源信息 
  82.     navigation: performance.navigation,
  83.     // 表示网页的加载来源，
  84.     type: navigationType[performance.navigation.type] || "其他来源",
  85.     // http请求抓取文档之时的时间戳
  86.     fetchStart,
  88.     // 如果大于0，表示有可能出现了内存泄漏
  89.     JSHeapSize: usedJSHeapSize - totalJSHeapSize, // 使用过的堆栈内存 - js堆栈内存总大小
  91.     os,
  92.     geolocation,
  93.     onLine,
  94.     platform,
  95.     connection
  96.   };
  98.   window.onload = function () {
  99.     // 以下时间节点以及性能计算需要在onload时获取
  100.     const {
  101.       domInteractive,
  102.       domContentLoadedEventEnd,
  103.       loadEventEnd,
  104.       loadEventStart,
  105.     } = performance.timing;
  106.     // console.log(loadEventEnd , fetchStart) 这里loadEventEnd获取一直为0，待解决
  108.     let info = {
  109.       // dom树解析耗时 
  110.       DOMParse: domInteractive - responseEnd,
  112.       // HTML 加载完成时间， 即 DOM Ready 耗时
  113.       DOMready: domContentLoadedEventEnd - fetchStart,
  115.       // 资源加载耗时
  116.       res: loadEventStart - domContentLoadedEventEnd,
  118.       // onload耗时 
  119.       // Loaded: loadEventEnd - fetchStart,这里loadEventEnd获取一直为0，待解决
  121.       // Time to Interact，首次可交互时间
  122.       TTI: domInteractive - fetchStart,
  124.       // 资源测速 
  125.       duration: performance.getEntries(),
  126.     };
  128.     let time = 0;
  129.     let result = [];
  130.     let duration = info.duration;
  131.     if (duration) {
  132.       duration.map((item) => {
  133.         result.push({
  134.           '资源名称': item.name,
  135.           '资源类型': item.entryType,
  136.           '谁发起的请求': item.initiatorType,
  137.           '加载时间': item.duration
  138.         });
  139.         if (item.entryType == "resource") {
  140.           // 加载静态资源总耗时
  141.           time += item.duration;
  142.         }
  143.       });
  144.       console.table(result);
  145.       console.log("加载静态资源总耗时", time);
  146.     } else {
  147.       console.log("不支持");
  148.     }
  150.     // 标记一个结束点 
  151.     performance.mark("loading-end");
  152.     // 标记指定开始点和结束点之间的时间戳（连线）
  153.     performance.measure(
  154.       "loading",
  155.       "loading-start",
  156.       "loading-end"
  157.     );
  159.     // 获取所有名称为loading的measures 
  160.     var measures = performance.getEntriesByName("loading");
  161.     var measure = measures[0];
  162.     console.log("loading time:", measure.duration);
  163.     console.log(info)
  164.     // 获取之后清除标记 
  165.     performance.clearMarks();
  166.     performance.clearMeasures();
  167.   };
  169.   // 获取IP地址
  170.   function getIPs(callback) {
  171.     // var ip_dups = {};
  172.     //兼容firefox chrome
  173.     var RTCPeerConnection = window.RTCPeerConnection ||
  174.       window.mozRTCPeerConnection ||
  175.       window.webkitRTCPeerConnection;
  177.     if (!RTCPeerConnection) {
  178.       var iframe = document.createElement('iframe');
  179.       iframe.sandbox = 'allow-same-origin';
  180.       iframe.style.display = 'none';
  181.       document.body.appendChild(iframe);
  182.       var win = iframe.contentWindow;
  183.       window.RTCPeerConnection = win.RTCPeerConnection;
  184.       window.mozRTCPeerConnection = win.mozRTCPeerConnection;
  185.       window.webkitRTCPeerConnection = win.webkitRTCPeerConnection;
  186.       RTCPeerConnection = window.RTCPeerConnection ||
  187.         window.mozRTCPeerConnection ||
  188.         window.webkitRTCPeerConnection;
  189.     }
  191.     let pc = new RTCPeerConnection({
  192.       iceServers: [{
  193.         urls: "stun:stun.services.mozilla.com"
  194.       }]
  195.     });
  196.     let noop = () => {};
  197.     let localIPs = {};
  198.     let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
  199.     let iterateIP = (ip) => {
  200.       if (!localIPs[ip]) callback(ip);
  201.       localIPs[ip] = true;
  202.     };
  203.     pc.createDataChannel('');
  204.     pc.createOffer().then((sdp) => {
  205.       sdp.sdp.split('\n').forEach(function (line) {
  206.         if (line.indexOf('candidate') < 0) return;
  207.         line.match(ipRegex).forEach(iterateIP);
  208.       });
  209.       pc.setLocalDescription(sdp, noop, noop);
  210.     }).catch((reason) => {
  211.       console.log(reason);
  212.     });
  213.     pc.onicecandidate = (ice) => {
  214.       if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
  215.       ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
  216.     };
  218.   }
  219.   getIPs((ip) => {
  220.     console.log(ip);
  221.   });