By Zong

Contents
  1. 1. 什么是Navigation Timing
  2. 2. 浏览器访问http所经过的路径
  3. 3. 一个简单例子

什么是Navigation Timing

Navigation Timing是由w3c定义，记录浏览器与web服务通信过程中各个阶段耗时的一组时间变量。在支持JavaScript的浏览器上，使用特定的API能获取这些时间变量，从而掌握客户端与web服务之间的通信耗时，对前端优化特别是手机端有很大参考价值。

浏览器访问http所经过的路径

从浏览器点击一个链接或者打入一个网址开始，直到浏览器完整把网站内容加载出来为止，在这个过程中浏览器与互联网的交互时间都被记录在Navigation Timing这组变量上。
下图描述了这个路径和Navigation Timing对应的变量

timing attributes

一般访问web服务对客户端来说就有DNS、TCP、REQUEST、RESPONSE、渲染加载页面这些阶段。
由下面变量记录时间

  • navigationStart：当load/unload动作被触发时，也可能是提示关闭当前文档时（即回车键在url地址栏中按下，页面被再次刷新，submit按钮被点击）。如果当前窗口中没有前一个文档，那么navigationStart的值就是fetchStart。
  • redirectStart：它可能是页面重定向时的开始时间（如果存在重定向的话）或者是0。
  • redirectEnd：如果存在重定向的话，redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间。否则的话就是0。
  • fetchStart：fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存。
  • domainLookupStart：这个属性是指当浏览器开始检查当前域名的DNS之前的那一时刻。如果因为任何原因没有去检查DNS（即浏览器使用了缓存，持久连接，或者本地资源），那么它的值等同于fetchStart。
  • domainLookupEnd：指浏览器完成DNS检查时的时间。如果DNS没有被检查，那么它的值等同于fetchStart。
  • connectStart：当浏览器开始于服务器连接时的时间。如果资源取自缓存（或者服务器由于其他任何原因没有建立连接，例如持久连接），那么它的值等同于domainLookupEnd。
  • connectEnd：当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接它的值等同于domainLookupEnd。
  • secureConnectionStart：可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0。
  • requestStart：指客户端发送请求到服务器的时刻。
  • responseStart：指客户端收到从服务器端（或缓存、本地资源）响应回的第一个字节的数据的时刻。
  • responseEnd：指客户端收到从服务器端（或缓存、本地资源）响应回的最后一个字节的数据的时刻。
  • domLoading：指document对象创建完成的时刻。
  • domInteractive：指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。
  • domContentLoadedEventStart：当DOMContentLoaded事件触发之前，浏览器完成所有script（包括设置了defer属性但未设置async属性的script）的下载和解析之后的时刻。
  • domContentLoadedEventEnd：当DOMContentLoaded事件完成之后的时刻。它也是javascript类库中DOMready事件触发的时刻。
  • domComplete：如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，那么该时刻将会将document.readyState属性设置为”complete”，此时刻就是domComplete。
  • loadEventStart：该属性返回的是load事件刚刚发生的时刻，如果load事件还没有发生，则返回0。
  • loadEventEnd：该属性返回load事件完成之后的时刻。如果load事件未发生，则返回0。

一个简单例子

下面这个简单例子可以用来测试一下Navigation Timing API，一个简单html并计算出使用的DNS、TCP、请求等时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <script>
      function measureCRP() {
        var t = window.performance.timing,
		  preRequest = t.requestStart - t.navigationStart,
		  dnsTime = t.domainLookupEnd - t.domainLookupStart,
		  tcpTime = t.requestStart - t.connectStart,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;		  
        var stats = document.createElement('p');
        stats.textContent = '{ "interactive": ' + interactive + 
		    ', "dcl": ' + dcl + ', "complete": ' + complete + 
			', "preRequest": ' + preRequest + ', "dnsTime": ' + dnsTime +
			', "tcpTime": ' + tcpTime + '}';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="../img/author.jpg"></div>
  </body>
</html>

参考:
使用 Navigation Timing 评估关键呈现路径
Navigation Timing Level 2
7 天打造前端性能监控系统

Contents
  1. 1. 什么是Navigation Timing
  2. 2. 浏览器访问http所经过的路径
  3. 3. 一个简单例子