加拿大28

<small id='n5ofv'></small><noframes id='n5ofv'>

  • <tfoot id='n5ofv'></tfoot>

      <legend id='n5ofv'><style id='n5ofv'><dir id='n5ofv'><q id='n5ofv'></q></dir></style></legend>
      <i id='n5ofv'><tr id='n5ofv'><dt id='n5ofv'><q id='n5ofv'><span id='n5ofv'><b id='n5ofv'><form id='n5ofv'><ins id='n5ofv'></ins><ul id='n5ofv'></ul><sub id='n5ofv'></sub></form><legend id='n5ofv'></legend><bdo id='n5ofv'><pre id='n5ofv'><center id='n5ofv'></center></pre></bdo></b><th id='n5ofv'></th></span></q></dt></tr></i><div id='n5ofv'><tfoot id='n5ofv'></tfoot><dl id='n5ofv'><fieldset id='n5ofv'></fieldset></dl></div>

          <bdo id='n5ofv'></bdo><ul id='n5ofv'></ul>

          1. <li id='n5ofv'><abbr id='n5ofv'></abbr></li>
          2. 您好,欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题
            ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
            当前位置:首页 >> 网页制作 >> web前端 >> H5前端性能测试

            H5前端性能测试(1/3)

            来源:网络整理     时间:2018-10-17     关键词:

            本篇文章主要介绍了" H5前端性能测试",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 一般说到性能测试,加拿大28首先想到的是接口(服务端压测),但是如果服务端接口性能ok,但是当你的页面在浏览器/app native运行时,性能仍然不太理...


                  一般说到性能测试,加拿大28首先想到的是接口(服务端压测),但是如果服务端接口性能ok,但是当你的页面在浏览器/app native运行时,性能仍然不太理想。这时候就需要对前端进行性能测试。由于H5可跨平台,开发成本低,可随时上线,且试错成本低,可轻量的触达用户提供便捷的服务等优点,越来越受到追捧。但它也有缺点那就是无法将数据存储在本地,性能相对较差(例如3D效果,频繁的输入输出等等)所以做H5性能测试尤为重要。若H5是嵌入在navtive App中,则需要先在移动设备端进行专项测试(内存占用测试、弱网测试、流量测试、CPU测试、电量测试、帧率测试等)若发现CPU测试和帧率测试等等不达标时,也可借助chrom DevTools Performance来分析瓶颈,这里主要是讲述chrom Devtools Performance性能测试。

               HTML5可以使用chrom Devtools Performance来分析运行时的性能表现。

            • 如何使用performance
                  1. 启动chrom浏览器-->打开新的无痕浏览窗口(在无痕浏览窗口浏览的页面数据,历史url,搜索信息,cookie信息不会被保存。需要把不用的扩展程序禁用,以防这些扩展程序影响测试结果).如图所示:

                 2. 在无痕浏览窗口中访问demo

                 3. 按F12/Command+Option+I(mac)/Control+shift+I(windows,Linux)来打开devtools-->选择“Performance”Tab

                 4. 模拟移动设环境(CPU和Network)。移动端设备CPU一般比台式机和笔记本弱很多,且网速也可能比PC端有线网速慢。可以用CPU控制器(CPU Throttling)来模拟移动端设备CPU;用Network来模拟移动端设备的网络。

                  操作步骤:

                            a. 在DevTools中-->点击performancer tab。

                            b. 选上Screenshots checkbox(默认是已被选上的)。这个是用来测试有动画效果时进行截图

                            c.点击Capture Settings--> 设置CPU,选择4*slowdown,这是指模拟PC端1/4的低速CPU(即移动                       设备的CPU只有PC端的1/4)。

                           d. 点击Capture Settings--> 设置Network



                 5.设置demo

            相关图片

            相关文章