本篇文章主要介绍了" H5前端性能测试"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下：
一般说到性能测试，我们首先想到的是接口（服务端压测），但是如果服务端接口性能ok，但是当你的页面在浏览器/app native运行时，性能仍然不太理...
(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会跳转到需要优化的代码处。如下图所示：
以上就介绍了 H5前端性能测试，包括了方面的内容，希望对web前端有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_4593318_3.html
