Navigation Timing获取页面加载各个阶段所需时间

 

最近接触到了一个性能优化方面为我们提供精准数据的工具，Navigation Timing，本想从网上获取他更详细的信息，但搜索到的内容绝大部分都是国外的文章，遂决定写一遍具体分析的文章。

之前测试页面加载的时间都是在相应的位置打Date.now()，通过计算时间差来实现。这样的做法有很多弊端。

• 需要在许多地方添加额外的代码
• 记录的时间不准确
• 测试完之后需要找到每一个地方注释or删除，容易落下且麻烦

W3C Web Performance Working Group 引入了 Navigation Timing API 帮我们自动，精准的实现了性能测试的打点问题。

Navigation Timing API 用法

用法很简单，在页面load完之后我们可以从performance.timing对象中拿到我们需要的所有数据。见下图：

更多内容参考原文：

简书：https://www.jianshu.com/p/0e3a851ed711

作者网站：http://3fuyu.com/#/