前端小游戏页面性能优化

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

时间: 2024-12-29 23:29:38

前端小游戏页面性能优化的相关文章

移动前端系列——移动页面性能优化.

随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状, 移动页面布局越来越复杂,效果越来越炫,直接导致了文件越来越大,下载和运行速度越来越低,而速度低会造成不良影响,据统计: 71%的用户期望移动页面跟pc页面一样快,74%的用户能容忍的响应时间为5秒,所以我们必须保证移动端页面有足够的速度. 移动页面的速度跟三个因素有关,分别是:移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身. 目前主流

雅虎网站页面性能优化的34条黄金守则(转)

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

雅虎网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件

页面性能优化总结

页面性能优化总结         由于本人前几天一直在解决页面性能.加载慢等问题.解决后,对于该方面知识有一定的认识与理解,现将经验码出来,与大家分享:由于单纯讲解知识点会造成知识点认识混乱,故将知识分模块讲解:由于项目中主要使用chrome浏览器,故仅讲解以webkit为内核的浏览器机制1.浏览器加载时间:当浏览器对页面进行加载并且解析时,会产生如下几个主要时间: 1).queueing 时间 该时间为等候时间,也可以叫排队时间.即文件在加载之前的排队等候时间.该排队等候时间会根据优先级进行判

页面性能优化

页面性能优化是前端从未停止探讨的问题,雅虎将 web 页面的优化分为 7 部分,总结了 35 条军规.这里,总结页面从输入回车到内容展现这一过程中的优化方法,主要目的是为了缩短页面的渲染时间,使页面内容尽可能快的展示出来. 初次加载页面,浏览器请求资源到接收到该资源之间,需要经历一段漫长的网络传输过程. DNS 解析 浏览器请求一个网络资源,如 html.css.js.img等,如 baidu.com,这是域名,方便人们记忆,但机器只认 IP 地址.为了能够找到正确的服务器,就需要 DNS 解析

网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

雅虎网站页面性能优化的34条黄金守则(转载)

老是有人问我 关于优化问题我就每次和他们说雅虎性能优化(有些人不会百度 汗..于是我转载过来啊 不是自己写的 不会因为版权被人家打吧!) 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰

新时代的页面性能优化

概述 最近这几天对页面性能优化进行了一些思考,记录下来,供以后开发时参考,相信对其他人也有用.在我查资料的过程中,发现以前的一些黄金优化法则,在现代有些已经或多或少的被淘汰了! 首屏时间 首屏时间真的很重要,用户的等待忍受能力是有限的.有以下几个优化方向: 可以通过chrome浏览器的performance面板来查看页面加载时的逐帧闪照.来查看在首屏之前浏览器做了哪些多余的动作,然后一一优化掉. 对于首屏有一个很大的背景图的网站,背景图一般是用background-img实现的,但是backgr

web页面性能优化

web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页面.网站前端的用户体验决定了用户是否想要去使用网站的功能,而网站的功 能决定了用户是否会一票否决前端体验.如果前端优化得好,他不仅可以为企业节约成本,而且因为增强的用户体验,还给公司带来更多的用户.那么我 们应该如何对我们前端的页面进行性能优化呢? 浏览器访问优化 浏览器请求