• H5--性能测试(PageSpeed Insights )


    中文网站(不需要翻墙): http://www.googlespeed.cn

     

    主要可实现:

      1、测试手机与电脑打开的速度对比。

      2、详细的测试结果

      3、直观的统计数据,查看页面的共xx个请求、总共大小、image、script、font等等各占多少个请求数量及大小。

    使用总结:

    (1)页面的显示介绍如下截图:

         

     

    二、具体的使用介绍

    1、分类介绍

    (1)移动设备:指的是在手机上打开此页面的测试结果

    (2)桌面设备:指的是电脑打开此页面的测试结果

     

    2、功能使用介绍(默认加载的是第一页的内容

    (1)分析:在文本框中输入需要测试的链接,点击”分析“等待执行完成即可看到测试的数据

      

    (2)测试结果的分析

      1、实验室数据:

        这里记录的数据只是参考,不作为我们查看的重点。

      

       2、优化建议:

        我们关注的部分,这里的数据具体可跟开发沟通下,根据这里记录的结果查看参考价值有多大,是否适合自己的项目去做优化

        

      3、诊断结果:

        可作为我们重点关注的部分。这里有我们测试主要去查看的数据。

        

          

     

    性能分析说明与解决方案:

    《1》采用高效的缓存策略提供静态资源:此处标注了 45项资源,也就意味着当前的这个页面并未做缓存。

      要求:一般的页面都会做缓存,避免再次请求时的耗时过大

      

     

    《2》Keep request counts low and transfer sizes small中的Image数量过大。意味着这个页面首次在加载时一次加载了第一页所需的所有图片

      要求:一般可做懒加载,当页面滑动下去时在加载出图片,已此来降低首次请求时的时间过长。

     

    《3》other:此处记录的other为5。跟开发沟通后的结果是:此处本可将后端去处理的请求放在了前段在处理,因此在耗时上也有一定的增加。

      要求:

      <1>一般为接口请求。可以对照项:用浏览器打开分析的链接。右键”检查“---》network---》XHR,查看请求的数量是否与other统计的一致。

      <2>不应该把过多的请求处理放在前段去做,否则会耗时太多。可以将这些处理放在后端实现。

      

     

    《4》Script和Stylesheet:可以看到Script为7,Stylesheet为0,跟开发沟通后的结果是CSS的样式也写在了JS中,并未做分离。

       要求:一般情况下Script和Stylesheet会隔离开写。在页面加载时会优先加载CSS,再次加载js脚本。已此来节省时间

      

    《5》注意点:虽加载此页面时你看到了此页面未使用的脚本或者样式。但是此部分内容可能是公共项,因此同样会加载出来。

     

    重要提示:

    1、将测试的结果可与对应的开发沟通。查看测试结果和优化项是否适合你们的项目。并且已此来做参考项优化代码,提升页面加载速度

     2、页面的加载速度相关连性:网络的带宽(2G、3G、4G)、后端的慢请求、前段或者客户端工程师实际可优化的项。此3个内容加起来决定着一个页面的请求加载速度。

     

  • 相关阅读:
    CSS的三种基本框架
    使用scrapy框架做赶集网爬虫
    JQuery将form表单值转换成json字符串函数
    Bootstrap Modal 使用remote从远程加载内容
    Java获取指定包名下的所有类的全类名的解决方案
    Linux下安装解压版(tar.gz)MySQL5.7
    Log4j2使用笔记
    Log4j使用笔记
    JavaWeb开发中采用FreeMarker生成Excel表格
    Linux下安装jdk+maven +git
  • 原文地址:https://www.cnblogs.com/syw20170419/p/11189728.html
Copyright © 2020-2023  润新知