公司是做教育类游戏开发，以前是用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

修改后的内存占用量

转载于:https://www.cnblogs.com/cjlll/p/5584436.html

前端小游戏页面性能优化相关推荐

前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...
前端页面性能优化指标
前端页面性能优化指标一.有哪些指标 LCP(Largest Contentful Paint) FID( First Input Delay) CLS(Cumulative Layout Shift ...
前端页面性能优化（完整归纳版）
前端页面性能优化当优化前端页面性能时,可以从多个方面入手.以下是一些常见的优化技巧,使用 Markdown 格式展示: 1. 优化资源加载压缩和合并文件:减少请求次数,通过压缩和合并 CSS.Ja ...
前端页面性能优化的几种方式
前端页面性能优化的几种方式提升页面性能优化的常见方式: 资源压缩合并,减少http请求非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别利用浏览器缓存 --> ...
web前端开发，如何提高页面性能优化？
web前端开发,如何提高页面性能优化? 内容方面减少HTTP请求次数减少DOM操作减少DNS查询使用Ajax 可缓存 css方面把css样式HTML代码页的上端从页面中分离css代码,从外 ...
web前端页面性能优化SEO优化
首先什么叫网站? 网站一般分为前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页 ...
移动端页面性能优化方案
移动端页面性能优化方案加载优化使用首屏加载按需加载预加载压缩图片减少Cookie 异步加载第三方资源脚本执行优化 CSS优化 JavaScript执行优化渲染优化 SEO(搜索引擎优化 ...
浅谈移动端页面性能优化方案
众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端.比如淘宝双11,在移动端支付的接近7成.这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑 ...
雅虎网站页面性能优化的34条黄金守则（转）
2019独角兽企业重金招聘Python工程师标准>>> 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下 ...

前端小游戏页面性能优化

发现问题：

解决问题：

前端小游戏页面性能优化相关推荐

最新文章

热门文章