奥门永利误乐域html5 canvas移动设备渲染测试

最近项目闲着没什么事,又想起了canvas,
针对移动端设备默认浏览器,做了点渲染方面效率的测试,手头设备不多(有一些低端机型和pc
chrome做对比),现将测试数据分享给大家吧,本想和css3
animation动画一起测试比较一下,发现animation水的不行,效果跟canvas差很多(可能是因为我代码写的不好),webgl还没有普及到移动设备,所以也不做比较了,曾经看过一篇文章drawImage比putImageData效率低,但测试了一下drawImage的性能更好,还请大牛指导。测试使用cocos2dx的dancer做动画,全屏幕刷新,没使用脏矩形刷新,根据动画个数,屏幕缩放大小两方面测试(值为fps):

本文主要是介绍开发移动端web相册这样一案例用到的前置知识。

1 10 50 100 200 500 1000 1 20 50 100 200 500 1000 1 10 50 100 200 500 1000 1 10 50 100 200 500
320*200  V  V  V  V  V  V  V                                          
480*320                V  V  V  V  V  V                            
800*480                              V  V  V  V  V  V  V              
1024*800                                            V  V  V  V  V  V  V
chrome 75 75 75 75 73 46 46 75 73 72 67 62 41 26 61 59 58 56 53 34 20 29 29 29 29 27 21 14
chiwi v88 165 108 55 36 25 12 8 116 83 46 36 23 12 6 61 57 43 30 21 10 6 53 48 35 27 18 6 6
moto ME722 78 55 22 12 8 4 2 76 47 16 11 7 4 2 43 30 17 12 7 4 2 23 23 17 12 8 4 2
iphone 4 61 61 60 58 43 22 12 61 61 61 54 42 22 12 61 61 57 48 38 22 12 49 50 46 39 32 21 12
GALAXY SII 79 60 27 16 14 9 6 77 55 25 14 10 7 4 75 54 26 16 8 6 4 50 37 26 12 8 5 3

一、移动端样式

移动端更接近手机原生的方式。

如下是一个angular
mobile的奥门永利误乐域,demo的例子:

 奥门永利误乐域 1

移动端demo做成这样的好处:

  • 在手机端浏览器中打开,接近原生app应用。
  • 打包成Android或者ios的app,以原生app呈现

做了几张图方便大家对比:

二、移动端web开发调试工具

因为移动端主要的浏览器内核是webkit,所以可以用chrome开发。可以模拟UA和分辨率。

模拟触摸行为,注意touch和click区别。

也可以开启其他模拟。

奥门永利误乐域 2

不同分辨率(这里网页缩放使用meta标签适配全屏):

三、移动端开发tips

奥门永利误乐域 3奥门永利误乐域 4奥门永利误乐域 5奥门永利误乐域 6

 1、兼容性

Android和ios都是webkit内核,firefox os是greasemonkey内核。

奥门永利误乐域 7

 

2、 其他差异

弃用事件mousedown,mouseup,click。

使用手势操作代替鼠标输入/输出事件

响应式布局

css3代替DOM animation动画效果

(为兼容IE:PC端用setTimeout定时器,定时修改DOm元素的style属性实现动画)

 优势:css3使用设备GUP渲染,动用硬件设备的计算能力做展示,效率高。

不同机型(chiwi v88为驰为v88,具体配置大家自查吧):

四、移动端开发框架和库

奥门永利误乐域 8奥门永利误乐域 9奥门永利误乐域 10奥门永利误乐域 11

1、移动端开发框架和PC端对比

PC端:兼容ie,冗余代码,但是计算效率高。

移动端和PC相比:轻  重效率 ,希望在3g网络加载更少的代码,加载更快。

结果iphone必须是最牛的,貌似最高有60fps的渲染限制,以上测试仅供参考(仅仅是渲染部分,没有逻辑代码),希望能帮到大家(^-^)

2、移动端开发框架

移动端开发框架:jquery mobile ,angular
mobile

,简单的还用不到框架,通过组件做复杂应用非常简单。我们做的页面简单,谈不上完整的app效果,用不到复杂应用框架。

发表评论

电子邮件地址不会被公开。 必填项已用*标注