Chrome DevTools — Timeline

时间:2023-06-27 11:10:24 编辑:浏览器知识

关于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上可以查看那一时刻放大的屏幕截图。左右移动鼠标可以模拟页面生成的动画效果。