wir*_*bel 13 javascript html5 mobile-website android-browser html5-canvas
嗨,我有一个Web应该能够在智能手机和桌面浏览器上运行.虽然我期望在像Iphone这样的小型设备上获得一些奇怪的行为,但我非常有信心它会在Android Galaxy Tab上运行良好,这是我现在可以运行测试的Android设备.
现在我在Galaxy Tab上安装了一堆浏览器来测试:
在我使用过的桌面上
最后我有一个Iphone来测试.
该网站使用HTML5画布进行像素和基于精灵的绘制,没有花哨的变换,滤镜或效果,主要是简单的路径和多边形.我会听触摸事件并使用requestAnimationFrame正确的重绘.
总体而言,该应用程序在桌面浏览器上运行良好,它在iOS Safari(iPhone)和Firefox-on-Android上运行良好.Androids Native Browser给我带来了麻烦.我已将其设置为当javascript没有响应时屏幕刷新红色,并且在触摸屏幕时它几乎总是闪烁.
所以我想知道Android Native App和HTML5是否存在任何已知问题.由于本机浏览器的名称不存在,因此很难获得有关此内容的Google信息.有什么想法,我可以获得更多信息？什么可能导致本机Android浏览器滞后的想法？
关于这个问题有一些想法:
iOS不支持requestAnimationFrame,因此我将其替换为基于超时的替换.如果我在Android的本机浏览器上使用该替换,问题仍然存在.
我经常使用AJAX(google clojure xhrio)从服务器检索数据.可能是数据检索回调是cloggin我的事件管道？
是否已知日志控制台消息(console.log)会降低应用程序的速度？他们可以触发浏览器重新运行DOM树或任何相关的东西吗？
Gus*_*lho 42
我在很多浏览器中都用canvas进行了很多实验.我注意到的一些性能问题:
首先,关于你的猜测:
当requestAnimationFrame浏览器支持时,绘图内容和应用程序本身响应更快.使用setTimeout或setInterval作为后备总是可行的,但你需要注意时间.这种强大的polyfill可能会有所帮助,但与原生requestAnimationFrame相比没有任何帮助.
如果每帧(或几乎)调用console.log,则表示性能下降.由于原生Android浏览器没有控制台对象,因此每次调用它都会产生错误,这也会导致应用程序运行速度变慢.你可以这样做:
if(typeof console === "undefined"){
console = {};
}
对于密集的实时应用程序,Web套接字比http请求更快.遗憾的是,旧的原生Android浏览器不支持此功能.如果无法使用Web套接字,则应最小化http请求.
注意:Chrome for android支持此处引用的大部分HTML5功能,包括requestAnimationFrame和websockets.
更多信息:
使用上下文2d绘制文本fillText它太昂贵了,但在某些浏览器中这更糟糕.在另一个画布中预渲染文本或使用位图字体.(在原生Android浏览器中,在替换filltext预绘制内容的绘图后,在我制作的一些游戏中,性能从10-15 FPS增长到30-45 FPS).
避免缩放和旋转上下文,因为它们还会导致性能下降.如果只需要缩放或旋转一次精灵,请使用预渲染.
您需要最小化实时绘图.尽可能预先渲染你的东西.仅重绘已更改且需要更新的内容.
尝试编写内存高效和垃圾收集器友好的代码.
还有很多事情要做.我刚引用了一些.
提示:对您不确定它们是否是性能杀手并捕获基准测试结果的功能进行一些压力测试.
在移动应用程序,特别是实时应用程序中,如果只是过度优化或一点内存增益,所有优化都是受欢迎的.
有关更多信息,请访问以下链接:
还可以在帖子和教程中搜索性能.
编辑
这个jsfiddle代码片段显示了这个答案中涵盖的一些内容,并提供了一个粗略的fps计数器来进行基准测试.自己编辑这个小提琴并检查出来.
| 归档时间： |
|
| 查看次数： |
22210 次 |
| 最近记录： |