• Chrome Devtools

    • 优点：
      • 支持移动端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

    • 工具链接： http://www.googlespeed.cn 
    • 优点：
      • 直观的测试结果展示，并提供优化建议
      • 可以分别测试移动端和PC端的结果
      • 提供了网页速度和用户体验两类的测试结果，包括字体清晰、窗口大小等用户体验结果
    • 缺点：
      • 只有结果，没有详细的资源数据统计
      • 没有提供各个HTTP和request和reponse的详细数据

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

版权声明：本文为syw20170419原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/syw20170419/p/12705788.html