一、概要

在讨论优化工具时，主要涉及两个核心领域：「性能评估工具」和「优化工具」。以下是相关工具的简要介绍：

1. 性能评估工具
   • Lighthouse
   • PageSpeed
   • YSlow
2. 优化工具
   • Chrome DevTools，包括：
     • Network
     • Performance
     • Show Third Party Badges
     • Block Request URL
     • Coverage
     • DOM
     • Rendering
     • Layer

二、Lighthouse

1. 安装
   • 进入 Chrome 设置，选择“更多工具”，然后打开“扩展程序”
   • 在 Chrome 网上应用店搜索并安装 Lighthouse
2. 生成报告

   报告是评估网站性能的重要依据，适用于各种类型的网站。我们将后续讨论如何设定合理的性能指标。

3. 优化建议

   Lighthouse 的优势在于它不仅指出问题，还提供解决方案。

三、PageSpeed

1. 使用与分析报告

四、Chrome DevTools - Network

1. 重点关注 Network 中的三个关键点
2. Timing 是优化的关键工具，其中 TTFB（首次字节时间）是判断服务器和网络状况的重要指标。

五、Chrome DevTools - Performance

1. 概述与构成
2. Performance 面板由四个部分组成，包括控制面板、Overview、火焰图和总览。
3. Overview 详解
   • FPS（每秒帧数）
   • CPUCPU 资源消耗
   • NET 资源加载时间
   • 注意颜色对应不同资源类型
4. 小技巧：使用无痕模式以减少 Chrome 扩展程序的干扰
5. 火焰图
6. Network 和 Timings 提供了优化的方向

六、Chrome DevTools - Show Third Party Badges

用于排查第三方资源对网站性能的影响。

1. 测试站点
2. 打开控制面板
3. 检查 Network 中的彩色标志以识别问题资源

七、Chrome DevTools - Block Request URL

通过阻止请求 URL 来排查页面性能问题。

1. 选择资源，右键，然后点击“Block Request URL”

八、Chrome DevTools - Coverage

展示代码覆盖率，帮助移除未使用的代码。

1. 打开控制面板
2. 输入“Show Coverage”
3. 分析文件使用情况

九、Chrome DevTools - DOM

优化 DOM 节点数量以提高性能。

1. 查看节点数和最大深度
2. 避免过多查找和创建 DOM 节点

十、Chrome DevTools - Rendering

通过 Rendering 选项可视化页面渲染过程，减少无效重绘。

1. 打开 Rendering 选项
2. 刷新页面

十一、Chrome DevTools - Layer

检查图层关系以优化渲染效果。

1. 打开控制面板，选择“Layer”选项

十二、总结

利用优化工具，可以轻松定位网站问题并进行有效优化，确保网站高效运行。优化工作其实并不复杂。