【翻译】开发者工具时间轴:现在提供了全部的故事

原文地址:http://updates.html5rocks.com/2015/04/devtools-timeline-improvements

开发者工具的timeline panel一直以来都是在性能优化路上最佳的第一站。 这个关于你的应用程序活动的集中化概览,可以帮助你分析花费在loading、scripting、rendering和repainting上的时间。 最近,我们升级了timeline面板,增加了更多的使用方法,以便你可以更加深入地了解你的应用程序性能。

我们添加了以下特性:

注意,使用本文中描述的Paint捕获选项会导致一些性能负担,所以只有你需要它们的时候,才去勾选它们。

Integrated JavaScript Profiler

如果你曾经玩过Profiles面板,那么你应该很熟悉Javascript CPU Profiler。这个工具估量了执行时间都花费在你的Javascript函数哪些地方。通过火焰图表来查看Javascript profiles,你可以可视化你的Javascript随着时间推移的执行过程。

现在,你可以在Timeline面板上获得细粒度的Javascript执行故障。通过勾选JS Profiler捕获选项,你可以在时间轴上看到你的Javascript调用栈,同时还有一些其他浏览器事件。 添加这些特性到时间轴上,可以帮助你流程化你的调试工作。但是不仅如此,它还允许你查看上下文中的Javascript代码,并且还可以标识出影响页面加载时间和渲染的那部分代码。

除了该Javascript profiler,我们还集成了一个火焰图表到Timeline面板中。你现在可以通过两种方式查看你的应用程序活动,一种是经典的瀑布图,一种是一个火焰图表。 面板上的火焰图标flame-icon.png允许你在这两种视图之间切换。

javascript-profiler.png

在时间轴上,使用JS Profiler捕获选项和火焰图表视图来研究调用栈。

提示:可以使用按键WASD来缩放和平移火焰图表。Shift + 拖动可以画一个选择框。

Frame Viewer

layer compositing的艺术是浏览器不为人知的另一方面。当节俭并小心地使用时,图层可以帮助避免一些昂贵的重绘操作,并且产生巨大的性能收益。但是往往无法明显地预测浏览器将如何组合你的内容。 使用Timeline面板中新的Paint捕获选项,你可以显式地查看一个记录中每一帧的组合图层。

当你选择在Main Thread上方的某一个灰色的帧条时,它的图层面板提供了一个图层的可视化模型,这些图层组成了你的应用程序。

你可以缩放、旋转、拖动这些图层来查看它们的内容。光标移到一个图层上,会揭示出它在页面上的当前位置。右击一个图层可以让你跳到Elements面板中相应的节点上。这些功能向你展示了什么被提升为一个图层。如果你选择一个图层,你也可以在签名为Compositing Reasons的行中看到它为什么被提升了。

compositing-reasons.png

Codrops’ Scattered Polaroids Gallery里检查一个图层来揭晓浏览器组合图层的原因。

ps: 一个元素可以被提升到一个图层中,当它具备某些特性时,详见compositing layers

Paint Profiler

最后但并非不重要,我们已经添加了paint profiler来帮助你找出由于昂贵的绘制引发的卡顿。这个特性充实了时间轴,我们可以看到更多关于Chrome在绘制事件期间的工作信息。

对于初学者,现在可以更容易地辨别可见内容与绘制事件之间的对应关系。当你在时间轴上选择一个绿色的绘制事件(Main
Thread
下方),Details面板将为你展示已经绘制的实际像素的预览。

paint-capture.png

使用paiint捕获选项预览浏览器已经绘制的像素。

如果你真想深究,切换到Paint Profiler面板上。这个profiler为你展示了浏览器在选中的绘制事件中所执行的准确的绘制命令。 为了帮助你关联这些本地命令到你应用程序中的实际内容,你可以右击draw*调用并直接跳转到Elements面板上的对应的节点。

draw-calls.png

那个横跨在面板顶部上的小时间轴可以让你重播绘制进程,然后让你对哪些浏览器绘制操作是昂贵的有所了解。绘图操作是颜色编码的,如下:pink(shapes)、blue(bitmap)、green(text)、purple(misc.)。条形高表示调用过程,所以研究高的条形可以帮助你了解一个特定的绘制是怎么昂贵的。

Profile and profit!

当涉及到性能优化时,浏览器的知识是难以置信地有用。管中窥豹,这些时间轴更新足以帮助阐明你的代码和Chrome渲染进程之间的关系。试试时间轴上的这些更新吧,然后看看Chrome DevTools能做些什么来增强你的解决卡顿问题的工作流程。

ps: 原文有几个视频,推荐大家去看看。