我录制了一段iphone4s 下 ios 5 和 ios 6 的 canvas性能对比视频
http://t.cn/zlvnKZk 通过这个视频 我们可以发现很多有趣的事情. 简单来说iOS 6 的特点就是 : 以退为进, 为了更好的体验,而减速 !!!! 未来 A6芯片+ iOS6 下的HTML5体验一定会很赞!
视频地址:
http://v.youku.com/v_show/id_XNDQ5OTY1ODk2.html
javaeye怎么不能潜入flash视频了?
下面说说我的看法.
视频中白色的是iOS 5 , 黑色的是 iOS 6 gm版(相当于正式版).
首先对这个视频里的测试页面做一下说明.
测试页面地址 :
http://tryhtml5.sinaapp.com/op/logo.html
测试用例的特性:
基于canvas, 画面背景是一张彩虹色的大图,
前景是 180个(6种)logo图片,图片大小在500*500左右,渲染时, 缩小+移动+旋转
logo在移动时采用的是 固定步长. 也就是每次loop时,logo移动的像素数量是固定的,与每次loop的间隔时间无关.(这点很重要)
在视频中,我们可以发现如下特点:
iOS 5 里 logo移动的快, 但是不顺畅, 一跳一跳 一卡一卡的.
iOS 6 里的则相反, logo移动的速度相对慢一些, 但是更顺滑.
logo移动快慢大家可以通过计时(某一行logo移动一个来回需要的时间),或者是对比着看,同一行logo, 在iOS 5上会逐渐拉开iOS 6上的logo.
=====================
在谈论iOS 6带来的这种"改变"的之前, 先来说一说在canvas渲染时, 整个浏览器的一个内部流程.
实现一个canvas动画在完美情况下( 60FPS ), 一秒钟内, 浏览器是做了如下事情
1 运行js代码,更新canvas的imageData数据
2 根据canvas里最新的imageData去渲染画面
3 1到2重复60次
完美情况下 上面的工作可以顺利的进行. 浏览器的js线程和ui渲染线程是互斥的,同一时刻只能做一件事情.
那么当渲染画面成为瓶颈的时候,一切就不是如此了.
一种处理方案是:等待每一次渲染的完成 再进行下一次工作.
这样在一秒内, js执行的次数 == 渲染的次数 < 60
另一种方案是:系统有选择的放弃掉
【若干渲染】, 从而
【保证js】的执行次数受到尽可能小的影响.
那么在一秒内, 渲染的次数 < js执行的次数 < 60
通常情况下 渲染性能无论多高,都会低于js执行的性能的, 所以当渲染跟不上计算时,通常会选择第二种方案.
=====================
下面 我们来根据视频猜测一下---- 真的只是猜, 真实原因只有safari工程师自己出来说才行,否则我只能猜, 我知道这样是不严谨的, 根据现象猜原因是错误的, 但是, 对不起, 就让我错一次吧。
第二种方案中, 最终效果的好坏,则取决于放弃
【若干渲染】, 里的若干到底是多少, 以及
【保证js】运行 要保证到什么程度, 系统需要在这两方面做出权衡。
但是一个简单的原则就是 : 渲染能力越低,需要放弃的渲染越多, 渲染能力越高,需要放弃的越少。
通过视频我们可以看出,
iOS5 里为了保证js的运行, 放弃掉了很多渲染, 但是js执行的次数几乎没有受到影响。
而iOS 6则大大减少了放弃掉的渲染(顺滑了很多), 而同时,js的运行只受到了微小的影响(但还是受到了一些影响).
同时, 提高渲染速度,适当降低js权重,这也使得用js记录FPS的方式比以前准确了很多.
但综合来看, iOS6的调整对整体的体验带来了巨大的提升, 同时iOS 6能够做出这种调整,很可能是因为渲染能力的提升使得它可以勇敢的选择放弃更少的渲染.
(如果iOS5 里采用iOS6的策略,结果可能是双输:js次数得不到保证,渲染也得不到什么提升)
另, 有朋友说 iOS 5里丢帧是bug (因为android里面有这个bug) ,但是我不同意这种观点, 因为了解iOS 5的朋友应该清楚, iOS 5的canvas里已经引入了硬件加速, 它的canvas性能和表现力 在当时已经是逆天的了. 这么优秀的平台不太可能有这么低级的bug. 而且,如果是bug,它出现的频率和严重性也不应该有如此严重的人工干预的痕迹啊.
换句话说: "渲染压力不大时,完美渲染, 渲染压力加大时,放弃掉一些渲染以保证程序的运行" 这个怎么看都像是策略而不是bug啊.
===========
本文很多观点基于猜测, 欢迎大家来拍砖!
分享到:
相关推荐
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它...
html5+exif.js+mobileBUGFix.mini.js+canvas 移动端图片上传预览压缩旋转,iOS90度...html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。
You'll learn about design considerations, mobile web frameworks, and HTML5 features like animation and graphics using Canvas. You'll also learn how to customize your app for a variety of platforms, ...
解决html2Canvas在ios13.4中失效问题 // 引入 import html2canvas from "../../lib/html2canvas"; // 使用, 全局window对象加入html2canvas,如果没有window就调用原来的,所以需要做判断 (window.html2canvas || ...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
html5 canvas 播放视频html5 canvas 播放视频
canvasBlurRect, 实时( 30 + FPS ) iOS样式框模糊+ 饱和度带有 HTML5 Canvas canvasBlurRect实时( 30 + FPS ) ios样式框模糊+ 饱和度带有 HTML5 Canvas演示在这里可用 !canvasBlurRect扩展 CanvasRenderingContext...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
《HTML5 Canvas核心技术》内的实例代码
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
vnode2canvas - 基于Vue插件将虚拟DOM渲染到canvas中
《HTML5 Canvas 开发详解》第二版pdf 版
这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas...
html5 canvas容器温度计特效 html5 canvas容器温度计特效
HTML5 Canvas基础教程,html5开发使用者使用
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战