返回文章

你一定要经历的 web 页面性能优化之旅 · 02

performance.timing 各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时 performance.timing 对象 performance.timing.navigationStart：当前浏览器窗口的前一个网页关闭，发生 unload 事件时的 Unix 毫秒时间戳。如果没有前一个网页，则等于 fetchStart 属性。 performance.timing.u…

performance.timing

各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时

performance.timing 对象

  1. performance.timing.navigationStart：当前浏览器窗口的前一个网页关闭，发生 unload 事件时的 Unix 毫秒时间戳。如果没有前一个网页，则等于 fetchStart 属性。
  2. performance.timing.unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的 unload 事件发生时的 Unix 毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为 0。
  3. performance.timing.unloadEventEnd：如果前一个网页与当前网页属于同一个域名，则返回前一个网页 unload 事件的回调函数结束时的 Unix 毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为 0。
  4. performance.timing.redirectStart：返回第一个 HTTP 跳转开始时的 Unix 毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为 0。
  5. performance.timing.redirectEnd：返回最后一个 HTTP 跳转结束时（即跳转回应的最后一个字节接受完成时）的 Unix 毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为 0。
  6. performance.timing.fetchStart：返回浏览器准备使用 HTTP 请求读取文档时的 Unix 毫秒时间戳。该事件在网页查询本地缓存之前发生。
  7. performance.timing.domainLookupStart：返回域名查询开始时的 Unix 毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于 fetchStart 属性的值。
  8. performance.timing.domainLookupEnd：返回域名查询结束时的 Unix 毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于 fetchStart 属性的值。
  9. performance.timing.connectStart：返回 HTTP 请求开始向服务器发送时的 Unix 毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于 fetchStart 属性的值。
  10. performance.timing.connectEnd：返回浏览器与服务器之间的连接建立时的 Unix 毫秒时间戳。如果建立的是持久连接，则返回值等同于 fetchStart 属性的值。连接建立指的是所有握手和认证过程全部结束。
  11. performance.timing.secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的 Unix 毫秒时间戳。如果当前网页不要求安全连接，则返回 0。
  12. performance.timing.requestStart：返回浏览器向服务器发出 HTTP 请求时（或开始读取本地缓存时）的 Unix 毫秒时间戳。
  13. performance.timing.responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的 Unix 毫秒时间戳。
  14. performance.timing.responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前 HTTP 连接已经关闭，则返回关闭时）的 Unix 毫秒时间戳。
  15. performance.timing.domLoading：返回当前网页 DOM 结构开始解析时（即 Document.readyState 属性变为“loading”、相应的 readystatechange 事件触发时）的 Unix 毫秒时间戳。
  16. performance.timing.domInteractive：返回当前网页 DOM 结构结束解析、开始加载内嵌资源时（即 Document.readyState 属性变为“interactive”、相应的 readystatechange 事件触发时）的 Unix 毫秒时间戳。
  17. performance.timing.domContentLoadedEventStart：返回当前网页 DOMContentLoaded 事件发生时（即 DOM 结构解析完毕、所有脚本开始运行时）的 Unix 毫秒时间戳。
  18. performance.timing.domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的 Unix 毫秒时间戳。
  19. performance.timing.domComplete：返回当前网页 DOM 结构生成时（即 Document.readyState 属性变为“complete”，以及相应的 readystatechange 事件发生时）的 Unix 毫秒时间戳。
  20. performance.timing.loadEventStart：返回当前网页 load 事件的回调函数开始时的 Unix 毫秒时间戳。如果该事件还没有发生，返回 0。
  21. performance.timing.loadEventEnd：返回当前网页 load 事件的回调函数运行结束时的 Unix 毫秒时间戳。如果该事件还没有发生，返回 0。

performance 中的方法

  1. performance.now()

    performance.now 方法返回当前网页自从 performance.timing.navigationStart 到当前时间之间的微秒数（毫秒的千分之一）。也就是说，它的精度可以达到 100 万分之一秒

  2. performance.mark() mark 方法用于为相应的视点做标记。

    clearMarks 方法用于清除标记，如果不加参数，就表示清除所有标记。

  3. performance.getEntries()

    以数组形式，返回这些请求的时间统计信息，有多少个请求，返回数组就会有多少个成员。

  4. performance.getEntriesByType()

    函数通过类型获取对应的标记

  5. performance.navigation.type

    表示网页的加载来源

    • 0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数 performance.navigation.TYPE_NAVIGATENEXT。
    • 1：网页通过“重新加载”按钮或者 location.reload()方法加载，相当于常数 performance.navigation.TYPE_RELOAD。
    • 2：网页通过“前进”或“后退”按钮加载，相当于常数 performance.navigation.TYPE_BACK_FORWARD。
    • 255：任何其他来源的加载，相当于常数 performance.navigation.TYPE_UNDEFINED。

  6. performance.navigation.redirectCount

    当前网页经过了多少次重定向跳

performance 的 demo

  1. 计算一个图片的加载时间
<body>
  <img src="https://pic3.zhimg.com/80/v2-3f18b42f1f7335958072d36641862afa_hd.jpg" />
  <script type="text/javascript">
    var measure_start = performance.now();
    document.getElementsByTagName("img")[0].addEventListener(
      "load",
      function() {
        var measure_end = performance.now();
        console.log("image load time: " + (measure_end - measure_start) + "ms");
      },
      false
    );
  </script>
</body>
<!-- image load time: 3.8949999725446105ms -->
  1. 获取所有的标记或者测量结果
performance.mark("start");
performance.mark("end");
performance.measure("difference", "start", "end");
var marks = performance.getEntriesByType("mark");
var measures = performance.getEntriesByType("measure");
console.log("===marks===:");
marks.forEach(function(mark) {
  console.log(mark.name + ": " + mark.startTime);
});
console.log("===measures===:");
measures.forEach(function(measure) {
  console.log(measure.name + ": " + measure.duration);
});
// ===marks===:
// start: 20351.0950000491
// end: 20351.099999970756
// ===measures===:
// difference: 0.004999921657145023
  1. 外部资源加载的耗时
performance.getEntriesByType("resource").forEach(function(r) {
  console.log(r.name + ": " + r.duration);
});
// https://pic3.zhimg.com/80/v2-3f18b42f1f7335958072d36641862afa_hd.jpg: 2.740000025369227
  1. clearMarks 删除之前创建的标记
performance.clearMarks();
performance.mark("start");
performance.mark("end");
var marks = performance.getEntriesByType("mark");
console.log("before clear:");
marks.forEach(function(mark) {
  console.log(mark.name + ": " + mark.startTime);
});
performance.clearMarks("start");
marks = performance.getEntriesByType("mark");
console.log("after clear:");
marks.forEach(function(mark) {
  console.log(mark.name + ": " + mark.startTime);
});
// before clear:
// start: 2388638.3650000207
// end: 2388638.4000000544
// after clear:
// end: 2388638.4000000544

参考

Performance API https://www.infoq.cn/article/html5-performance-api-monitoring

使用 HMTL5 API 监控前端性能 https://www.kancloud.cn/dennis/tgjavascript/241845

暂无评论