ActionScript
TypeScript
JavaScript

HTML5游戏加载策略

发布时间:2017-01-09

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

        而影响首屏加载时间的直接因素就是首屏加载的资源大小(包括图片资源与JS脚本文件等),尤其是首次打开游戏,没有任何缓存,在当前的网络条件下,我们建议开发者,首屏显示的加载应当控制在3M-5M之下,3M以下最优,超过5M,用户的流失率开始增大。因此,我们将一些常用的节约体积的方法进行总结分享:


1、按需加载,首屏中不会出现的资源,尽可能不要在首屏加载中出现。本着即用即加载的原则,不影响用户体验的。都可以放在后面。


2、压缩游戏的JS文件,LayaAirIDE内提供了JS压缩与混淆的工具,可以减小JS文件体积。


3、对图片资源也需要选择合适的压缩工具进行压缩,在不影响品质的情况下尽可能减少体积。


4、游戏主场景的资源最好是打成图集加载,这样也会减少体积,但是要注意的是只把首屏的资源打成图集就可以了,如果混入了首屏用不着的资源,也会增加首屏加载的大小。


5、服务器要支持Gzip压缩,Gzip开启以后会将输出到用户浏览器的数据( js/xml/txt等类型的文件)进行压缩的处理,这样就会减小通过网络传输的数据量,提高浏览的加载速度。


除了减小体积的策略外,为了避免网速慢而加载较大的游戏文件时导致页面白屏,可以用原生的HTML页面制作一个预加载页面。


另外,尽可能不要出现加载进度条出现在某一个环节长时间不变化,否则会让用户以为是游戏卡死。


最后提一点,部署CDN服务器,或者使用第三方的CDN加速服务,也有提升加载速度的好处。