ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> H5前端性能测试

齐发国际登录

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

本篇文章主要介绍了" 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.machineofchina.com/article/detail_4593318_3.html

相关图片

相关文章