如何使用Chrome中的profiles功能

Posted 2023-03-31

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

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

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

　　这个记录按钮会从灰色变成红色，而Timeline将开始从你的页面获取时间线（timeline）。在你的应用中完成一些操作，记录到一些数据之后，再一次点击按钮来停止记录。
　　请注意：会清除你现有的记录会话，以便开始一个新的会话。将会强迫V8完成一轮的垃圾回收，在调试中它很有用。将会对显示的详细信息进行过滤，只显示那些完成耗时超过15ms的记录。
　　

　　检查
　　接下来，我们着手检查一下记录的数据。对影响性能的成本要素按优先级排序。是javascript吗？还是渲染？我们先看一看Timeline Events 模式,它能帮助回答这些问题。

　　在这个模式中，Summary视图(在Timeline的顶部)显示了一些水平的栅栏，分别代表页面中的网络和html解析(蓝色)，JavaScript(黄色)，样式重计算和布局(紫色)以及绘画和合成(绿色)事件。重绘是浏览器事件，是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。
　　

　　

　　CSS属性的修改会对样式重新进行计算，而布局事件（即重排）是由元素位置的改变引起的。别担心记不住这些，在Timeline面板下方有图例告诉你。

　　在Summary视图下面是Details视图，包含了某个会话被记录后，相关类别的记录的详细内容。

　　每一个记录在左侧有用于说明的标题，右侧是时间轴区域。鼠标移到一个记录之上，会显示更多的提示信息，其中包括从开始录制到结束的时间 - 这非常有用，有必要多关注一下，特别是其中的调用栈信息。
　　

　　

　　点击调用栈（Call Stack）或者气泡提示中的超链接，会跳转到相应的Javascript代码行。如果你发现一个浏览器时间花费了过多的时间（可以从详细的气泡提示中的‘Duration’知道），你也许会进一步去研究其原因。

　　回到记录列表，点击某个记录将其展开，可以看到更进一步的记录，描述了这个记录是由哪些事件组成的。

　　如果你只对某个特段的数据感兴趣，在Summary视图中通过点击和拖拽可以选择放大的区域。

　　

　　

　　改善帧率、动画及响应性能
　　Chrome把你的应用展示到屏幕上需要生成每一幅帧，而帧模式 可以让你可以深入到每一帧生成的内部细节。

　　作为平滑的体验，你看到的帧率最好一直保持在30-60fps，如果太低了，你的应用就会因为丢帧看上去 混乱 或者抖动。
　　
　
　　

　　在帧模式下，带阴影的竖条对应正在重计算样式、正在组合等等情况。每个竖条的透明区域对应于空闲时间，至少对于你的页面是空闲的。例如，假设第一帧用了15ms，下一帧用了30ms。通常每一帧都会按刷新率进行同步，这个例子中第二帧的渲染多花了15ms，导致第三帧错失了”真正“的硬件帧的时间，直接跳到下一帧的渲染。这样，第二帧的实际生效时间就加倍了。

　　

　　

　　正如Andrey Kosyakov Chromium 的博客中提到的，即使你的程序没有很多动画，帧的概念也是有用的，因为浏览器在处理输入事件时会生成重复动作的序列。如果你在一帧中留有足够的时间处理这些事件，就会使你的程序看上去有更好的响应性，这意味着更好的用户体验。

　　如果我们的目标是60fps, 那么最多有 16.66ms 去做所有的事情。这个时间并不多，所以尽可能从动画中挤出时间来提高性能还是很重要的。
　　让我们再次放大Summary视图，看一下那些不满足帧率的帧，你就会发现浏览器（以及程序的行为）对此的影响了。

　　

　　

　　举个例子，最近我们使用帧视图（以及事件视图）发现我们的程序有过多的图像解码，这是因为浏览器需要不断的实时的调整图片的大小。

　　作为替代方案，为图片预先准备好所有需要的尺寸，我们就避免了这些开销，从而达到60fps的目标，对于最终用户来说更为平滑。
　　相关提示：通过在Settings菜单打开Show FPS meter选项，你可以在DevTool中打开实时的FPS计数器。

　　这可以在程序的右上角显示一个仪表盘，像下面这样，这使得你可以在程序的帧率低于预期的时候看到直观的反馈。

　　 参考技术A

按F12打开开发者工具

选择【profiles】标签

点击“Start”按钮，就可以拍下当前JS的heap快照

Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。软件的名称是来自于称作Chrome的网络浏览器图形使用者界面（GUI）。