创新高性能移动UI框架——Canvas UI 框架
发表于 15:46|
来源百度FEX总负责人|
作者刘平川
摘要：WebView里，针对体验增强、端基本能力已有成熟方案，反而后期的UI和Layout性能是Web技术欠缺的。针对各种奇葩的优化方案，Canvas UI利用“开发游戏”的思路进行UI组件探索，提供了新的优化方案，同时也存在着不足。
【编者按】百度FEX总负责人刘平川针对讨论热烈的React Native，发表文章提出了用“开发游戏”的思路来做UI组件探索，并将它称为Canvas UI Framework。文中详细介绍了Canvas UI 框架的设计理念及解决方案。全文转载如下：欢迎加入CSDN前端交流群：，进行前端技术交流。最近有人在知乎讨论React Native，我也凑个热闹，来个技术贴。WebView里无法获得的能力虽然是“体验增强”与“端基本能力”，但现都基本上有成熟解决方法。但后期的UI和Layout的性能反而是目前Web技术欠缺的。所以，无论是Titanium与React Native都是解决性能作为探索的出发点。性能慢与快的分水岭慢与快的标准，是按照每秒大于等于60FPS（60帧每秒）的理论，而为什么是60FPS，这不多描述。按此理论，那么“每帧”里所有的操作都必须在16ms完成。WebView里UI性能慢的原因：WebView单线程模型；DOM/CSS排版复杂，渲染上需要大量计算；动画是也很重要的考量因素。多说两句动画。最早做动画都是用setTimeout/setInterval。而setTimeout/setInterval的处理回调的时间tick time精度都在16ms左右。所以，可以想象正常用这两个函数就已经16ms了，再加reflow/repaint/compositing卡顿或跳帧就是家常便饭了。还好的是W3C标准和各浏览器厂商较早就支持了动画接口RAF（RequestAnimationFrame函数）来处理动画帧回调。解决了上述setTimeout/setInterval Animation不足的问题。DOM性能低下的原因浏览器执行的几个步骤：restyle/reflow/repaint触发条件：了解完以上信息，考虑以下条件：把JavaScript逻辑、复杂的DOM与样式合成，并完成渲染；HTTP请求下载多媒体；在一个线程里；移动上的ARM架构。以上操作能在每帧16ms里完成，想想都觉得是一件“不可思议”的事情。于是各种各样的奇葩优化出现了。WebView里高性能组件分类已知的高性能组件的几类方法：（1）常规方法这类的原理主要是利用人为或规范的方式，减少restyle/reflow/repaint触发次数：通用组件优化DOM结构，甚至用Virtual DOM（虚拟DOM）减少reflow和DOM的复杂度；优化CSS，少用或跳过repaint阶段。用编译的手段识别部分CSS，将left/top变换变成transform。跳过layout与paint阶段，就是多使用Layer Composite技术，即CSS的“opacity”和“transform”属性作动画。只能在CSS和DOM结构上去抠出些性能优化的空间，缺陷优化空间有限；这种优化技巧通常是放在最后调优时冲剌使用，不能做为常规手段。（2）进阶方法原理是尽可能利用Native能力，甚至将JavaScript转换成Native App代码。用JavaScript调起Native组件，将增强与高性能组件交给Native来处理，以前在FEX提的“轻组件”就是这么做的。这个原理类似PC时代的ActiveX；将WebView里无法实现的功能用Native实现；利用Native Activity的渲染线程，分担浏览器渲染压力（WebViewCoreThread是WebView线程）；最dirty的事在于处理Native上UI的层次管理。需要后台有线程一直在检测scroll/resize/ui change时UI边界是否有相互覆盖与叠加的问题；JavaScript翻译成Java/OC代码。类似React Native/Titanium，将JavaScript翻译成Native代码，特别是UI组件上。（有兴趣的同学可以反编译React Native写的Facebook Group）例如用React，通过虚拟Web UI映射至Native View，并且将代码逻辑翻译成Native。（3）新方法——Canvas UI这也是要说的重点，用“开发游戏”的思路来做UI组件探索，我把它称为Canvas UI Framework。Canvas UI Framework用游戏的思路做UI，最早我有这个想法是2014年。为什么要用Canvas？Canvas是H5的画布元素，即一个DOM元素。通过脚本控制逻辑给画布上增加文字与图像，而浏览器只需要绘制一次形成一幅图。只用一个Canvas DOM元素，降低DOM数量与渲染的复杂度，可以将原来CPU密集型变成GPU操作。绝大多数针对Canvas是用硬件GPU加速渲染 ；GPU的ALU（计算单元）比CPU要多很多，而控制运算（逻辑）则可以用JavaScript在CPU里做，甚至还可以用WebWorker多线程处理CPU密集型的操作，从而达到充分利用硬件资源的能力；Canvas画布无论是JavaScript&H5，还是Native都有类似的API。所以：本地调试可在浏览器里完成。最差方案可以用Canvas UI跑在浏览器里。更进一步，可以把浏览器Canvas接口的反射到用Native画布上，以此提高性能。值得一提的是，腾迅的X5内核已经将egret（白鹭游戏引擎与cocos2dx）内置，所以时间线拉长来看，WebView的画布功能将会更加强大。在2014年中时，很多人见识过默认置入Cocos2dx引擎的浏览器，用WebView玩“捕鱼达人”很流畅。由此说明Canvas做UI组件可行性还是蛮高的。解决方案用游戏的思路来解决DOM paint的问题，业界早就有实验。最早实验的是zynga做Angry Birds游戏的厂家，2010年写的Demo Scroller：设计、开发一个基于Canvas的UI框架系统，由于系统相对比较复杂，需接管浏览器构建的整个过程：验证在实践环境中的效果，要把原来页面的DOM写成Canvas，再加上一些调优与比较，工作量相对大，（包括zynga也只是实现了一个简单的Demo而已）就暂时搁置了。最近这阵子在翻Github与新闻时，我惊喜的发现也有人在做同样的事了，最后发现Flipboard同学们写的一个Demo：这个Demo足够复杂，动画也足够多、炫。是用Canvas来构建整个UI。测试过后：这么复杂的Demo在MI4以及配置以上性能很好，流畅度无限接近于Native，比较理想；对比过G+的Android应用，G+的App从动画上比Flipboard提供的的Demo还“卡”些；在小米Note上的动画流畅度已秒掉iPhone 6，非常赞。按照摩尔定律，可以预计明年Note的标配的CPU和GPU配置会成为主流。而现在用Canvas UI框架用在MI4以下机器仍然比较慢。而2015年H5开发App，对很多公司来说只是plan B计划，大公司甚至plan B都不是。所以，如果一定要在纯H5上搞牛逼动画，还是再等等吧。布局系统CSS Layout说回到Canvas Component Framework，回到我上面画的这张图：UI组件基于“文本”与“图像”。但Framework，除了UI组件本身以外，还需要有Layout，而CSS只适用于浏览器本身的Layout而无法适用于Canvas画布。要给开发者好且排版可控的方案，那就要开发一个用JavaScript实现类似CSS的布局子集的框架。否则UI的组件在画布上没有Layout就无意义。这个布局框架实现成本（简单实现）理论上并不大，大的是在于未来增加新Feature并相互组合时与浏览器本身有差异，需要有完整的Unit Test。正好最近Facebook也开源了一个用JavaScript写CSS Layout子集的解决方案，实现了：paddingwidthmarginborderflexposition（relative/absolute）等等Feature。Github地址：这些CSS布局子集基本能满足我们前期开发预期。开发框架用css-layout再加上UI管理层，就可以比较清晰的实现出Canvas的UI组件框架了。那么，剩下的事就是：应用开发框架的选择，如：选择React/MVC框架；模拟DOM层次，即图层管理。并且，让我非常欣喜的是，Flipboard在2月已经完成了构建，基于React框架。基于css-layout+React基础上整合而成。Canvas UI框架不足与风险看上去Canvas框架这么牛逼，但有很多缺陷。对开发人员的要求较高。需要用JavaScript实现一些浏览器基本的布局、图层管理；第三方使用者学习成本高。不象是用传统“标签”就可以实现UI在浏览器的输出；开发者是否买账，对于框架的开发易用性有“很大”的挑战；对开发质量提出新要求。由于所有的UI组件与交互都在画布Canvas里，所以调试成本比较高，需要有较为完整的Logging与Debugging方案；用户可用性会受影响。例如：*语音无法识别Canvas里的文字；无法像WebView里一样将画布里的文字选中并复制出来。总结Canvas UI框架作为柳暗花明又一村的技术。短短一周多，已经近4K的star。确实很赞。与其看Facebook开源React Native，不如好好研究react-canvas吧。本文转载自：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章游戏ui，移动端ui和网页ui哪个好_游戏ui吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：2,252贴子：
游戏ui，移动端ui和网页ui哪个好
我认为是游戏UI，游戏是最近十年在中国发展起来的。在游戏制作过程中的分工有美术（AD、角色、场景、动作、特效、），在UI里面游戏有前途。移动端的网页是对手机客户端进行设计，网络游戏更注重UI的交互性、风格的多样性、内容的充实性。游戏更注重画面的表现力、技术的先进性和UI细节的细腻性。虽然PC端和手机端的游戏有区别，但是你在PC端掌握了，那对手机端就更是游刃有余了。网页ui是静虽然效果可以做的更好，但是还是取决于公司的投入而游戏ui的起步点就不一样了。
贴吧热议榜
使用签名档&&
保存至快速回贴您所在的位置： &
10个必备的移动UI设计资源站
10个必备的移动UI设计资源站
cocoachina
创建移动设计模式是非常重要的一步，记住！这是为移动设备设计而不是web。不仅仅是移动屏幕远小于普通的电脑屏幕，关键是鼠标和键盘已经被手指替代了！当然还有更重要的，说起来很苦逼，我们再也不能使用一种模式来通吃这些不同的移动平台了，这可比兼容IE那一家子要苦难得多，毕竟还没有很好的规范。不是吓唬你，别以为只有那巴掌地大小，为移动端做设计并不是很容易。
值得庆幸的是，国外已经有很多优秀的移动用户界面资源是可用的，这些先驱的宝贵资源可以大大帮助你的移动设计或开发你的响应式网站。相信今天要隆重推荐的10个网站，无论是在你设计一个新的移动应用程序还是寻找特定的设计解决方案时，他们都会踏踏实实的帮助到你。
这个网站上展示了许多完美的交互设计和视觉设计案例，网站提供了许多不同的方式来引导你便捷的搜寻感兴趣的项目！一定要利用好标签哟。
<span style="color: #.& &
这个特殊的网站开发和维护都由马修&史密斯和克里斯&波洛克两人完成。同样是一个画廊的信息展现方式，这个网站有超过7000的作品集，有大量的设计灵感。优设哥之前也在微博多次推荐，不容错过。
这个优秀的网站利用广阔的画廊来展现移动UI设计模式。在这里，你可以看到超过1000个真正移动应用程序的屏幕截图，省时省心了不少吧。此外，您更可以获得一些超棒的设计模式，譬如欢迎界面和注册页面等。
这个惊人的web应用程序可以帮助你探索无数的用户体验设计模式，如日期选择器和面板选择器。然而，这个应用程序需要Silverlight插件。
可爱的UI网站，提供流行的移动应用程序的用户界面元素。如按钮、列表、通讯录等等。
这个网站包含大量的最佳实践交互设计。收集了许多例子来让你了解他们的适用性，优设哥提醒您：千万，千万别小看这个简单的网站。这可是一个宝库来着。
移动设计模式的画廊，它提供了许多特殊技巧。
这个设计画廊着重关注流行的web页面元素(比如导航，此外，它凸显了流行的设计趋势。这个网站有超过30个类别，你也可以看看其他设计师对案例的评价，取长补短。
这是一个UI设计图书馆和画廊。
这个网站提供了大量的优秀设计模式。UI设计人员可以通过访问这个网站得到灵感。在这里，你可以轻易找到一些常见的移动UI设计模式。在这个网站有20个类别，这样你可以很容易寻找到你的目标。&
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&&&的更多文章
本书将介绍如何利用行业领先软件来制作移动内容。通过学习，你将
网友评论TOP5
由于HTML5、CSS3和JS的能力在不同终端和平台上的支持
由于HTML5、CSS3和JS的能力在不同终端和平台上的支持
由于HTML5、CSS3和JS的能力在不同终端和平台上的支持
本书依据最新版《网络工程师考试大纲》的考核要求，深入研究了历年网络工程师考试试题的命题风格和试题结构，对考查的知识点进行
Windows Phone专家
Android开发专家
51CTO旗下网站}