6.Performance部分
Performance 面板主要用于记录网页加载过程中的各种性能指标，如页面的渲染时间、JavaScript 执行时间、帧率、内存使用等，帮助开发者找出性能瓶颈。这个面板会显示一个详细的时间线视图，包括页面加载、用户交互、浏览器渲染、JavaScript 执行等各个环节的活动。
如图，自上至下分别为区域1：控制面板，区域2：概览面板，区域3：线程面板，区域4：统计面板。
（1） 区域1：控制面板，你可以开始一次 录制（Record）来捕获一个特定的时间段内的性能数据。这个录制过程通常会持续几秒钟到几分钟，取决于你需要分析的内容。 点击“录制”按钮开始录制，进行你想要测试的操作（例如，页面加载、点击交互等），然后停止录制。
（2）区域2：概览面板，包含--FPS:每秒帧数，CPU：处理各个任务花费的时间，NET:各个请求花费时间。
1） FPS（每秒帧数）：帧率（FPS，Frames Per Second） 表示每秒钟渲染的帧数。在一个理想的网页或应用中，目标帧率通常是 60fps（即每秒60帧），以确保流畅的动画和交互体验。如果帧率低于 60fps，页面会感觉卡顿或不流畅。低于 30fps 时，用户通常会感到明显的卡顿。
在概览面板中，你可以看到一条显示帧率变化的曲线。频繁的掉帧（例如从 60fps 突然下降到 30fps 或更低）表明页面渲染性能有问题。
2）CPU（处理器占用）：CPU 使用情况 显示了浏览器在执行不同任务时消耗的处理器时间。每个任务（如 JavaScript 执行、布局计算等）都需要占用一定的 CPU 时间，过高的 CPU 使用可能会导致页面响应缓慢或卡顿。 这个部分会展示 CPU 使用的整体情况，帮助你理解页面在执行 JavaScript、布局、渲染等过程中耗费的时间。你可以查看每个任务的执行时间，找出性能瓶颈。
如果 CPU 占用过高（比如持续超过 50% 或 80%），可能说明存在性能优化空间，比如代码优化、减少不必要的计算等。
- NET（网络请求时间）：NET 面板 显示了所有网络请求的加载时间。它帮助你分析资源（如图片、CSS 文件、JavaScript 文件、API 请求等）加载的时间和网络延迟。
每个请求都显示了它的开始时间、结束时间和总耗时。这可以帮助你找出加载时间过长的资源或请求，进而进行优化。
对于长时间加载的资源，开发者可以采取措施（例如异步加载、延迟加载、资源压缩等）来加速页面加载速度。
（3）区域3：线程面板，包含--Frames：帧线程，Main：主线程，负责执行Javascript，解析Html、Css，完成绘制；Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制。
-
Frames（帧线程）:帧线程 负责将页面内容逐帧绘制到屏幕上。每一帧的渲染都涉及布局、样式计算、绘制等过程，目标是确保页面能够流畅展示。
帧线程通常会按照 60fps 的速度来工作，每秒显示 60 帧。如果帧线程的任务积压，或者每一帧渲染时间过长，就可能导致卡顿或延迟。
-
Main（主线程）:主线程是浏览器中非常关键的线程，负责执行所有 JavaScript 代码，解析 HTML 和 CSS，以及处理所有与用户交互相关的事件。主线程的性能直接影响页面的响应性。
主线程在执行任务时，如果长时间被阻塞，会导致页面无法及时响应用户操作。例如，长时间运行的 JavaScript 脚本会阻塞用户的点击、滚动等操作。
性能问题往往与主线程的负载有关。如果 JavaScript 执行时间过长，主线程无法及时响应用户输入，就会导致页面的卡顿或冻结。
-
Raster（栅格线程）:Raster 线程 负责执行图形渲染中的具体绘制任务。这个线程会将页面上的内容转换成屏幕像素，通常涉及层（layer）或块（tile）级的绘制操作。
对于复杂的网页，渲染的内容会被分解为多个图层或区域，Raster 线程会在 GPU 上进行具体的绘制工作。这个过程通常是与 CPU 的计算密切相关，但栅格线程则专注于将计算结果转化为实际的图像。
栅格线程的效率直接影响页面的渲染速度，特别是在涉及大量图像或动画的页面中，Raster 线程的性能至关重要。
（4）区域4：统计面板，提供了更详细的性能数据，并帮助开发者通过量化的指标分析性能瓶颈。通常包括以下几部分：
1）Frames（帧）：这个部分详细展示了每一帧的渲染时间，以及每帧的计算、绘制等过程的耗时。通过这个面板，开发者可以直观地看到每一帧渲染的各个环节消耗的时间，以及哪些环节可能导致页面的卡顿。在时间轴上，帧时间线通常以不同的颜色或高度显示，长时间的 红色 标记可能表示某一帧耗时过长，开发者需要进行优化。
2）Main Thread（主线程）：显示主线程的详细活动，包括脚本执行、布局计算、事件处理等。你可以查看主线程上的每个任务以及它们的执行时间，特别是 JavaScript 代码的执行时间。如果某个脚本占用了主线程较长时间，可能导致页面响应变慢，开发者可以在这里找到优化方向。
3）Rendering（渲染）：渲染部分通常显示有关页面绘制、回流和重绘的详细数据。它有助于开发者分析页面布局和样式计算的效率，以及绘制是否顺畅。在渲染过程中过多的回流（Reflow） 或 重绘（Repaint）可能会降低页面的性能，统计面板可以帮助开发者发现这些问题，并采取相应措施减少不必要的渲染操作。
4）Network（网络）：网络统计面板展示了所有资源的加载详情，开发者可以查看每个请求的响应时间、延迟等信息。如果某个资源（如大图片、外部 API 请求）加载缓慢，可以进一步优化资源加载策略。
5）Memory（内存）：内存统计面板展示了页面的内存使用情况，包括 JavaScript 对象和 DOM 节点的内存占用。内存泄漏、频繁的内存分配和回收等问题会影响性能，统计面板可以帮助开发者查找和修复内存使用上的问题。
大家感兴趣可以点击下面的链接来通过一些操作改变页面的卡顿程度等，查看FPS指标，寻找性能瓶颈，优化代码。更好地理解该部分内容。
googlechrome.github.io/devtools-sa…
7.Lighthouse部分
Lighthouse 是一个非常强大的工具，可以帮助开发者全面评估和优化网页性能，确保网页符合现代 Web 开发标准，并且对所有用户友好。通过使用 Lighthouse，开发者能够获得清晰的报告和优化建议，从而提升网站的加载速度、可访问性、安全性、搜索引擎优化等方面的表现。
首先在开发者工具面板中，点击 Lighthouse 选项卡。选择你要评估的领域（性能、可访问性、SEO 等），然后点击 Generate Report（生成报告）。Lighthouse 会自动运行一系列的测试并生成详细的报告，报告中包含各项评分、问题和改进建议。
简单介绍一下一些核心指标：
首次内容绘制（FCP，First Contentful Paint）：网页的第一个可见内容（如文本或图片）显示出来的时间。通常，FCP 越快，用户体验越好。
最大内容绘制（LCP，Largest Contentful Paint）：页面中最大可视元素（如大图或标题）加载完成的时间。LCP 反映了用户对页面加载速度的感知。测量加载性能，为了提供更良好的用户体验，LCP应在页面首次加载后的2.5秒内发生。
累计布局偏移（CLS，Cumulative Layout Shift）：测量视觉稳定性，网页元素在加载过程中发生意外移动的程度，影响页面的稳定性。较低的 CLS 代表页面稳定性好，用户不容易感到元素突然跳动或移动，应保持在0.1及以下。
首次输入延迟（FID，First Input Delay）：FID 衡量的是用户首次与页面交互（例如点击按钮、点击链接或进行其他操作）到浏览器实际响应这一操作之间的时间差。简言之，FID 衡量的是网页在响应用户输入时的延迟时间。应为100毫秒及以下。
时长（TBT，Total Blocking Time）：从 FCP 到页面完成加载之间，页面被阻塞的时间。较低的 TBT 表示页面可以更快地响应用户操作。
