记录
TimeLine工具栏提供了对于在装载在你的WebAPP中，时间花费情况概览，这些应用包括处理DOM，页面布局渲染或者向屏幕绘制元素，三个方面的数据：事件，框架和实时的内存用量，可以解释为什么应用很缓慢



默认情况下Timeline不会显示任何数据，但是你可以这样开始一个记录会话，打开你的应用并点击灰色圆圈，它在工具栏的底部——使用**Cmd/Ctrl+E**快捷键也能开始一个记录。






ScreenShot2012-12-10at00.37.24

这个记录按钮会从灰色变成红色，而Timeline将开始从你的页面获取时间线（timeline）。在你的应用中完成一些操作，记录到一些数据之后，再一次点击按钮来停止记录。

请注意：




ScreenShot2012-12-10at15.08.47
会清除你现有的记录会话，以便开始一个新的会话。




ScreenShot2012-12-10at15.08.54
将会强迫V8完成一轮的垃圾回收，在调试中它很有用。




ScreenShot2012-12-10at15.12.31
将会对显示的详细信息进行过滤，只显示那些完成耗时超过15ms的记录
检查
接下来，我们着手检查一下记录的数据。对影响性能的成本要素按优先级排序。是JavaScript吗？还是渲染？我们先看一看TimelineEvents模式,它能帮助回答这些问题。





ScreenShot2012-12-08at21.42.26

在这个模式中，Summary视图(在Timeline的顶部)显示了一些水平的栅栏，分别代表页面中的网络和HTML解析(蓝色)，JavaScript(黄色)，样式重计算和布局(紫色)以及绘画和合成(绿色)事件。重绘是浏览器事件，是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。
CSS属性的修改会对样式重新进行计算，而布局事件（即重排）是由元素位置的改变引起的。别担心记不住这些，在Timeline面板下方有图例告诉你。





ScreenShot2012-12-08at21.44.30

在Summary视图下面是Details视图，包含了某个会话被记录后，相关类别的记录的详细内容。





ScreenShot2012-12-10at00.24.33

每一个记录在左侧有用于说明的标题，右侧是时间轴区域。鼠标移到一个记录之上，会显示更多的提示信息，其中包括从开始录制到结束的时间-这非常有用，有必要多关注一下，特别是其中的调用栈信息。





ScreenShot2012-12-08at21.47.05

点击调用栈（CallStack）或者气泡提示中的超链接，会跳转到相应的Javascript代码行。如果你发现一个浏览器时间花费了过多的时间（可以从详细的气泡提示中的‘Duration’知道），你也许会进一步去研究其原因。






ScreenShot2012-12-10at00.27.29

回到记录列表，点击某个记录将其展开，可以看到更进一步的记录，描述了这个记录是由哪些事件组成的。






ScreenShot2012-12-10at10.48.55

如果你只对某个特段的数据感兴趣，在Summary视图中通过点击和拖拽可以选择放大的区域。





ScreenShot2012-12-10at10.51.34

改善帧率、动画及响应性能
Chrome把你的应用展示到屏幕上需要生成每一幅帧，而帧模式可以让你可以深入到每一帧生成的内部细节。





ScreenShot2012-12-10at00.30.30

作为平滑的体验，你看到的帧率最好一直保持
在30-60fps，如果太低了，你的应用就会因为丢帧看上去混乱或者抖动。
在帧模式下，带阴影的竖条对应正在重计算样式、正在组合等等情况。每个竖条的透明区域对应于空闲时间，至少对于你的页面是空闲的。例如，假设第一帧用了15ms，下一帧用了30ms。通常每一帧都会按刷新率进行同步，这个例子中第二帧的渲染多花了15ms，导致第三帧错失了”真正“的硬件帧的时间，直接跳到下一帧的渲染。这样，第二帧的实际生效时间就加倍了。





ScreenShot2012-12-10at18.23.46    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！