HTML5 Web Performance Timing APIs

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

A Primer for Web Performance Timing APIs W3C Editor’s Draft 06 March 2017

在本文介绍的 API 出现之前，开发者度量页面性能指标的唯一方式就是在 JavaScript 代码内部巧妙的使用 Date 对象来获取页面性能的度量信息。

现在，所有的这些度量信息都已经包含在了 window.performance 对象里面。

  • window.performance： 返回一个 Performance 对象，这个对象包含了当前页面加载相关的性能信息
    • performance.navigation： 返回一个 PerformanceNavigation 对象，这个对象包含着与页面导航有关的多个属性
      • redirectCount： 页面加载前的重定向次数
      • type： 数值常量，表示刚刚发生的导航类型（页面第一次加载？页面重载？通过后退或前进按钮打开页面？）
    • performance.timing： 返回一个 PerformanceTiming 对象，这个对象包括了与页面性能相关的时间戳信息
      • 由于这个对象属性略多，下面只列出几个
      • loadEventStart： 发生 load 事件时的时间
      • loadEventEnd： load 事件执行完后的时间
      • requestStart： 浏览器开始请求页面的时间

通过这些时间值，就可以全面了解页面在被加载到浏览器的过程中经历了哪些阶段，以及各个阶段经历的时间，从而分析出哪些阶段可能是影响性能的瓶颈。

现在文章有点短，是因为我觉得以后在学习性能优化分析时可能会在这里总结一些案例吧，所以留白了~