Lighthouse && DevTools

工欲善其事，必先利其器。要做好性能优化，就要先了解怎么去监控性能优化，本文会着重讲解性能优化的工具使用：`Chrome DevTools` && `Lighthouse.`

Chrome DevTools 和 Lighthouse是两个强大的开发者工具，经常用于网页开发和性能优化。在性能优化模块，是非常好用的工具。

Chrome DevTools

Chrome DevTools是Google Chrome浏览器内置的网页开发工具，通常点击 F12 或者 鼠标右键单机然后点击 检查 就可以看见了。

为什么是Chrome，而不是其他？

前端开发者在开发过程中更倾向于Chrome作为开发浏览器的原因有很多，主要原因大概集中在以下几点：Chrome的性能、开发工具、标准兼容性等。这里我们简略介绍一下：

强大的 开发者工具 （Chrome DevTools）

• 元素检查和编辑：实时查看和修改HTML和CSS。
• JavaScript 控制台：调试和运行JavaScript代码。
• 网络监视：分析和调试网络请求和响应。
• 性能分析：评估页面加载时间和运行效率。
• 内存 快照：检查内存使用情况，帮助识别内存泄漏。
• 应用管理：管理Web应用的数据存储（如localStorage、sessionStorage、IndexedDB等）。

优越的性能和速度

了解Chrome的同学们都知道Chrome以其快速的JS引擎（V8引擎），能够高效的执行JS代码，他的性能和速度让开发或者是体验的过程都更加流畅。

频繁的更新和新特性

Google对于Chrome的更新很频繁，这并不是坏事。它能够及时的引入Web新的标准和特性。

那么借助DevTools我们可以做什么？

先来一张截图：

这里从左到右依次是：

1. Element面板

• 查看和编辑HTML和CSS：可以直接在这里修改网页的HTML和CSS样式，对于前端初学者来说是个很好用的工具。
• 查看盒子模型：可视化展示盒模型的content、border、margin和padding四个部分

2. Console 面板

• 执行Js代码：使得，可以直接在这里输入执行Js代码。
• 日志记录：输出一些调试信息、错误和警告信息。

3. Sources 面板

• 调试JS：设置断点、监视变量变化、调用堆栈
• 编辑和保存文件：可以直接便捷Js、Css和Html文件并保存更改。

4. Network 面板

• 监控网络请求：查看所有网络请求的详细信息，包括请求类型、状态、时间、大小和响应数据。
• 性能分析：分析页面加载时间，识别瓶颈和优化机会。
• 网络速度模拟：模拟不同网络条件（如 3G、4G 等）下的页面加载情况。

5. Performance 面板

• 性能记录：记录页面加载和交互过程的性能数据。
• 帧率分析：检查页面的帧率，识别导致帧率下降的因素。
• CPU 和内存使用：分析页面的 CPU 和内存使用情况，识别性能问题。

6. Memory 面板

• 内存快照：捕获页面的内存快照，分析内存使用情况。
• 内存泄漏检测：帮助识别和修复内存泄漏问题。
• 分配时间线：查看内存分配随时间变化的情况。

7. Application 面板

• 管理存储：查看和管理本地存储、会话存储、IndexedDB、Web SQL、Cookies 等。
• 服务工作者和 PWA：调试和管理服务工作者，检查渐进式 Web 应用（PWA）相关信息。
• 缓存和清除数据：管理应用缓存，清除存储数据。

8. Security 面板

• 安全概览：检查页面的安全状态，包括 HTTPS、证书和混合内容。
• 问题诊断：识别和解决安全问题。

9. Lighthouse 面板

• 性能审计：生成页面的性能、可访问性、SEO 和最佳实践报告。
• 优化建议：提供优化页面性能和质量的具体建议。

可以看到这里有很多的面板，完全足够开发者来使用。我们接下来主要讲解LightHouse面板

LightHouse

这里就用百度的首页来展示。

LightHouse该怎么用？

1. 生成性能报告

• 运行 Lighthouse：在 Chrome DevTools 中打开 Lighthouse 面板，点击"Generate report"按钮，Lighthouse 将自动分析当前页面并生成一个详细的性能报告。你也可以通过命令行或 Node 模块运行 Lighthouse。

2. 理解 Lighthouse 报告

Lighthouse 报告分为几个关键部分，每个部分都有具体的性能指标和建议：

Performance（性能）

• 关键性能指标：包括页面加载时间、首次内容绘制（FCP）、最大内容绘制（LCP）、速度指数（Speed Index）、交互准备时间（TTI）、总阻塞时间（TBT）等。这些指标衡量页面在不同阶段的表现。
• 诊断信息：提供详细的性能诊断信息，如长任务、无效的 JavaScript、未压缩的资源等。
• 建议：基于分析结果，Lighthouse 提供具体的优化建议，如延迟加载非关键资源、减少 JavaScript 执行时间、启用文本压缩、优化图片等。

3. 具体的优化措施

根据 Lighthouse 报告中的建议，进行以下具体的优化措施：

减少页面加载时间

• 压缩和优化资源：使用 Gzip 或 Brotli 压缩 JavaScript、CSS 和 HTML 文件。优化图片大小和格式（如使用 WebP 格式）。
• 延迟加载非关键资源：使用异步加载（async）或延迟加载（defer）JavaScript，延迟加载不在视口内的图片和视频。
• 使用****内容分发网络 （ CDN ） ：通过 CDN 提供静态资源，减少服务器响应时间和网络延迟。

提高渲染性能

• 最小化重绘和回流：优化 CSS 和布局，减少对 DOM 的频繁修改和复杂的布局计算。
• 使用硬件加速：通过 CSS 的 transform 和 opacity 属性启用 GPU 加速，减少 CPU 负载。

优化 JavaScript

• 减少 JavaScript 体积：删除未使用的代码，拆分和按需加载 JavaScript 模块（代码分割）。
• 优化第三方代码：限制和优化第三方脚本的使用，避免阻塞渲染。

提升用户体验

• 优化首屏加载时间：优先加载和渲染首屏内容，延迟加载其他部分。
• 提高可访问性：确保页面在不同设备和网络条件下都能快速加载和顺畅运行。

4. 持续监测和优化

• 定期运行 Lighthouse：在开发和发布过程中，定期运行 Lighthouse 进行性能测试和优化，确保持续改进。
• 集成到 CI/CD 流程中：将 Lighthouse 集成到持续集成/持续交付（CI/CD）流程中，自动化性能测试，及时发现和解决性能问题。

使用展示：

点击Analyse page load之后，就会生成一份完整的报告。

建议大家去动手实践一下，

这个报告会给出总体评分，随后逐个分析。

我们能利用的LightHouse功能其实主要的就是根据报告去优化网页，包括但不限于：SEO优化、性能优化、资源优化、网络优化等等。**