web性能优化之浏览器开发者工具

1. 覆盖工具

使用覆盖工具查找未使用的 JavaScript 和 CSS 代码，以加快页面加载速度并减少移动用户的手机网络数据。

现在很多项目都使用各种第三方库，就拿我的网站来说，使用了Element-ui库，通过覆盖工具可以查看有哪些代码没有用到，然后通过按需引入需要的组件来减少未使用代码的比率。

2. CSS概述工具

使用 CSS 概述工具优化 CSS 样式。

可以查看有哪些无效的CSS样式以及元素数量等

3. 内存工具

3.1. 任务管理器

任务管理器：Shift + Esc，查看内存、CPU、GPU内存等资源占用情况

3.2.内存工具

查找影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收

3.3. 分离元素工具

使用 分离元素 工具查找浏览器无法垃圾回收的分离元素，并找到仍在引用分离元素的 JavaScript 对象。 通过更改 JavaScript 以释放 元素，可以减少页面上分离的元素数。

4. 网络工具

检查网络活动，可以查看资源加载的时间、传输的大小、使用的协议、使用有缓存或压缩等。

5. 性能检测器工具

获取网页运行时性能的实时视图，如下方的示例可以看到，页面在频繁进行布局和样式计算。

Sluggish Animation

6. 性能工具

分析运行时性能，可以查看页面的响应、动画和空闲阶段

这和第5点是同一个例子，使用性能工具审计也可以看到“重新计算样式”和“布局”耗时最长。

7. 渲染呈现工具

用于查看具有不同显示选项或视觉缺陷的网页的外观。

可以打开帧渲染统计信息查看页面FPS，打开核心页面指标查看页面加载渲染的性能指标。

参考文档：

• 使用覆盖工具查找未使用的 JavaScript 和 CSS 代码 - Microsoft Edge Development | Microsoft Learn
• 使用 CSS 概述工具优化 CSS 样式 - Microsoft Edge Development | Microsoft Learn
• 修复内存问题 - Microsoft Edge Development | Microsoft Learn
• 检查网络活动 - Microsoft Edge Development | Microsoft Learn
• 分析运行时性能入门 - Microsoft Edge Development | Microsoft Learn
• 使用性能监视器工具测量页面的运行时性能 - Microsoft Edge Development | Microsoft Learn