微信小游戏性能优化

原创

EchoROne

修改于 2023-11-06 20:34:43

2.5K0

修改于 2023-11-06 20:34:43

文章被收录于专栏：玩转大前端玩转大前端

| 导语【整合cocos博客、微信小游戏及laya性能优化官方文档总结并实践】业务中实践cocos导出的微信小游戏性能优化案例，希望对大家有所帮助~

一、背景

业务中实践cocos导出的微信小游戏性能优化优化前后对比

绿色表示提升，可看出图中优化前后的对比，运行性能提升了10个点，其中FPS提升了26.3%，还是比较显著的。下面具体介绍优化过程。

二、性能优化过程（通用）

参考 laya官方性能优化指南：https://ldc2.layabox.com/doc/?nav=zh-ts-2-2-1 cocos性能优化博客：https://new.qq.com/omn/20210413/20210413A04JEH00.html 微信小游戏性能优化指南：https://developers.weixin.qq.com/minigame/dev/guide/performance/perf-overview.html

先介绍比较通用的项目级的优化策略，是整合cocos博客、微信小游戏及laya性能优化官方文档总结并实践的。

1、场景优化策略

操作：自定释放资源

cocos编辑器的属性检查器可以选择自动释放资源，可以一定程度上降低Draw Call。

好处：降低 Draw Call

Draw Call 是指渲染引擎在每帧中向 GPU 发送的绘制命令数量。每个 Draw Call 都会触发一次 GPU 的绘制操作，包括设置渲染状态、绑定顶点数据、纹理切换等。过多的 Draw Call 会导致 GPU 资源的频繁切换和重复设置，从而降低游戏的渲染性能。

当资源没有正确释放时，引擎可能会继续绘制未使用的资源，导致不必要的 Draw Call。例如，如果一个场景中有大量的未使用的图片资源，但这些资源仍然被加载到 GPU 内存中并进行绘制，就会增加额外的 Draw Call 数量。

通过及时释放不再使用的资源，可以减少不必要的 Draw Call，从而提高游戏的渲染性能。合理管理资源，避免不必要的 GPU 资源切换，有助于减少 Draw Call 数量，提升游戏的帧率和流畅度。

2、图集批次合并

1）静态图集

操作：自动图集

自动图集资源是Cocos Creator中的合图功能，可以将多个碎图打包成一张大图(同前端的雪碧图概念）。它类似于Texture Packer，可以通过创建自动图集资源来配置合图的相关参数。自动图集资源会以当前文件夹下的所有SpriteFrame作为碎图资源，并提供各种配置选项，包括最大宽度、最大高度、间距、旋转、输出大小、算法、输出格式等。配置完成后可以预览打包结果，包括已打包的图集和未能打包的碎图。在构建项目时，自动图集资源会生成真正的图集文件。

使用Cocos Creator自带工具的自动图集配置 https://docs.cocos.com/creator/2.0/manual/zh/asset-workflow/auto-atlas.html 。

在资源管理器中右键，可以在如下菜单中找到新建 -> 自动图集配置的子菜单，点击菜单将会新建一个类似AutoAtlas.pac的资源。

点击preview可查看生成的打包图集，注意保存。

自动图集资源将会以当前文件夹下的所有SpriteFrame作为碎图资源，以后会增加其他的选择碎图资源的方式。如果碎图资源SpriteFrame有进行配置过，在打包后重新生成的SpriteFrame将会保留这些配置。

好处：

自动图集资源的使用可以减少渲染调用次数、纹理切换次数，降低内存占用，提高纹理压缩效果，从而优化应用程序的性能，提升用户体验。特别是在移动设备等资源受限的环境下，自动图集资源的优化效果更为显著。

2）动态图集（包括文字）

操作：设置BITMAP

动态合图的最佳实践如下：

对于不常变化的静态文本，例如UI界面的标题、属性栏的固定文本，可以将其设置为BITMAP模式，并缓存到动态图集中。这样连续的UI节点可以进行动态合批。为了最大限度地合并界面中的Label节点，可以将这些静态文本节点放在最上层，并确保它们连续排列，避免Label节点打断批次合并，同时合并连续的Label节点可以降低Draw call。
对于频繁变化的文本，例如游戏中常用的倒计时，使用BITMAP模式会导致大量的数值文本占用动态图集空间。然而，这些文本只使用了有限的字符，例如数字0-9。为了避免频繁绘制，可以将这些文本设置为CHAR模式，将单个字符绘制并添加到字符图集中。这样一次缓存之后，后续所有的数字组合都可以从已缓存的字符中获取，从而提高性能。如果连续的Label节点都使用CHAR模式，并且使用同一张字符图集，那么这些节点也可以进行批次合并。

在使用Label组件时，可以根据需要选择合适的Cache Mode（缓存模式）来优化性能。根据文本内容的特点和更新频率，可以选择NONE、BITMAP或CHAR模式，并将文本绘制到相应的动态图集或字符图集中。这样可以更好地利用动态图集的空间，减少Draw call的调用次数，提高性能表现。

总结来说，动态合图的最佳实践是根据文本的特点和更新频率选择合适的Cache Mode，并将文本绘制到对应的动态图集中。通过合理利用动态图集，可以降低Draw call的数量，提高UI渲染性能。

好处：降低 Draw Call

优化前

优化后

最好还是使用位图字体（bmpfont (.png + .fnt 文件）），几个字母 + 图片，体积远远小于一个完整的字库（系统字体也是这样）。

3、prefab优化

操作

在 Prefab 的属性检查器中，我们可以看到优化策略这个选项。

好处：提升加载性能

这个也需要我们根据实际的使用情况进行选择。当我们选择“优化多次创建性能”这个选项时，Prefab 加载后会进行一个预处理的操作，这个预处理其实就是动态生成一些 Prefab 的实例化代码，并把这些代码交给 jit 去进行优化。这样在实例化时的耗时将会大大减少，相应的，在 load 时的耗时会有所增加。当我们选择“优化单次创建性能”这个选项时，Prefab 加载后会跳过预处理的步骤，这样在加载时的耗时会减少很多，但实例化时的耗时会增加。例如一些固定 UI 界面，用于方便加载场景或者进行功能划分，通常会做成 Prefab，这种 Prefab 只会加载一次的，就可以选择这个选项，提升加载的性能。

需要注意的有一点：由于微信小游戏平台禁用了动态加载代码，类似 eval 这些不能使用，因此优化策略这个选项在微信小游戏平台是无效的。

4、代码体积

操作：

【项目设置】-【模块设置】，只打包必要模块即可。后查看cocos2d-js-min.js体积。

引擎：把不要的模块去掉就可以，需要知道哪些模块是占体积多的。物理引擎，能不用的模块，就不用。

好处：减小代码体积，提升加载性能

5、资源纹理压缩

参考 https://forum.cocos.org/t/topic/106919

在cocos creater里面进行简单的配置，就可以在打包小游戏的过程中把图片进行纹理压缩。批量压缩参考cocos社区提供的脚本：https://www.chuyouxiang.com/archives/760 实测有bug，建议用pngyu压缩即可

6、减少try catch的使用

项目中尽量减少 try catch 的使用，被 try catch 的函数执行会变得非常慢。

说法来源于laya官方的性能优化建议：https://ldc2.layabox.com/doc/?nav=zh-ts-2-2-5
网上也有很多人探讨，建议看下这篇文章：https://cloud.tencent.com/developer/article/1717112
简单概括是出现异常的时候就会变慢将近200倍，原因是catch捕获错误时会创建销毁变量，如果放在性能关键的循环中就会导致性能问题

7、垃圾回收

小游戏中，JavaScript 中的每一个 Canvas 或 Image 对象都会有一个客户端层的实际纹理储存，实际纹理储存中存放着 Canvas、Image 的真实纹理，通常会占用相当一部分内存。每个客户端实际纹理储存的回收时机依赖于 JavaScript 中的 Canvas、Image 对象回收。在 JavaScript 的 Canvas、Image 对象被回收之前，客户端对应的实际纹理储存不会被回收。通过调用 wx.triggerGC() 方法，可以加快触发 JavaScriptCore Garbage Collection（垃圾回收），从而触发 JavaScript 中没有引用的 Canvas、Image 回收，释放对应的实际纹理储存。但 GC 具体触发时机还要取决于 JavaScriptCore 自身机制，并不能保证调用 wx.triggerGC() 能马上触发回收

使用场景：

建议在每局游戏开始或结束触发一下。
配合wx.onMemoryWarning 监听内存告警事件使用
在场景切换的时候主动调用 wx.triggerGC

8、减少 Mask 组件数量

由于 Mask 组件需要在 stencil 和 content 前后都添加修改 gl 状态的 render command，因此使用 Mask 会打断我们的 DrawCall 批处理。对于一些特殊的显示，例如圆角的 icon 等，如果条件允许，尽量不要使用 Mask 组件来进行处理，而是通过对资源进行处理达到同样的效果。目前 Mask 组件、Spine 组件、DragonBone 组件都会打断批处理，在节点结构上我们要避免被打断的情况发生。

9、借助cocos插件

YH Multi UI：https://forum.cocos.org/t/topic/134846 可以不用关心怎么去实现，怎么去优化，你直接用，自然DC就降下来了！而且支持 一键转换.

三、性能优化过程（代码逻辑）

业务中的游戏叫球生之路，是一款挡板接球撞击消除砖块的游戏，还有buff可以分裂多球

以下针对游戏代码逻辑的角度做优化：

1、游戏中多球碰撞检测

1）球到一定数量就不要再增加目前是300做阈值，对象池初始节点数为50=》改成阈值200，初始200 2）看看碰撞体之间，有没有多余的判断，比如球跟球之间是否可以取消

2、首页关卡数据展示

1）远程获取

将关卡数据存放远程，而不是大文件本地存储，可以降低代码体积，提升加载性能 2）分页展示

分页展示+懒加载，可以减小服务器压力，缩短请求耗时，提升加载性能

四、测试性能工具

1. cocos 浏览器运行查看调试信息

其中drawcall可作为初步优化效果的重要依据

2. 微信小游戏真机调试工具

参考 https://developers.weixin.qq.com/minigame/dev/guide/performance/perf-action-memory-dev-profile.html

1）微信开发者工具Performence与Memory

微信开发者工具中内置了Google Chrome DevTools 工具, DevTools可以帮助开发人员即时编辑页面并快速诊断问题，最终可以帮助开发人员更快地构建更好的小游戏。

2） Android真机性能工具

微信Android端自身集成了三种内存分析工具，分别是性能监控面板、Heap Snapshot、V8-CPU-Profile。开发者可通过三者监控Android真机环境下各性能指标。

3） PerfDog

移动全平台iOS/Android性能测试、分析工具平台。快速定位分析性能问题，提升APP应用及游戏的性能和品质。手机无需ROOT/越狱。手机硬件、游戏及APP应用也无需做任何修改，极简化即插即用。

3. 微信小游戏云测试（推荐）

云测试服务是微信小游戏团队为开发者提供的一套多模式在线测试服务，可以为用户提供智能、高效、稳定的云真机测试能力，帮助游戏快速进行功能、性能、兼容性、稳定性测试，并提供全面、专业、详实的产品质量评估和问题分析报告。

小游戏云测试服务具备下述能力和优势：

支持标准化、录制回放、测试框架等多种测试模式，开发者可以根据使用成本和测试精准度的不同需要灵活选择配套服务；
集成功能、性能、兼容性、稳定性等全套测试能力和工具，一次运行即可获得全方位测试结果；
提供覆盖主流厂商和头部用户的真机设备集群；
提供全面专业的可视化质量报告，帮助开发者快速定位问题。 https://developers.weixin.qq.com/minigame/dev/minigame-testtool/quick-start.html#%E8%BF%9B%E5%85%A5%E4%BA%91%E6%B5%8B%E8%AF%95