时间的采集

w3c指定的 perforamnce API获取页面性能数据

对应的时间所在的示意图

其中的含义如下

属性名称	描述
navigationStart	页面导航开始时间
unloadEventStart	前一个页面unload事件抛出时的时间戳,如果没有上一个页面, 或者上个页面不同源则会直接设置为0
unloadEventEnd	unload事件处理完成的时间戳,同上
redirectStart	第一个HTTP重定向开始时的时间戳，没有重定向或者重定向中的不同源，这个值会是0
redirectEnd	最后一个HTTP重定向开始时的时间戳，没有重定向或者重定向中的不同源，这个值会是0
fetchStart	浏览器准备发起HTTP请求的时间
domainLookupStart	域名查询开始时间戳，如果使用了持续连接或者缓存，则与fetchStart一致
domainLookupEnd	域名查询结束时间戳，如果使用了持续连接或者缓存，则与fetchStart一致
connectStart	HTTP请求开始发送时间戳，如果使用了持续连接，则与fetchStart一致
connectEnd	浏览器与服务端之间连接建立( 所有握手和认证过程全部结束 )时间戳，如果使用了持续连接，则与fetchStart一致
secureConnectionStart	浏览器与服务端开始安全链接握手时间戳，如果当前网页不需要安全连接，这个值会是0
requestStart	浏览器开始向服务端发出请求时间戳
responseStart	浏览器接收到( 或从本地缓存读取)第一个字节时间戳
responseEnd	浏览器从服务端收到( 或从本地缓存读取 )最后一个字节时( 如果在此之前HTTP连接已经关闭，则返回关闭的 )时间戳
domLoading	网页DOM结构开始解析时间戳
domInteractive	网页DOM结构解析完成, 开始加载内嵌资源时的时间戳
domContentLoadedEventStart	需要被执行的脚本已经被解析的时间戳
domContentLoadedEventEnd	需要立即执行的脚本已经被执行的时间戳
domComplete	文档解析完成的时间戳
loadEventStartload	事件被发送时的时间戳，如果这个事件还未被发送，它的值将会是0
loadEventEnd	load事件结束时的时间戳，如果这个事件还未被发送，它的值将会是0

资源耗时

使用方式

window.performance.getEntriesByType("resource")

对应的时间示意图

增加的属性如下,其它属性含义可以参考页面属性含义

属性名称	描述
transferSize	交换的数据大小
encodedBodySize	编码的响应体大小
decodedBodySize	解码后的响应体大小

使用 Performace API

可以使用Performance API进行更加定制化的打点记录
例如使用getEntriesByType来获取特定资源的信息
资源的类型有以下几种

Value	Subtype	Type of name property	Description of name property
frame, navigation	PerformanceFrameTiming (en-US), PerformanceNavigationTiming	URL	The document's address.
resource	PerformanceResourceTiming	URL	The resolved URL of the requested resource. This value doesn't change even if the request is redirected.
mark	PerformanceMark (en-US)	DOMString	The name used when the mark was created by calling performance.mark().
measure	PerformanceMeasure (en-US)	DOMString	name used when the measure was created by calling performance.measure().
paint	PerformancePaintTiming	DOMString	Either 'first-paint' or 'first-contentful-paint'.

下列是使用getEntriesByName获取定制的打点信息

function usePerformanceEntryMethods() {
  log("PerformanceEntry tests ...");

  if (performance.mark === undefined) {
    log("... performance.mark Not supported");
    return;
  }

  // Create some performance entries via the mark() method
  performance.mark("Begin");
  doWork(50000);
  performance.mark("End");
  performance.mark("Begin");
  doWork(100000);
  performance.mark("End");
  doWork(200000);
  performance.mark("End");

  // Use getEntries() to iterate through the each entry
  var p = performance.getEntries();
  for (var i=0; i < p.length; i++) {
    log("Entry[" + i + "]");
    checkPerformanceEntry(p[i]);
  }

  // Use getEntries(name, entryType) to get specific entries
  p = performance.getEntries({name : "Begin", entryType: "mark"});
  for (var i=0; i < p.length; i++) {
    log("Begin[" + i + "]");
    checkPerformanceEntry(p[i]);
  }

  // Use getEntriesByType() to get all "mark" entries
  p = performance.getEntriesByType("mark");
  for (var i=0; i < p.length; i++) {
    log ("Mark only entry[" + i + "]: name = " + p[i].name +
         "; startTime = " + p[i].startTime +
         "; duration  = " + p[i].duration);
  }

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  p = performance.getEntriesByName("Begin", "mark");
  for (var i=0; i < p.length; i++) {
    log ("Mark and Begin entry[" + i + "]: name = " + p[i].name +
         "; startTime = " + p[i].startTime +
         "; duration  = " + p[i].duration);
  }
}

用户行为的采集

重写关键方法

onclick

onerror

settimeout

onscroller

setInterval

IE8下重写的坑

页面之间关联适用性分析

window.open

session.storage

maeesageAPI

iframe父子页面之间的通信

cookie

参考链接

1. Navigation Timing - W3C Recommendation 17 December 2012
2. Resource Timing Level 1 - W3C Candidate Recommendation 30 March 2017
3. Resource Timing Level 2 - W3C Working Draft 14 April 2021
4. W3 Web Performance Working Group
5. PerformanceEntry.entryType
6. performance.getEntriesByType()