Chrome Performance性能分析面板使用

最近做的项目都是内嵌egret游戏,想在移动端监测下它的性能,于是就开始了对Performance的探索:

一、使用

  打开控制台,一顿操作:

网络选择Fast 3G,模拟手机普通3G环境,虽然现在大家都用4G了,然后勾选Memory,查看内存,点击小圆点开始录制

不看不知道,一看吓一跳,我选取的是游戏加载的时间,然后,点击summary,可以查看概况:

可见:在3G网络这个游戏的加载时间长达10s!!!

 我们来分析下为什么要这么久,通过这个饼状图可见,‘闲置’了大部分时间,其实这里的闲置不是浏览器就真的在偷懒了,而是在加载其他数据。

那怎么解决呢?

别急,我们先对比下正常网络的情况,毕竟3G网络的手机并不是我们的主要客户

 

可见游戏加载的时间在1s以内,可以接受。

但是,在游戏loading的时候黑屏用户肯定也不好受,而且3G网络loading的时间会长达10s的,这种黑屏是绝对不可以接受的。因为可以说网站的加载时间每多1s,用户就会流失10%,可见,在3g网络下,长达10s的黑屏加载时间刚好可以把所有用户赶走。

所以可以用egret写个loading界面,游戏加载的时候,用户体验就会好很多,用户至少知道这个网站在加载,而不是崩掉了。具体怎么写,以及怎么处理写了loading页面后还是会有一瞬间的黑屏问题,我在下一篇文章就会写到,这篇还是先好好研究下这个性能分析面板怎么用。

二、分析

如果要分析性能肯定要知道这个面板的各个属性,具体可见《全新Chrome Devtool Performance使用指南》

我们可以通过这个来分析下刷新页面的时候会发生什么:

 

 刷新页面的时候一般都会出现这个红色的三角形,我们双击这个三角形就可以看到在刷新页面过程中,解析HTML、执行script、渲染等分别花销的时间。

 我们点击蓝色那条Parse HTML ,就会发现,其实它Loading的时候才6ms,真正费时间的是解析HTML的所需要的的js代码,因为当浏览器要解析js的时候,肯定要先下载js,然后编译js,然后才是执行,所以说js也是昂贵的。

原文地址:https://www.cnblogs.com/caoshufang/p/12669307.html