前端小游戏页面性能优化

Posted 2020-07-25

公司是做教育类游戏开发，以前是用flash制作，现在开始使用CreateJS框架开发Canvas游戏。今天突然收到一个任务：游戏在iPad2下面游戏会打不开，然后自动刷新，再加载不出来，然后再刷新，陷入了死循环……

发现问题：

屏幕左上角提示 “因出现错误 重新加载了网页”

解决问题：

通过度娘得知此问题是由越狱或内存引起的。排除越狱可能（因为没有越狱），剩下就是内存问题。打开Chrome更多工具里面的任务管理器（快捷键Shift+Esc）看到单页内存占用量一路飙升到800,000K左右，当时自己都吓了一跳。（Bug真是一个神奇的物种，想重现场景自己倒害羞不出来了，有机会把图补上）。

我们知道iPad2 的内存大小是512MB，为了确定是内存太小引起的问题，特意用同事的iPhone 5s（1G内存）测试，发现可以正常使用。于是开始着手减少页面内存占用问题。

由于游戏内资源文件太多，所以为保证游戏流畅对音频、图片进行预加载。首先从音频着手，将音频部分的预加载去掉（因为音频数量不多，而且声音短，随用随调产生不了太大影响），发现内存占用量立马下降至132MB左右，看来这一步是走对了；将页面的script标签移至body底部，避免<script>标签下载时阻塞页面解析过程，以减少首屏时间，提高用户体验；将常用的库文件使用CDN发布，当库文件第一次被加载时会被缓存起来，如果没有被清理或修改，浏览器会自动读取该文件而不是重新下载文件，减少了网络消耗。

在线Demo请移步 → http://121.42.8.151:2953/HBA003/index.html