有什么不明白的地方，扫描右方二维码加我微信交流。

       

H5游戏注重加载速度，让用户以最快的时间进入游戏，然后可以立即体验游戏。

H5版本的优化，大方面来说以下几点：

• 优化文件结构
• 减少请求 
• 减小包体
• 减少游戏中的drawcall

具体可以细分为以下几个：

1. 优化文件结构，就是说，要把游戏中第一眼展示给玩家的，玩家可以立即体验的游戏资源预先加载，像logo，主界面资源，这些图片都是需要进游戏之前加载的。另一些资源，比如音效，特定状态下出现的特效，可以在进游戏之后再进行加载。这样可以缩短玩家进游戏的时间。一定要注意一个原则问题，就是玩家不能卡住，或者不能卡住太长时间，否则会大大影响到体验，导致用户流失。
2. 减少打包后生成的文件数，则可以减少游戏的请求数。文件太多会增加请求数，并拉长单个文件下载前的等待时间，尤其是特别小的文件，可能下载只要几毫秒，但是因为请求数多，要等待几百毫秒；
3. 减小单个文件的体积，因为大文件会拉长下载时间，所以大文件要根据实际情况拆分，这个优化点要在打出包之后看实际加载情况来定；
4. 图片采用TinyPng压缩方案来缩小图片体积，点击这里查看；
5. 音效采用单声道，并降低码率，缩小音效体积；
6. 预制体采用延迟加载策略；
7. 频繁创建和销毁的组件使用对象池或者重复使用，点击查看ScrollView重复使用item的例子；
8. 代码优化，游戏的逻辑优化（这方面的优化就要看个人的编码水平了，主要的优化点就是减少组件的创建和销毁，尽量使组件可以复用）。

优化文件结构

优化文件的工作如何验证已经做好了？打包之后（一定是打包后），在浏览器的开发者工具里查看network一栏，并勾选上Disable cache选项，然后自己搭建一个本地服务器，修改一下服务器的下载带宽，模拟网络情况不好时的加载情况，这样你就可以清晰地看到加载了多少资源进入游戏，进入游戏之后又加载了多少资源（服务器推荐使用nginx，修改带宽方法自己查）。

减少文件请求数

当把以上的工作做好以后，就可以开始下面的优化了。这里着重讲下减少请求数的解决方案。

想要减少请求数，我们先要搞清楚请求的文件都来自哪里。Creator打出web-mobile包后，有好多文件，我们来一一解答下。最外层目录的文件就不多说了，缺一不可，都是很重要的游戏启动文件，但也可以进行优化，在后面说明。

我们看一下res目录里面：有import、raw-assets、raw-internal共3个文件夹。

import：这个文件夹里有一些奇怪的目录，放着长文件名的json文件，这些是游戏场景，预制体，图片信息的配置文件；

raw-assets：这是游戏的图片，声音文件位置；

raw-internal：这是游戏默认的一些图片，粒子资源存放目录。

我们现从这3个文件夹入手。

import文件夹

import文件夹减少配置文件生成。减少配置文件生成需要在制作游戏时遵循一个原则，那就是官方文档里关于resources目录的解释：所有需要通过cc.loader.loadRes动态加载的资源，都必须放置在 resources 文件夹或它的子文件夹下。如果一份资源不需要由脚本直接动态加载，那么千万不要放在 resources 文件夹里。所有放在resource里未被场景或者预制体文件引用，并使用cc.loader.loadRes方法加载的文件（声音资源例外，引用不引用都是它自己，打包之后它只会消耗一个请求），打包之后都会在import文件夹生成一个json文件。所以我们要尽量让资源被引用到，引用并不会消耗性能，使用cc.instantiate方法创建并add到节点才会消耗性能。像预制体，动画文件，一定要放在res目录。如果项目中使用cc.loader.loadRes方法加载预制体，则放弃这种创建方式，把预制体引用到场景中，需要的时候再创建。在我看来，cc.loader.loaderRes方法只适用于播放音效，加载url图片（如微信头像）。图片只要有被引用到，放在res目录和resources目录都是可以的。

raw-assets文件夹

