Chrome DevTools — Timeline

关于Timeline一直没下手去写，究其原因是看了文档之后还是有点不知所以然，实践的太少了，甚至都不清楚拿它可以做什么。心里有一个大概的概念就是Timeline是分析性能的！所以我个人就先从网站性能优化开始学习、总结，也写了两篇文章，《网站性能优化—CRP》和《网站性能优化—浏览器渲染》，然后慢慢地就明白了Timeline怎么使用以及如何分析性能。如果你以前没怎么关注过性能优化，还是推荐你先了解一下，这样对掌握Timeline的使用大有好处。

Timeline，顾名思义“时间轴”，不论是页面加载还是在页面上产生交互，它都能记录下来这一段时间内浏览器干了什么，执行了哪些操作，消耗了多少时间等等。由此可见，Timeline对于分析网站性能是多么重要。

认识 Timeline

• Controls：开始/结束记录、清除记录、选择记录的类型等

• Overview：页面性能的一个概览

  • FPS：每秒帧数，绿色竖线越高，FPS越高。FPS图表上的红色块表示长时间帧，很可能会出现卡顿

  • CPU： CPU资源，此区域图表示占用CPU资源的事件类型

  • NET：每条彩色横杠表示一种资源，横杠越长，获取资源所需的时间越长。每个横杠的浅色部分表示等待时间，深色部分表示下载时间。横岗颜色表示的文件类型如下:

    • HTML文件：蓝色

    • JS文件：黄色

    • CSS文件：紫色

    • 媒体文件：绿色

    • 其他资源：灰色

• Flame Chart：CPU栈追踪的可视化展示。在这里可以查看到浏览器渲染一个页面的完整过程，或者是一个交互的过程；还可以查看到JS中函数的调用关系以及每个函数所消耗的时间等等。页面加载的时候，在这里还可以看到三条垂直的虚线：绿线代表首次绘制的时间，蓝线代表DOMContentLoaded事件发生的时间，红线代表load事件发生的时间。

• Details：在Flame Chart中，选择了某一事件后，这部分会展示与这个事件相关的更多信息；如果选择了某一帧，这部分会展示与选中帧相关的信息。如果既没有选中事件也没有选中帧，则这部分会展示当前记录时间段内的相关信息。

录制时间轴

页面加载：打开要录制的页面，然后打开Chrome DevTools，切换到Timeline，重载页面，Timeline会自动录制页面重载的过程。

页面交互：切换到Timeline之后，点击录制按钮，或者快捷键Cmd+E（Mac）、Ctrl+E（Windows/Linux）即可开始录制。录制期间，录制按钮变为红色。之后就可以在页面上进行交互，然后再次点击录制按钮或者Stop按钮以停止记录。Cmd+E/Ctrl+E也可以停止录制，但前提是鼠标的焦点要在Timeline里面。

录制完毕后，DevTools会猜测哪一部分记录与你最相关，并自动缩放到那一部分。

录制建议：

• 尽可能保持记录简短：记录越短，分析越容易

• 避免不必要的操作：比如你想要记录点击登录按钮之后发生的事件，那就不要有滚动页面、加载图像等操作

• 禁用浏览器缓存：如记录与网络相关的信息，最好禁用浏览器缓存

• 禁用浏览器扩展：Chrome 扩展程序会给 Timeline 记录增加不相关的噪声，推荐以隐身模式打开 Chrome 窗口录制

捕捉屏幕截图

Timeline面板可以在页面加载的过程中捕捉屏幕截图，这个特性被称为幻灯片。录制之前，勾选上Screenshots即可。

录制完成后，屏幕截图显示在Overview下方，将鼠标悬停在截图或Overview上可以查看那一时刻放大的屏幕截图。左右移动鼠标可以模拟页面生成的动画效果。

放大记录显示区间

放大显示一部分记录，以便简化分析。在Overview区域可以放大显示一部分记录，放大后，Frame Chart会自动缩放以匹配同一部分记录。

缩放的方法：

• 在Overview上拖动左右两侧的灰色滑动条

• W、A、S和D键：A向左移动，D向右移动，W放大，S缩小

• Mac上用触摸板也很方便

分析JS

当我们想要分析具体的JS时，可以开启JS分析器（勾选JS Profile）。录制之后在Frame Chart可以清晰地看到详细的JS调用情况以及各自消耗的时间。如果未开启JS分析器，则不会显示详细的JS调用关系。

分析绘制

如果想进一步查看Paint事件相关的信息，可以勾选Paint。录制完之后，点击某个Paint事件，在Details中会多出一个Paint Profiler选项卡，此选项卡里展示了与该Paint事件详细的信息。

除了Paint事件，此时点击某一帧也可以查看网页中层相关的信息，详细内容在《网站性能优化—浏览器渲染》中已经阐述过。

搜索事件

查看事件时，你可能想专注某一类事件，比如想查看每一个Parse HTML事件。在Timeline处于焦点时，按Cmd+F/Ctrl+F即可调出一个搜索框，输入想要查看的事件名字即可搜索。搜索结果仅限于当前选定的时间帧范围内，选定时间帧范围外的任何事件都不包括在搜索结果中。

保存和载入记录

在Timeline面板下右键，可以选择保存或载入Timeline记录。保存的Timeline记录是一份json文件。

---

由于Chrome浏览器不断更新，不同版本的Timeline面板也会有所不同，所以Timeline就简单介绍这么多，一般的性能分析应该都不是问题了。不管浏览器怎么更新，基本的使用是不会变的，碰到新增的一些内容可以Google搜索一下或者查看官方文档是否有更新。

有用的资源：

• https://web-design-weekly.com...

• http://blog.librato.com/posts...

• http://echizen.github.io/tech...

更新：

---

Chrome DevTools 系列：

• Chrome DevTools — Network

• Chrome DevTools — JS调试

• Chrome DevTools — Elements

• Chrome DevTools — Console