前端性能测试工具

支持移动端H5在PC端远程调试,能够对具体的移动端设备进行测试

集成了page speed

提供network面板,展示瀑布流视图,各种资源清晰罗列,还提供缩略图,方便查看图片的大小、尺寸和冗余或缺失。

可模拟网速、设置device分辨率来测试实际的弱网环境显示效果

提供timeline面板,展示内存、CPU变化,FPS等性能数据等

缺点

录制后分析的一种静态分析方法,不同于fiddle等抓包工具提供实时的抓包、修改等功能

webpagetest

工具链接: https://www.webpagetest.org/

优点:

提供了首屏时间、首字节时间、全界面加载时间工具,并提供对应的时间点截图

不仅提供瀑布流视图,还提供连接视图,清晰展示了并发请求的HTTP连接以及请求资源

提供优化建议checklist,详细标出各个资源是否可优化,如:压缩、缓存、发布cdn,设置Gzip等

提供测试过程中的视频演示

缺点:

并不是专门为移动端H5测试所设计的

关注H5前端页面本身的性能,没有关注浏览器引起的内存、CPU变化,FPS等

PageSpeed Insights

工具链接:  

优点:

直观的测试结果展示,并提供优化建议

可以分别测试移动端和PC端的结果

提供了网页速度和用户体验两类的测试结果,包括字体清晰、窗口大小等用户体验结果

缺点:

只有结果,没有详细的资源数据统计

没有提供各个HTTP和request和reponse的详细数据

具体分析H5的页面情况时,3中工具可以结合一起使用

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwyxws.html