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

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

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

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

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

Navigation Timing API 用法

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

更多内容参考原文&＃xff1a;

简书&＃xff1a;https://www.jianshu.com/p/0e3a851ed711

作者网站&＃xff1a;http://3fuyu.com/#/