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