js 监控浏览器性能

查看性能的参数说明:

var t = performance.timing; // 详情参见 performance API

(1). 白屏时间       -> css加载完成时间戳 - t.fetchStart

(2). 首屏/用户可操作时间 -> t.domContentLoadedEventEnd - t.fetchStart

(3). 总下载时间      -> t.domComplete - t.fetchStart

(4). 各阶段耗时

  1. 获取html请求   -> t.responseStart - t.fetchStart
  2. 获取html全部字节 -> t.responseEnd - t.responseStart
  3. 解析初始html节点 -> 最后一个js请求发送时间戳 - t.domLoading
  4. css加载      -> 加载全部css时间
  5. js加载      -> 加载全部js时间
  6. 解析html+下载解析css,js -> t.domContentLoadedEventStart - t.domLoading
  7. js执行(domready中代码) -> t.domContentLoadedEventEnd - t.domContentLoadedEventStart

(5). Ajax

var lastTime = onload事件触发前发送的请求得到响应时间戳;

  1. 加载页面 至 获得请求 -> lastTime - t.fetchStart
  2. 请求耗时 -> lastTime - 发送第一个请求的时间戳
  3. 请求数量 -> onload事件触发前发送的请求数
  4. 使用本地存储 -> onload事件触发前发送的请求,是否包含 useCache:true
原文地址:https://www.cnblogs.com/sybboy/p/12145340.html