H5前端性能测试

      一般说到性能测试，我们首先想到的是接口（服务端压测），但是如果服务端接口性能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

             为了使得这个demo有相对统一的运行表现（不同的机器性能有差异）。这个demo提供了自定义功能，用来确保这个demo的统一表现。

           操作步骤如下：

                 a. 点击demo上的【Add 10】这个按钮直到你能很明显的看到小方块移动变慢，在性能比较好的机 器上可能要多点击几次这个按钮。

                 b. 点击【Optimeze】按钮，会发现小方块会变的更快而且动画变得平滑。

                 c. 点击【un-optimeze】按钮，小方块又会变的更慢。

    6. 记录运行时性能表现

       在之前的 DEMO中，当运行优化模式的时候，小方块移动地非常快。为什么呢？明明2个模式都是移动了同样数量的小方块而且移动的时间也一样。那么现在我们在Performance界面下录制所发生的一切，并且分析下这个记录，从而找到非优化模式下的性能瓶颈。

      操作步骤如下：

        (1) 在DevToolsk ,点击 "Record"小图标，这时候DevTools就开始录制各种性能指标。录制时等待几分钟。

             （2）点击录制窗口中的【stop】，DevTools停止录制，并开始处理数据，完全处理数据后会显示性能报告。

       

 7. 通过各项指标分析报告

     一旦得到了页面的性能表现报告，那么就可以用它来分析页面的性能，从而找到性能瓶颈。

     (1) FPS（frame per second）是用来分析动画的一个主要性能指标。能确保在60fps的话，那么用户体验是不错的。如下图所示，观察FPS图表，如果发现一个红色的长条，那么说明这些帧存在严重问题，有可能导致非常差的用户体验。一般来说，绿色的长条越宽（越高），说明FPS越高，用户体验越好。

     （2）就在FPS图表下方，看到的就是CPU图标，如下图所示。在CPU图表的各种颜色与Summary面板中的颜色相互对应的， Summary面板就在Performance面板的下方。CPU图表中的各种颜色代表着在这个时间段内，CPU在各种处理上所花费的时间。如果你看到了某个（除Idle）占用了大量的时间，那么这可能就是一个可以找到性能瓶颈的线索。

    （3）把鼠标移动到 FPS，CPU或者NET图表之上，DevTools就会显示这个时间点界面的截图。左右移动鼠标，可以重发当时的屏幕录像。这个叫scrubbing，他可以用来分析动画的各个细节。

   (4) 在Frams图表中，把鼠标移动到绿色条状图上，DevTools 会展示这个帧的FPS。每个帧可能都在60以下，都没达到60的标准。如图所示：

    PS：chrom可以打开实时的FPS面板。操作步骤如下：

       a.  按下Command+Shift+p(Mac)/Control+Shift+p(windows,linux)打开命令菜单

       b. 输入Rendering，选择 show frames per second(FPS) meter,FPS实时面板就出现在页面的右上方。
 

 8. 定位瓶颈

      现在已经确定到这个的动画性能表现不太好，下一步就需要找到为什么。

     (1) 注意Summary面板，可以看到CPU花费了大量的时间在rendering上。那么可以可能减少rendering时间来提高性能。如下图所示：

   (2) 展开main图表，DevTools展示了主线程运行状况，X轴代表着时间。每个长条代表着一个event，长条越长就代表着这个event花费的时间越长。Y轴代表了调用栈。在栈里，上面的event调用了下面的event。

    PS：

       a. 若在事件的长条右上角出现红色小三角，说明这个事件是存在问题的，需要特别注意。如下图所示，若双击reveal这个链接，它会高亮触发这个事件的event。如果点击了app.js:94这个链接，就会跳转到对应的代码处。

 

      b. 在app.update这个事件的长条下方，有很多被触发的紫色长条。如果放大这些事件长条，可以看到每个长条都带有红色小三角。点击其中一个紫色事件长条，Devtools会在Summary面板里显示了更多关于这个事件的信息。在Summary面板中点击app.js:70链接，DevTools会跳转到需要优化的代码处。如下图所示：