DevTools工具Timeline panel一直是最好的性能优化的第一站.集中说明你的应用程序活动,在加载,脚本,渲染,和重绘花费的时间.最近,我们升级了Timeline,可以更深入的了解APP的性能.

我们添加了以下特点:

1) 整合了 Javascript profiler. (包含Flame chart)

2)frame viewer 帮助你可视化复合层.

3)paint profiler 详细的查看浏览器的绘画活动.

注意本文中描述使用Paint捕获选项确实导致一些性能开销,所以选择自己想要的选项.

如果你以前使用过 Profiles面板,你可能知道Javascript CPU profiler.这个工具可以监测到你的js函数执行的时间.通过查看JS的Flame Chart,可以显示JS处理的结束时间.

现在,你可以在Timeline面板上获取更细节化的JAVASCRIPT的执行状态.通过选择JS Profiler捕获选项,可以看到在Timeline上的调用栈连同其它的浏览器事件.添加这个Timeline特性,更易于简化你的调试流程.但是不只是这些,它允许你查看Javascript代码的上下文,识别影响页面加载和渲染的部分代码.

另外,我们也整合了一个Flame Chart视图到Timeline面板.你现在可以查看自己的APP活动状态,无论是经典的瀑布流,或者是一个Flame Chart.Flame Chart图标是这个  允许你关闭或者打开.

Frame Viewer

layer compositing又是浏览器的另外一个方面,使用时小心谨慎,layers可以帮助你避免高代价的重绘和增加巨大的性能开销.但通常不是很明显的检测浏览器复合的内容.使用新的 Paint捕获项,可以在每一帧显示复合层.

当你在Main Thread上选择一个灰色的框条时,他的Layers面板提供了一个显示层的模块.

你可以放大或缩小,旋转和拖动层模块来查看里面的内容.悬停在一个层上,会显示他当前在页面的位置.在这个层上右键,可以跳转到Elements面板相应的节点.这些特点向你展示提升到一层是什么意思.如果你选择一层,同样可以看到在他提升的原因(在行标记的Compositing Reasons).

Paint Profiler

最后,但不是最不重要,我们添加了paint profiler来帮助你识别jank造成的高价绘图.这个特点丰富了Timeline关于Chrome绘图事件的更多细节.

首先,现在很容易的识别显示内容与对应的每一个绘图事件.当你选择一个绿色的绘图事件,Details面板会显示一个绘画后的预览框.

如果你真的想开始了解他们,打开这个Paint Profiler面板. 这个分析工具显示了精确的绘画命令,浏览器执行后的选择的paint. 帮助你连接本地命令与这个实际的内容,你可以右击draw*开始的列表,会跳转到相应的元素面板.

mini-timeline在窗格的顶部,可以回放的绘画过程,了解浏览器执行哪些操作是昂贵的.绘画操作颜色编码如下:

pink (shapes), blue (bitmap), green (text), purple (misc.). Bar高度表示调用持续时间,所以可以帮助你明白哪些绘画是开销大的.

结束

当谈到性能优化时,浏览器的知识，可令人难以置信的强大.在浏览器引擎下,给你查看,Timeline的状态,帮助了解你的代码之间的关系和Chrome的渲染过程.尝试Timeline这些新的选项,看Chrome开发者工具可以为你提高哪些工作.

附英文原文链接: https://developers.google.com/web/updates/2015/03/devtools-timeline-now-providing-the-full-story