《浏览器原理》学习笔记Day74

⻚面性能工具：如何使用Performance？

通常，使用Performance需要分三步走：
第一步是配置Performance；
第二步是生成报告⻚；
第三步就是人工分析报告⻚，并找出⻚面的性能瓶颈。

配置 Performance

上图就是 Performance 的配置⻚，观察图中区域 1，我们可以设置该区域中的“Network”来限制网络加载速度，设置“CPU”来限制 CPU 的运算速度。通过设置，我们就可以在Chrome 浏览器上来模拟手机等性能不高的设备了。在这里我将 CPU 的运算能力降低到了1/6，将网络的加载速度设置为“快的 3G(Fast 3G)”用来模拟 3G 的网络状态。
不同于 Audits 只能监控加载阶段的性能数据，Performance 还可以监控交互阶段的性能数
据。
Performance两个录制阶段：
当你录制加载阶段的性能数据时，Performance 会重新刷新⻚面，并等到⻚面完全渲染出来后，Performance 就会自动停止录制。
如果你是录制交互阶段的性能时，那么需要手动停止录制过程。

认识报告页

观察上图的报告⻚，我们可以将它分为三个主要的部分，分别为概览面板、性能指标面板和详情面板。

1. 概览面板
   引入了时间线，Performance 就会将几个关键指标，诸如⻚面帧速 (FPS)、CPU 资源消耗、网络请求流量、V8 内存使用量 (堆内存) 等，按照时间顺序做成图表的形式展现出来，这就是概览面板，你可以参看上图。
   如果 FPS 图表上出现了红色块，那么就表示红色块附近渲染出一帧所需时间过久，帧的
   渲染时间过久，就有可能导致⻚面卡顿。
   如果 CPU 图形占用面积太大，表示 CPU 使用率就越高，那么就有可能因为某个
   JavaScript 占用太多的主线程时间，从而影响其他任务的执行。
   如果 V8 的内存使用量一直在增加，就有可能是某种原因导致了内存泄漏。
2. 性能面板
   在性能面板中，记录了非常多的性能指标项，比如 Main 指标记录渲染主线程的任务执行过程，Compositor 指标记录了合成线程的任务执行过程，GPU指标记录了 GPU 进程主线程的任务执行过程。有了这些详细的性能数据，就可以帮助我们轻松地定位到⻚面的性能问题。
3. 解读性能面板的各项指标
   要了解各种性能指标数据，需要掌握渲染流水线、浏览器进程架构、导航流程等数据。
   渲染流水线主要是在渲染进程中执行的，在执行渲染流水线的过程中，渲染进程又需要网络进程、浏览器进程、GPU 等进程配合，才能完成如此复杂的任务。另外在渲染进程内部，又有很多线程来相互配合。具体的工作方式你可以参考下图：

分析性能面板

Main 指标，它记录了渲染进程的主线程的任务执行记录

其他指标：

• 第一个是 Network 指标，网络记录展示了⻚面中的每个网络请求所消耗的时⻓，并以瀑布流的形式展现。
• 第二个是Timings指标
• 第三个是 Frames 指标
• 第四个是 Interactions 指标
• 详情面板

由于详情面板所涉及的内容很多，而且每种指标的详细内容都有所不同，所以本节我就不展
开来讲了。另外你可以去 Google 的官方网站查看 Performance 的一些基础使用信息。

此文章为5月Day6学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