谷歌 Web 开发最佳实践手册(4.1.5):使用Navigation Timing衡量关键渲染路径

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。

【导读】:如果你没有办法衡量性能,那么你就没有办法优化性能。幸好,Navigation Timing API提供了所有必备工具来衡量关键渲染路径中每一步的性能。

学习重点

  • Navigation Timing提供了细粒度的时间戳以便衡量关键渲染路径
  • 浏览器会在关键渲染路径的每一步中抛出可捕获的事件

 

作为有效的性能策略的基础,准确的衡量和指导必不可少。这也就是Navigation Timing API为我们提供的。

dom-navtiming

上图中的每一个标签代表了浏览器在跟踪页面加载时捕获的每一个细粒度时间戳。而且在这个例子中,我们也仅仅为大家展现了各种不同的时间戳中的一部分而已。我们暂且跳过所有和网络相关的时间戳,在后面的课程中还会详细介绍。

那么,这些时间戳到底有什么含义呢?

  • domLoading:这是整个加载进程开始的时间戳。浏览器从这个时间点开始解析收到的HTML页面的第一个字节。
  • domInteractive:标记了浏览器完成解析HTML,DOM树构建完毕的时间。
  • domContentLoaded:标记了DOM准备就绪且没有样式资源阻碍JavaScript执行的时间点,我们可以开始构建渲染树了。
  • 很多JavaScript框架会在这个事件发生后才开始执行它们自己的逻辑。因此浏览器会通过捕获domContentLoadedEventStartdomContentLoadedEventEnd来计算执行框架的代码逻辑需要多长时间。
  • domComplete:不言自明,所有的处理过程结束,所有的页面资源下载完成。浏览器窗口上表示页面还在加载的图标停止旋转。
  • loadEvent:作为所有页面加载的最后一步,浏览器会在此时触发onLoad时间,以便开始附加的应用逻辑。

HTML的规范中指明了每一个事件的详细信息:什么时候触发,什么条件触发之类。在我们的教程中,我们会重点着眼于和关键渲染路径相关的事件:

  • domInteractive:表示DOM准备就绪。
  • domContentLoaded:表示DOM和CSSOM都准备就绪。如果没有JavaScript阻塞渲染,该事件会在domInteractive事件之后立即触发。
  • domComplete:表示页面及其附属资源都已经准备就绪。

查看完整的例子

上面的例子咋一看可能有点晕,但是它确实已经很简单了。Navigation Timing API捕获了所有相关的时间戳,而我们的代码在等待onLoad事件 – 回忆一下上文介绍的onLoad事件,在domInteractive,domContentLoaded和domComplete之后触发 – 然后计算各个时间戳之间的间隔。

device-navtiming-small

通过上面的介绍和示例,我们现在知道了要跟踪哪些关键节点以及一些简单的展示方法。记住,相比直接将结果显示在页面上,更常见的是将这些统计信息发送到分析服务器上。(Google Analytics可以自动完成这些功能)这是一种很有效的监控页面性能的方法,你也可以由此找出哪些页面还需要进一步优化性能。

收藏 评论

关于作者:njuyz

(新浪微博:@njuyz) 个人主页 · 我的文章 · 11

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部