详解Chrome DevTools的Timeline和Profiles的使用

  我们都希望创建高性能的Web应用程序。由于我们的应用程序变得越来越复杂，我们可能想要支持丰富的画面以及理想的60帧/秒，这能保证我们的应用程序响应灵敏且生动流畅。

知道如何衡量和提高性能，是一个有用的技能，在这短短的文章中，我会带您简单回顾关于如何通过 Chrome DevTools的 Timeline 和Profiles做到这一点。 

看！这是一个美丽的GIF动画。这标志着这篇文章这里开始展开:)

记录

Timeline工具栏提供了对于在装载你的Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。

它可以让你深入得到三个层面的数据，来帮助你明白问什么你的应用很缓慢：事件, 框架和实时的内存用量。开始，浏览你的应用，并在DevTools中切换到Timeline工具栏。

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

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

请注意：

会清除你现有的记录会话，以便开始一个新的会话。

将会强迫V8完成一轮的垃圾回收，在调试中它很有用。

将会对显示的详细信息进行过滤，只显示那些完成耗时超过15ms的记录。