如何优化H5游戏性能

用户对H5游戏的认知就是能够快速娱乐并且可以获得成就的产品，所以我们的H5游戏性能重点是在快速上，如果你的游戏首页都要加载10几秒，那谁又愿意等这么久呢？所以在H5游戏性能优化上，我们要下足功夫，小编觉得我们应该这样做。

1、首屏Loading页面优化

用户从点击按钮开始载入网页，在他的感知中，什么时候是“加载完成”？是首屏加载，即在可见的屏幕范围内，内容展现完全，loading进度条消失。因此在H5性能优化中，一个很重要的目的就是尽可能提升这个“首屏加载”的时间，让它满足“一秒钟法则”。

2、Loading读取条优化

在加载时间较长的时候，务必要让用户明确感知到加载完成的提示，通常是在加载过程中显示Loading的进度条，加载完成的时候隐藏它。从心理上，这会让用户有一种“期盼感”，而不至于太过枯燥。

对于一些重量级的H5应用，例如游戏，开始前需要加载很多资源才能让后面的游戏过程更为流畅，一个带百分比进度显示的进度条就更加重要。

3、图片格式选择

显示效果较好的图片格式中，有webp、jpg和png24/32这几种常见的图片格式。一般来说，webp的图片最小，但在iOS或者android4.0以下的系统中可能会有兼容性问题需要解决。

4、避免html代码重合

在html或者css中，如果有类似width: **px这样的代码，就要注意看一看了，如果说图片显示的效果是宽度100px，而下载的图片却是200px宽度，那这大小基本上就是所需要的4倍面积了，所以在H5应用中，使用图片的一个原则就是需要显示成多大，就下载多大的资源。

5、规避DataURL

DataURL是用Base64的方式，将图片变成一串文本编码放入代码的方式。这种方式有好处，因为它可以减少一次http交互的请求，对于一些体积特别小的图片，或者是动态生成的图片可以考虑使用。但在H5应用中，一般情况下，我们都是需要避免DataURL的，因为它的数据体积通常比二进制图片的格式大1/3，而且它不会被浏览器缓存，每次页面刷新都需要重新加载这部分数据。

6、减少Cookie加载

尽量减少Cookie头信息的大小，因为这部分数据使用的是上行流量，上行带宽更小，所以传输速度更慢，因此要尽量精简其大小。

7、CDN加速，减少缓存

部署CDN服务器，或者使用第三方的CDN加速服务，优化不同地域接入网站的带宽速度。

以上就是小编给出的良心建议，有开发打算的效果版可以借鉴一下，如果有缺失的地方欢迎补充。另外，有想开发H5游戏，但没有技术支持的小伙伴，可以直接咨询我们网站客服，我们蓝橙互动能为你提供专业的H5游戏开发服务。