chrome做web性能分析

前言

优化网站加载速度时候，发现了一部分有用的知识点，记录于此；

要使用Chrome进行Web性能分析，可以利用Chrome开发者工具的性能面板来监测网页加载过程中的各种性能指标。以下是详细步骤：

1, 打开Chrome浏览器：确保你已经安装了最新版本的Chrome浏览器。

2, 打开目标网页：在Chrome浏览器中打开你要进行性能分析的网页。

3, 打开开发者工具：有多种方法可以打开开发者工具，最常见的方法是通过右键点击网页上的任何地方，然后选择“检查”或“审查元素”，或者使用快捷键”Ctrl+Shift+I”（Windows/Linux）或”Cmd+Option+I”（Mac）。

4, 切换到性能面板：在开发者工具中，你会看到一些选项卡，如“Elements”、“Console”、“Sources”等等。选择“Performance”（或者你可能会看到“Performance”选项卡上的一个类似鼓的图标）。

5, 开始记录性能：点击性能面板上的录制按钮（红色的圆点），开始记录网页的性能数据。你可以选择记录的时间范围，通常建议记录整个页面加载过程。

6, 操作网页：在记录期间，可以在网页上执行各种操作，如点击链接、滚动页面等，以模拟用户与网页的交互。

7, 停止记录性能：完成网页上的操作后，点击性能面板上的停止按钮（红色的方块）来停止记录性能数据。

8, 分析性能数据：现在你会在性能面板上看到网页加载过程中的各种性能指标，例如网络请求、DOMContentLoaded时间、页面完全加载时间等等。你可以在这里找到有关页面性能的重要信息。

9, 查看性能分析：你可以在图表中看到性能数据的可视化展示，帮助你理解页面加载的过程。

10, 优化：根据性能数据，你可以识别出潜在的性能问题。根据问题的类型，你可以采取相应的优化措施，例如优化代码、减少网络请求、使用缓存等等，以提升网页的加载速度和用户体验。

名称	描述
Elements 面板	可以查看 DOM 结构、编辑 CSS 样式，用于测试页面布局和设计页面。
Console 面板	可以看成是 JavaSeript Shell，能执行 JavaScript 脚本。通过 Console 还能和页面中的 JavaScrip 对象交互。
Sources 面板	1. 查看 Web 应用加载的所有文件 2. 编辑 CSS 和 JavaScript 文件内容 3. 将打乱的 CSS 文件或者 JavaScript 文件格式化： 4. 支持 JavaScript 的调试功能： 5. 设置工作区，将更改的文件保存到本地文件夹中
NetWork面板	展示了页面中所有的请求内容列表，能查看每项请求的请求行、请求头、请求体、时间线以及网络请求瀑布图等信息
Performance 面板	记录和查看 Web 应用生命周期内的各种事件，并用来分析在执行过程中一些影响性能的要点
Memory 面板	用来查看运行过程中的 JavaScript 占用堆内存情况，追踪是否存在内存泄漏的情况等
Application面板	1. 查看 Web 应用的数据存储情况 2. PWA 的基础数据：IndexedDB: Web SQL：本地和会话存储：Cookie：应用程序缓存：图像：字体和样式表等
Security面板	显示当前页面一些基础的安全信息
Audits 面板	会对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议 Layers 面板展示一些渲染过程中分层的基础信息。
Layers 面板	展示一些渲染过程中分层的基础信息。