性能测试工具 推荐一款免费开源的前端 web 性能测试工具(主要测试前端渲染的性能)

William001990 · 2022年04月20日 · 最后由 William001990 回复于 2022年04月21日 · 1873 次阅读

公司在组织开展前端性能测试(主要测试前端渲染的性能),有大神可以推荐一款免费开源的,并且可以实现自动化的工具吗?
这里的前端渲染,可能更多的想发现 js、html、css,是否导致了前端渲染的压力。

共收到 10 条回复 时间 点赞

lighthouse

webpagetest

前端性能有好几个细分领域,常见的有资源加载速度(lighthouse)、不同地理位置的网络加载速度(各种测速类网站)、开始加载后白屏时间(除了录屏外不大了解还有什么工具)、运行时 FPS 等性能数据(chrome 浏览器的 Performance 选项卡里就有)。

从楼主描述的意思看,应该是最后一个?

陈恒捷 回复

1.lighthouse 生成的报告给到开发,对他们的帮助较小;
2.白屏时间,算是一个测试方向,目前好像没有好的工具……
3.在 chrome 的 performace,如何遍历多个页面呢?

dm 回复

这个用过,开发的回复是不能直观的告诉他问题出在哪

重来看雨 回复

这个和 lighthouse 类似吧

William001990 回复

额,为啥要遍历多个页面呢?你能先说明下,你到底要测试的是前端的什么性能不?

这几个方向的目的是有一定差异的

资源加载速度(lighthouse):基本目标是尽可能有效整合资源/懒加载非立即需要的资源,在网速不变的情况下,减少加载网页所需的总网络请求数(浏览器内部并行网络请求是有限制的,资源太多会导致要等前面加载完才有机会开始加载,减慢加载速度)。常用举措有资源整合和资源拆分(弄懒加载用)

不同地理位置的网络加载速度(各种测速类网站):基本目标就是加快网速,常用举措是增加 CDN 节点。

开始加载后白屏时间:这个实际是用户体验优化了。在前两者已经没有可优化的点的时候,尽量降低白屏时间。常用举措有骨架屏、懒加载等。

运行时 FPS 等性能数据:这个更多是一个界面流畅度问题的 profile 工具,即通过采集和性能及运行内容有关的数据,辅助定位性能问题。常见使用场景是界面卡顿时定位卡顿原因用。

PageSpeed Insights (by Google) 我现在就在用,很简单,很直观

陈恒捷 回复

好的,感谢,已经解决了我的疑惑

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册