Chrome DevTools — Timeline

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月1日14:58:47 评论 503

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

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

认识 Timeline

Chrome DevTools — Timeline

  • Controls:开始/结束记录、清除记录、选择记录的类型等
  • Overview:页面性能的一个概览Chrome DevTools — Timeline
    • 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里面。

Chrome DevTools — Timeline

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

录制建议

  • 尽可能保持记录简短:记录越短,分析越容易
  • 避免不必要的操作:比如你想要记录点击登录按钮之后发生的事件,那就不要有滚动页面、加载图像等操作
  • 禁用浏览器缓存:如记录与网络相关的信息,最好禁用浏览器缓存
  • 禁用浏览器扩展:Chrome 扩展程序会给 Timeline 记录增加不相关的噪声,推荐以隐身模式打开 Chrome 窗口录制

捕捉屏幕截图

Timeline面板可以在页面加载的过程中捕捉屏幕截图,这个特性被称为幻灯片。录制之前,勾选上Screenshots即可。
Chrome DevTools — Timeline
录制完成后,屏幕截图显示在Overview下方,将鼠标悬停在截图或Overview上可以查看那一时刻放大的屏幕截图。左右移动鼠标可以模拟页面生成的动画效果。

Chrome DevTools — Timeline

放大记录显示区间

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

Chrome DevTools — Timeline

缩放的方法:

  • Overview上拖动左右两侧的灰色滑动条
  • WASD键:A向左移动,D向右移动,W放大,S缩小
  • Mac上用触摸板也很方便

分析JS

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

Chrome DevTools — Timeline

分析绘制

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

Chrome DevTools — Timeline

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

搜索事件

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

Chrome DevTools — Timeline

保存和载入记录

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

Chrome DevTools — Timeline


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

有用的资源:

更新:Chrome DevTools — Timeline


Chrome DevTools 系列:

im, 无色
  • 本文由 发表于 2019年7月1日14:58:47
C# 开发Chrome内核浏览器(WebKit.net) Chrome开发

C# 开发Chrome内核浏览器(WebKit.net)

WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器。这里介绍一下怎么用它来显示一个网页这样的一个最简单的功能。 第一步: 下载...
Google Chrome中的高性能网络 (三) Chrome开发

Google Chrome中的高性能网络 (三)

使用预连接优化了TCP连接管理   已经预解析到了主机名,也有了由OmniBox和Chrome Predictor提供信号,预示着用户未来的操作。为什么再进一步连接到目标主机,在用户真正发起...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: