微信小游戏 - 小游戏 vs H5 游戏性能对比和分析

这是个人关于微信小游戏系列文章的第三篇，在这系列文章里会描述 ——

• 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行；
• 对小游戏在 Android 平台的运行时架构进行分析；
• 通过对移植的 Canvas/WebGL Demo 在小游戏和 Chrome for Android 浏览器上做 Benchmarking，对 H5 游戏 vs 小游戏的渲染性能进行对比和分析；

测试说明

测试软件

1. 微信 6.6.3
2. Chrome for Android 64.0.3282.137

测试使用的 Demo 可以通过 GitHub 下载。

测试设备

小米 Note3，使用骁龙 660，算是这两年比较主流的中端芯片，虽然性能在高负荷场景下跟旗舰芯片如骁龙 835 还有一定距离，不过大部分场景下也已经够用。

测试环境

设备电量在 60% 以上，处于充足状态，并使用风扇进行辅助散热，避免因为电量不足或者过热导致设备锁核降频，从而引起测试数据的波动，无法获得可以对比的测试结果。

页面在 Chrome 上运行在全屏的 WebApp 模式下，如果没有额外说明，Canvas 的渲染分辨率使用设备的屏幕分辨率 1080p。

帧率获取

adb shell "dumpsys SurfaceFlinger --latency 'TARGET_WINDOW_NAME'"

使用上述命令可以获取目标窗口最近 127 帧的更新时间戳，然后用脚本计算出这 127 帧渲染过程中的平均帧率。

另外代码中也通过计算 JavaScript 中每帧调用的次数和时间间隔来计算帧率，然后通过控制台打印输出类似下面的信息，实际验证两者的结果基本一致。

WebGL Aqua framerate:1.55fps, program:44, draw call:118

本文的测试数据使用第一种方法。

测试数据

WebGL Compute

模拟鸟群的运动，包含大量的物