小游戏加载速度的优化

如果你正在从事小游戏开发的工作，标题里提到的这项技能我觉得是要必备的。有句话我觉得说的很正确“H5游戏的优势就是即点即玩，如果这点都做不到，就没什么优势了。”虽然这项技术没什么难点，但是对于初创公司，还不太规范的时候，可能根本就不会去注意这件事。那些规范起来后的公司肯定会有这要求的。
这里说点题外话，H5游戏和小游戏区别不大，只是小游戏的开发和发布可能会有点限制。小游戏的即点即玩，并不是真的不用下载，而是你点开的那一小会，就把游戏所需资源下载 （或者说是缓存）到本地了。因此，它看起来就像是“即点即玩”的，也是因为这个特性，所以要求小游戏要“小”，如果你游戏的包体很大，下载也是需要一定时间的，这样就和那些客户端游戏没什么区别了。
国内三大主流引擎用来开发H5游戏的就是CocosCreator、Layabox和Egret了。虽然它们的编辑器使用起来确实不大一样，但是你只要会这三种脚本语言JavaScript、TypeScript、ActionScript中的一种（它们用起来很相似），当你上手一种引擎后，其它两个也很快就可以上手了。当然，由于引擎编辑器的使用方便程度的不一样，有人可能更喜欢用其中一种。之所以说到这三个引擎，是因为需要优化的小游戏，可能是其中一款引擎开发的，其实不管用哪个引擎，游戏发布成Web版后，优化起来都差不多的。所要用到的技术，前辈们都有分享，网上搜下，认真学下就可以了。因此，我这里就不打算再复制粘贴了，我会把其中遇到的一些问题和需要注意的地方记录一下。
优化时需要用到的知识点不多，只需1.会用浏览器的调试工具查看性能问题。2.会使用基本的gulp工具，就行了，当然工具的下载安装什么的就不说了。我所学习使用的方法并不是优化到极致的那种，但是对于某些平台要求上线他们平台的游戏，加载速度不超过多少多少秒，是肯定够用的。
首先看下调试工具的使用，通过调试工具，找到影响游戏加载速度的地方，从而对症下药。要明白一个最基本的原理，包体越大的游戏，加载速度肯定比不过包体越小的游戏。要让包体“大”的游戏加载速度快，这并不是个矛盾。在初创公司很有可能会遇到这样一个问题：一个小游戏，接不同的SDK，每次都是用同一个工程修改，导致之前不用的代码遗留下来，这些代码虽然不用了，但是打包的时候还是会一起打进去的；或者是更换了美术资源，旧的美术资源遗留下来，导致包体越来越大。这些问题，都是开发流程不够规范造成的。解决这些问题的方法就是老老实实地把无用资源去掉…注意不要弄出bug来了。: )把基本的问题解决后，就可以用调试工具调试了，一般游戏开发出来后，是先在电脑上用浏览器调试的。一般的浏览器都会自带开发者工具吧，打开它，选中Network这一项，就可以看到：

讲下第3行选项栏的各个选项的作用，没用过的同学可能不清楚。

• All就是所有的意思，选中它，你就可以看到Name下边列的所有需要加载的东西，有各种格式的资源。
• XHR就是http请求，也叫短连接，一般是用来上报数据给后台用的。像玩家的登录信息，玩游戏后的结果信息等。
• JS就是JavaScript脚本文件，图中可以看到一个cocos2d-js-min.js文件，这是引擎的库文件，游戏运行时需要用到的。还有我们写的游戏逻辑文件也是JavaScript脚本。这些都需要加载后，游戏才能运行。
• CSS就是界面样式文件吧，不太确定，一般不需要用到，反正我是没关注过。
• Img/Media就是图片和媒体资源了，这个也不怎么需要关注。
• WS这个有时比较常用，全称是WebSocket，也叫长连接。联网游戏一般都是通过WS来进行消息交换的。我们要看后台有没给客户端发消息，就是在这里看的。
• 其它几个没什么用。

选项栏下边有一栏一格一格的，上面还有时间描述，100ms就是100毫秒的意思。如果该时间点的那一格为空，就表示这个时刻没有加载东西。如果有一行的线条，说明此时有东西需要加载。所有格子的总时间，就是整个游戏加载时需要消耗的时间了。时间越大，说明加载越慢。

会用调试工具了，接下来再看下gulp这个强大的工具，我们需要用它来做两件事（当然，它可以做很多事）：帮我们自动压缩工程文件的所有图片文件，它是无损压缩，在不损失图片质量的同时使图片更小（虽然我们可以手动用tinypng这个在线网站帮我们压缩图片，但是能自动就不手动）。帮我们把那些可以在同一时刻请求的文件合并成一个，这样就可以一次完成请求了。请求越多越耗时，因为每次的请求（http请求），都需要建立连接，完成3次握手才可以传输数据，这个过程比一次请求，同时传输更多数据，要耗时。
要完成上面说的两个任务，是有前提的，需要我们的电脑装好node.js和npm，然后配置好环境变量等这些麻里麻烦的操作，因为gulp的安装和使用需要用到它们。安装和配置这里就不说了，网上一搜一大把。还有，如何编写gulp脚本，这里也不贴出来了，具体看这两篇文章CocosCreator和gulp-使用gulp-imagemin压缩图片和Cocos Creator—最佳构建部署实践，写的很清楚，我就是从这学过来的，里边可能有暂不需要用到的东西。第一篇文章有详细介绍gulp的安装和使用，再结合第二篇文章，就可以实现利用gulp压缩图片和合并文件。
这里列出几个遇到的问题及解决办法：我在使用gulp-imagemin的时候，同样的操作，在一个工程文件中正确执行，在另一个工程文件中执行就报了个奇葩错误，最后的解决办法就是卸载gulp-imagemin再重装就行了；如果你装的是gulp4，那么需要改下代码，因为gulp4的代码不兼容之前版本的，而链接中那两篇文章中的代码不是gulp4的。被这两个问题坑了一下，祝你们好运:)。如果代码中引用的库未定义，说明你还没有安装或未require()到模块中。

我实践用的是CocosCreator打包出来的工程文件，不过Egret和Layabox打包出来的工程应该同样适用（按照给的链接中的第一篇文章操作）。

还有一个减少请求的方法，就是将游戏所需用到的图片资源尽可能的打包到图集中，虽然一般都是这么做的，但是我遇到一个问题就是由于后面更新了美术资源，有些图片就没合并到图集中，刚好又要你优化，这时就需要你不怕麻烦的手动打包图集了，注意别弄出bug:)，CocosCreator一般用TexturePacker，而Layabox打包时会自动帮你合并图集，Egret的没注意。

如果你做到了上面说的办法，速度肯定是会加快的，反正我的达到要求了:).