Creator 2.0.x 微信小游戏加载优化（一）：定制wx-downloader

转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/89842503

微信小游戏的环境与正常web浏览器的环境相似，但很多细节上会有所不同，同时也存在很多限制。因此微信小游戏平台下的一些优化手段需要单独拿出来，一些方案的思路会借鉴H5游戏的方案。

这里首先分享一下wx-downloader的优化，如果对于目前游戏的加载速度以及首场景打开的速度不满意的话，这个优化应该会有一些帮助。

Cocos Creator通过wx-adapter与微信小游戏进行的适配。对于一些重度游戏来说，小游戏4M首包+4M分包，总共8M的空间很难完全放下所有的资源。因此会使用到远程加载资源。参考：小游戏环境的资源管理

小游戏远程加载资源这个功能本质上即是使用微信的下载api对资源进行下载并加载的过程。接口函数为wx-downloader.js中的downloadRemoteFile方法，这个函数中使用了wx.downloadFile以及wx.saveFile这两个API

坑爹的地方就来了，注意wx.saveFile这个API，这个API虽然是异步执行的，但是它的开销相当的大，不亚于一个同步执行的复杂函数。

我们可以看到在creator2.0.9之前的wx-downloader中这一块的代码。

在下载文件到临时目录后，通过wx.saveFile将文件保存到缓存中。这里有个问题，就是我们的download请求在微信小游戏平台上最大是10，也就是说当需要下载的文件数很多时，就有可能同时调用10次wx.saveFile。这就又进一步大大的加剧了这一部分的开销。导致首场景加载的速度变得很慢。

接下来我们再看Cocos Creator2.0.9版本中，wx-downloader里面对于这一块的处理：

这里改成不直接调用wx.saveFile，改为了一个cacheAsset的函数，再看一下cacheAsset方
法：

这里改为了下载成功后，将临时目录的路径存到一个数组中，通过setTimeout，每间隔一段时间调用一次wx.saveFile缓存文件。这样的话就可以避免在同一时间多次调用wx.saveFile，从而造成额外的开销以及卡顿。

因此，如果你用的是creator2.0.9一下的版本，如果项目在加载资源时耗时比较长的话，可以尝试升级到2.0.9版本，或者是使用2.0.9的wx-downloader

但实际项目使用的过程中，我们会发现，当需要远程加载的文件数量多，且其中有一些较大的文件时，2.0.9的这个优化效果并不是很显著。

所以关于wx-downloader.js的优化并没有结束。

我们还有进一步的，更极致的优化方法。

在看最终的优化方案前，我们先看一组测试数据：

可以看到android下使用image下载图片资源的速度是最快的，ios下使用download下载资源的速度是最快的。相比较之前download+saveFile的效率都会有极大的提升。

因此我们可以找到一个比较极致的优化方案，肉戏来了：

按照不同的平台我们进行不同的处理
在Android平台的微信小游戏下：

图片资源通过Image去下载，不使用wx提供的download接口，下载完成后直接使用。后续通过downloadFile异步下载一次，下载完成后通过异步进行saveFile
非图片的资源通过download下载，然后异步缓存到目录
iOS平台的微信小游戏下：
通过download下载下来后先试用，后续通过异步的方式去缓存文件。
需要注意的是，异步缓存图片不要像上面那样通过settimeout来做，可以通过回调的方式，缓存完一个文件后再去缓存下一个文件。
另外，文件的目录尽量不要太深，也不要太多。减少不必要的mkdir的浪费。

对于大型重度的微信小游戏来说，在实际项目中，首场景加载的速度从原来的20s，优化到了5s。提升非常的恐怖，同时也证明了我们这个优化思路没有任何问题。

Creator 2.0.x 微信小游戏加载优化（一）：定制wx-downloader相关推荐

微信小游戏加载外部字体
开发微信小游戏的时候,经常会用自定义的字体,而字体库也比较大,如果放在包体里,会占用仅有的20M包体,总启动时间也会变慢.通过外部加载的方式是首先想到的思路.我们用的是LAYA引擎,引擎原生的字体加载 ...
cocos creator 3.7.1 微信小游戏发布声音效果消失了
正常将游戏构建到微信小游戏,总体上一切正常,以为大功告成,但打开声音多测试一会儿,突然发现每次音效正常一段时间后,突然就消失了!时间大约几分钟,次数也不一定,但几分钟后肯定消失,如果一直测试下去,偶尔 ...
cocos creator小游戏加载跨域头像
cocos creator小游戏加载跨域头像 // 玩家头像和名字 (防止跨域问题) cc.assetManager.downloader.downloadDomImage(avatarUrl , ...
使用 cocos creator 3.0 制作抽奖小游戏
使用 cocos creator 3.0 制作抽奖小游戏描述一个抽奖小游戏demo, 点击抽奖按钮进行抽奖, 抽完奖后该结果置灰.下一次抽奖就会跳过已经抽过的奖项. 注意: 每次点击抽奖按钮 ...
php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
（从零开始）Cocos 3.6.0 接入微信小游戏激励广告
前言鉴于目前的cocos3.6.0的教程较少,开发小游戏踩了不少坑.想写个帖子总结记录下 1.要求目前微信小游戏开通流量主的条件,是UV达到1000以上,也就是说要有至少1000个人访问过你的小游 ...
小游戏加载速度的优化
如果你正在从事小游戏开发的工作,标题里提到的这项技能我觉得是要必备的.有句话我觉得说的很正确"H5游戏的优势就是即点即玩,如果这点都做不到,就没什么优势了."虽然这项技术没什么难点 ...

Creator 2.0.x 微信小游戏加载优化（一）：定制wx-downloader

Creator 2.0.x 微信小游戏加载优化（一）：定制wx-downloader相关推荐

最新文章

热门文章