开发者工具的 Timeline 面板始终是性能优化之路上的第一站。这种集中式的应用活动概览有助于您分析哪些时间花在加载、编写脚本、渲染和绘制等操作上。最近,我们升级了时间轴,增加了更多插桩功能,以便您更深入地了解应用的性能。
我们添加了以下功能:
- 集成的 JavaScript 性能分析器。(包括火焰图!)
- 框架查看器,帮助您直观呈现合成的图层。
- 绘制分析器,深入了解浏览器的绘制活动。
请注意,使用本文中介绍的绘制捕获选项确实会产生一些性能开销,因此请仅在需要时才打开它们。
集成式 JavaScript 性能分析器
如果您熟悉配置文件面板,可能比较熟悉 JavaScript CPU 性能分析器。此工具会衡量执行时间花费在 JavaScript 函数中的什么位置。通过火焰图查看 JavaScript 配置文件,您可以直观地查看一段时间内 JavaScript 处理情况。
现在,您可以在时间轴面板中查看 JavaScript 执行情况的这种精细的细分数据。通过选择 JS Profiler 捕获选项,您可以在时间轴中查看 JavaScript 调用堆栈以及其他浏览器事件。将此功能添加到时间轴有助于简化调试工作流程。除此之外,它让您可以在上下文中查看 JavaScript,并确定影响网页加载时间和呈现的代码部分。
除了 JavaScript 性能分析器之外,我们还将火焰图视图集成到了时间轴面板中。现在,您能够以经典的事件瀑布或火焰图的形式查看应用的活动。火焰图图标可让您在这两种视图之间切换。
![火焰图标。](https://developer.chrome.google.cn/static/blog/devtools-timeline-now-providing-the-full-story/image/flame-icon-88552c36931b3.png?authuser=5&hl=lv)
![使用 JS 性能分析器捕获选项和火焰图视图在时间轴中调查调用堆栈。](https://developer.chrome.google.cn/static/blog/devtools-timeline-now-providing-the-full-story/image/using-js-profiler-captur-f24510c4ffb96.png?authuser=5&hl=lv)
帧查看器
层合成的艺术是浏览器的另一方面,开发者通常对这一方面做不到。谨慎使用图层时,使用层有助于避免成本高昂的重新绘制,从而大幅提升性能。但是,预测浏览器将如何合成您的内容通常并不明显。借助 Timeline 的新 Paint 拍摄选项,您可以直观呈现录制的每一帧中的合成图层。
选择 Main Thread 上方的灰色框架栏后,其 Layers 面板会提供组成应用的图层的可视化模型。
您可以缩放、旋转和拖动图层模型,探索其内容。将鼠标悬停在图层上即可显示该图层在页面上的当前位置。右键点击图层可以跳转到元素面板中的相应节点。这些地图项会向您显示升级到图层的内容。如果您选择了某个图层,则还可以在合成原因行中查看升级原因。
![检查 Codrops 的“分散错位照片”图库中的图层,了解浏览器进行合成的原因。](https://developer.chrome.google.cn/static/blog/devtools-timeline-now-providing-the-full-story/image/inspecting-layer-codrop-47e24b33f4ad3.png?authuser=5&hl=lv)
绘制性能分析器
最后同样重要的一点是,我们添加了绘制分析器,以帮助您识别因绘制开销高昂而导致的卡顿。此功能利用有关 Chrome 在绘制事件期间所做工作的更多详细信息来丰富时间轴。
对于初学者,现在可以更轻松地识别与每个绘制事件对应的视觉内容。在时间轴中选择绿色绘制事件后,详细信息窗格会显示已绘制的实际像素的预览。
![预览浏览器使用“绘图拍摄”选项绘制的像素。](https://developer.chrome.google.cn/static/blog/devtools-timeline-now-providing-the-full-story/image/previewing-pixels-the-br-42df0e50055d.png?authuser=5&hl=lv)
如果您确实想深入了解,请切换到 Paint Profiler 窗格。此性能分析器会显示浏览器为所选绘制执行的确切绘制命令。为了帮助您将这些原生命令与应用中的实际内容关联起来,您可以右键点击 draw* 调用,然后直接跳转到 Elements 面板中的相应节点。
![使用绘制分析器将原生浏览器绘制调用与 DOM 元素相关联。](https://developer.chrome.google.cn/static/blog/devtools-timeline-now-providing-the-full-story/image/relating-native-browser-d-33ad9225c5d3b.png?authuser=5&hl=lv)
通过窗格顶部的迷你时间轴,您可以回放绘制过程,并了解浏览器执行哪些操作的成本高昂。绘制操作的颜色编码如下所示:粉色(形状)、蓝色(位图)、绿色(文本)和紫色(其他)。条形的高度表示通话时长,因此调查高高的柱形有助于您了解特定绘制的成本很高。
分析和盈利!
就性能优化而言,了解浏览器是非常强大的。这些时间轴更新可让您一探究竟,从而帮助阐明您的代码与 Chrome 呈现进程之间的关系。试试 Timeline 中的这些新选项,看看 Chrome 开发者工具可以做些什么来改进您的卡顿搜寻工作流!