raw-assets文件夹存放声音和图片文件，一个声音文件就是一个请求，这个我们无能为力。图片使用图集，自动图集和TexturePacker都可以。但使用自动图集时要注意上面的问题，一定要把所有图片都引用到。否则放在resources目录下的未引用到的图片就会产生一个json配置文件。粒子图片无法打成图集，有一个比较好的优化方案，就是把粒子图片使用的图片转换成字节码，放到粒子文件.plist文件中（推荐使用Particle Designer ），亲测web平台可以完美运行，原生平台不支持。

raw-internal文件夹

raw-internal目录我们可以完全去除掉。如果需要使用到Creator的默认图片，则让美术同事做一张一样的图拿出来放在res目录或resources下。需要注意的一点，创建button组件时，transition属性选到SPRITE看一下，如果不把这边默认的图片都叉掉，就算选择了SCALE或者其它属性，依然会在打包的时候把默认图片打出来，导致请求的增加，游戏drawcall的增加。每一个button都有这样的风险，所以一定要注意一下。项目中没有使用到Creator默认图片的组件，在打包的时候自然就不会生成这个目录了。

外层文件优化进阶

在这之后又有了新的思路，点击查看H5优化方案进阶，文件的优化又做了一个小小的升级。

打包之后把splash.png图片和style-mobile.css文件合并到index.html中也可以减少两个请求。方法如下：

1. 把splash.png使用在线base64转换工具，把png图片转换成base64格式的长字符串，点击这里转换；
2. 把转换得到的字符串替换style-mobile.css文件中的#splash中的background的url内容，不用加引号，直接把./splash.png替换成上面得到的字符串；
3. 在index.html中找到对style-mobile.css文件的引用位置，注释掉，并添加新的标签<sytle>xxx</style>，然后把style-mobile.css文件中的内容复制，并替换掉xxx；
4. 把生成好的index.html文件放到build-templates文件夹中（不知道这是什么的，点击这里查看官方文档），如果文档找不到，可以在文档里搜索定制项目构建流程。

这样就成功把两个很小的文件又融入到了index.html中，减少了两个请求。

以上工作做完了，你可能觉得main.js，setting.js文件也可以放到index.html中，也不是不可以。但我们发布web版本，构建时一般都勾选md5选项，这样每次生成的文件内容可以会有改变，导致文件的后缀也会随着改变，放入模板中不太合适，所以在打包之后，追求极致请求数的同学，可以把main.js文件和setting.js文件也整合到index.html中。

延迟加载策略

延迟加载是什么？举个简单的例子，网页游戏进游戏之后，有些图片非常模糊，人物有的也可能就是个黑影身上加个问号，但是完全不影响游戏逻辑，你的游戏可以正常进行，并且看到随着时间的推移，图片慢慢变得清晰了，人物也都慢慢出来了。这就是在延迟加载，不会影响到游戏的进行，但是显示上可能和正常的游戏不一样。Creator的H5版本，一些预制体如果不勾选延迟加载，则会卡住游戏。再举个简单的例子，假如游戏里有很多特效绑定在一个预制体上，这个预制体上的图片有部分必须要在进入游戏之前加载，但是另一部份可以在进入游戏之后再加载。如果这个预制体没有勾选延迟加载，那么再调用这个预制体的时候，系统会去检测这个预制体上用到的图片是否已经全部加载了，如果没有，那就会卡住等待。如果勾选了延迟加载，就不会卡住，而是把已经加载的图片显示出来，未显示的图片会在加载完成之后自动显示出来。延迟加载策略可用于游戏玩法主场景的预制体，主场景玩法中必要的资源在进入游戏之前加载，特效资源进入游戏后加载，这样保证玩家不会在游戏环节中卡住，又可以保证加载速度快。

减少游戏Drawcall

减少drawcall的办法有两个，打图集，优化游戏的场景组件结构。一般在打了图集之后，drawcall都能得到很好的控制。具体的drawcall介绍请移步官方文档。点击查看。

ok，以上就是H5版本的优化方案，有什么问题，可以在下方留言。

性感码农，在线解答！