前端开发中的Chrome性能监控插件

多种前端开发性能监控插件

Posted by wang chong on March 17, 2019

Audits面板

Audits是性能监控中的合成监控。

所谓合成监控就是计算机可以模拟网站走一边,实现简单,可以对渲染中的每一帧进行截图。

上面选项可以选择Desktop或者Mobile进行监控,点击Run audits就可以进行监控了。

但是这个有一点不好的是,监控出来的报告是英文的,对于英文不好的来说就不易阅读。

还有一个Chrome插件叫做LighthouseAudits是一模一样的功能。 点击Generator report就可以进行监控了。

我们来对百度实验一下。

(英文….emmm,可以右键点击翻译一下)

这样就舒服多了,可以看出这个插件对性能的覆盖率是挺大的,功能也很全,以及每一项性能还提供了可优化的策略。

Performance-Analyser

这个插件可以直观的显示出网站有多少个请求,多少个域,各种渲染时间等等,并且还提供图标分析。

依然为百度为例

Page Speed

这个是比较老的一个性能监控的插件。这个插件可以检测出在性能优化那么多条例里面(雅虎军规)页面中有多少是做到的,有多少是没做到的。 点击START进行检测。

总结

性能监控的插件之多,如果选择使用主要还是要看你要去检测什么。比如说我的网站各项指标做的怎么样可以使用Audits或者Lighthouse来检测;我想查看我的网站多少个请求,各项指标的图标分析,可以使用Performance-Analyser;我想查看我的网站所践行的雅虎军规,有多少我是已经做到的,有多少没做到的可以使用Page Speed这个比较老牌的插件。