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

三月 4, 2019 41 623 4 分钟

浏览器开发工具提供了一种用于检查和调试网页和 Web 应用的强大方法

1. 覆盖工具

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

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

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

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

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

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

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

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

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

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

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

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

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

参考文档：

广告位招租

Power by Node.js + Nuxt.js，由腾讯云提供服务, 已经稳稳地存活了 8年95天