H5 加载速度讨论

Hello，大家好。 最近由于业务繁忙，很久没发技术相关的贴子了。

今天想和大家一起讨论一下当下最重点的问题：H5加载速度。

我们把幼麟麻将进行了一次优化，地址戳「阅读原文」自动获取。

本以为可以轻松发版本，但在 H5 这个版本制作的期间面临了许多问题。

列表如下：

1、引擎首加
目前已经处理，引擎模块裁剪后是 900KB+， 但 settings 文件有 300KB，还有一些其它加载。

2、场景/prefab 等节点解析慢
根据官方解释，场景或者 prefab 的解析相对较慢， 建议把重复的节点删除，改为代码创建。

试过了，这个确实有效，但 Cocos Creator 的可视化编辑基本上就没用了。

另外，有一些复杂的界面即使不重复的节点也很多，有点心累。

3、动画加载慢
这算是最大的一个效率优化点。 简单的动画要经过动画文件加载解析，动画相关资源加载，组装动画......最后才得以显示。 我们之前的动画是挂接到节点的 Animation 上的，导致进场景很卡。

现在改为第一次播放加载，进游戏房间快了很多。

但很明显这个动画组件的提升空间非常大。

4、合理规划图片资源结构，自动 Atlas
加载时间过长最大的一个开销就是发起了太多的 HTTP 加载请求。 使用 Atlas 可以大大减少这个开销。 但为了避免前期不必要的加载，最好做资源分类。 比如，大厅的资源就放到一个 Atlas 中，游戏的资源就放到另一批 Atlas 中。

5、资源压缩
我们使用了 pngquat 命令行，把 web-mobile/res 整体压缩了，可以使加载量减少50%左右。

以上就是我们做的优化。

目前看来，要想做到很好的加载体验，必须将场景分拆，并且 prefab 的加载效率决定了我们不能进行大批量使用。

自从 Adobe 宣布对 Flash 的支持将在 2020 年完全停止，我们完全有理由深信 HTML5 技术有着非常光明的未来。而今天，我们就站在 H5 游戏的风口上，非常期待 Cocos Creator 能从 H5 方向持续再发力！