966,690 七月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
创新高性能移动 UI 框架-Canvas UI 框架
创新高性能移动 UI 框架-Canvas UI 框架
日. 估计阅读时间:
智能化运维、Serverless、DevOps......2017年有哪些最新运维技术趋势？!
相关厂商内容
相关赞助商
CNUTCon全球运维技术大会，9月10日-9月11日，上海&光大会展中心大酒店，
慢与快的标准，是按照每秒大于等于 60 FPS（60 帧每秒） 的理论，而为什么是 60 FPS，这不多描述。
按此理论，那么「每帧」里所有的操作都必须在 16ms 完成。
WebView 里 UI 性能慢的原因
WebView 单线程模型；
DOM/CSS 排版复杂，渲染上需要大量计算；
动画是也很重要的考量因素。
多说两句动画。
最早做动画都是用 setTimeout/setInterval。而 setTimeout/setInterval 的处理回调的时间 tick time 精度都在 16ms 左右。
所以，可以想象正常用这两个函数就已经 16 ms了，再加 reflow/repaint/compositing 卡顿或跳帧就是家常便饭了。
还好的是 w3c 标准和各浏览器厂商较早就支持了动画接口 RAF（RequestAnimationFrame 函数）来处理动画帧回调。解决了上述 setTimeout/setInterval Animation 不足的问题。
DOM 性能低下的原因
浏览器执行的几个步骤：
restyle/reflow/repaint 触发条件：
了解完以上信息，考虑以下条件：
把 JavaScript 逻辑、复杂的 DOM 与样式合成，并完成渲染；
HTTP 请求下载多媒体；
在一个线程里；
移动上的 ARM 架构；
以上操作能在每帧 16ms 里完成，想想都觉得是一件 TMD「不可思议」的事情。于是各种各样的奇葩优化出现了。
WebView 里高性能组件分类
已知的高性能组件的几类方法：
常规方法：
这类的原理主要是利用人为或规范的方式，减少 restyle/reflow/repaint 触发次数：
通用组件优化 DOM 结构，甚至用 Virtual DOM（虚拟 DOM）减少 reflow 和 DOM 的复杂度；
优化 CSS，少用或跳过 repaint 阶段。用编译的手段识别部分 CSS，将 left/top 变换变成 transform；
跳过 layout 与 paint 阶段，就是多使用 Layer composite 技术，即 css 的「opacity」和「transform」属性作动画。
只能在 css 和 DOM 结构上去抠出些性能优化的空间，缺陷优化空间有限；这种优化技巧通常是放在最后调优时冲剌使用，不能做为常规手段。
原理是尽可能利用 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。
新方法 & 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：
/zynga/scroller
设计、开发一个基于 Canvas 的 UI 框架系统，由于系统相对比较复杂，需接管浏览器构建的整个过程：
验证在实践环境中的效果，要把原来页面的 DOM 写成 canvas，再加上一些调优与比较，工作量相对大，（包括 zynga 也只是实现了一个简单的 demo 而已）
就暂时搁置了。
最近这阵子在翻 github 与新闻时，我惊喜的发现也有人在做同样的事了，最后发现 Flipboard 同学们写的一个 demo：
/@flipboard/flipboard-picks-8a1uu7ngz
这个 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 子集的解决方案，实现了：
position( relative/absolute )
等等 Feature。
github 地址：/facebook/css-layout
这些 css 布局子集基本能满足我们前期开发预期。
用 css-layout 再加上 UI 管理层，就可以比较清晰的实现出 canvas 的 UI 组件框架了。那么，剩下的事就是：
应用开发框架的选择，如：选择 React/MVC 框架。
模拟 DOM 层次，即图层管理。
并且，让我非常欣喜的是，Flipboard 在 2 月已经完成了构建，基于 React 框架。 /Flipboard/react-canvas
基于 css-layout + React 基础上整合而成。
Canvas UI 框架不足与风险
看上去 Canvas 框架这么牛逼，但有很多缺陷。
对开发人员的要求较高。需要用 JavaScript 实现一些浏览器基本的布局、图层管理。
第三方使用者学习成本高。不象是用传统「标签」就可以实现 UI 在浏览器的输出。
开发者是否买账，对于框架的开发易用性有「很大」的挑战。
对开发质量提出新要求。由于所有的 UI 组件与交互都在画布 Canvas 里，所以调试成本比较高，需要有较为完整的 Logging 与 Debugging 方案。
用户可用性会受影响。例如：* 语音无法识别 Canvas 里的文字。* 无法象 WebView 里一样将画布里的文字选中并复制出来。
Canvas UI 框架作为柳暗花明又一村的技术。/Flipboard/react-canvas 短短一周多，已经近 4K 的 star。确实很赞。
与其看 FB 开源 react native，不如好好研究 react-canvas 吧。
是QCon北京2015大会的讲师。更多精彩内容尽在，现在购票可享9折优惠。
感谢对本文的审校。
给InfoQ中文站投稿或者参与内容翻译工作，请邮件至。也欢迎大家通过新浪微博（）或者腾讯微博（）关注我们，并与我们的编辑和其他读者朋友交流。
Author Contacted
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
Re: js版的wpf/qt?
移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
Re: 移植Android到Web
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
订阅InfoQ每周精要，加入拥有25万多名资深开发者的庞大技术社区。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。关于siki做一个无聊的人，做一些没有意义的事情，写代码，喂马，劈柴，周游世界...... 分类目录
120970 次浏览
既然选择了远方，便只顾风雨兼程。 在第二季的C#编程中，我们将会重点学习如何进行面向对象编程。 本季共38个课时，总时长为5h40m。 如果想要获取视频最新的更新信息和全部的游戏开发视频，请扫一扫右侧的二维码，关注我的公众号！ 1.先来看第一个视频 /page/q/y/3/q.html 2.课时列表 201-调试和错误处理-正常模式下的调试 202&#8230;
120961 次浏览
Unity学习中的基础教程，学好C#是学好Unity游戏开发的基础，本次C#编程共四季，这是第一季，共68课时，总时长10h7m。 如果想要获取视频最新的更新信息和全部的游戏开发视频，请扫一扫右侧的二维码，关注我的公众号！ 1.先来看第一个视频 /page/e/p/p/e0167u0copp.html 2.课时列表 101-C#和.net框架 102-编写第一个程序 &#8230;
132609 次浏览
本文是我发布的所有教程的目录，以后我会持续发布一系列的游戏开发教程，适合人群有下面的几种： 1，想要做独立游戏的人 2，想要找游戏开发相关工作的人 3，闲的蛋疼的人 如果想要获取视频最新的更新信息，请扫一扫右侧的二维码，关注我的公众号！ 第三层初探案例篇(Unity) 泰课在线公开课第001期-flappy bird（共4课时 时长：4h24m） 下载链接：&#8230;
Ninna Nanna (Radio Edit)
Mariangela
Purple Passion
Diana Boncheva
再见吧 喵小姐<option value='/video/av/index_1.html' cid='、101-介绍
<option value='/video/av/index_2.html' cid='、102-游戏案例介绍 游戏菜单
<option value='/video/av/index_3.html' cid='、103-创建游戏菜单
<option value='/video/av/index_4.html' cid='、104-创建公告的文本列表
<option value='/video/av/index_5.html' cid='、105-监听按钮的点击事件
<option value='/video/av/index_6.html' cid='、106-创建旋转的小球游戏
<option value='/video/av/index_7.html' cid='、107-使用Slider控制小球旋转的速度
<option value='/video/av/index_8.html' cid='、201-案例介绍
<option value='/video/av/index_9.html' cid='、202-开发开始界面的背景和锚点Anchor介绍
<option value='/video/av/index_10.html' cid='、203-开发声音按钮
<option value='/video/av/index_11.html' cid='、204-开发界面的其他按钮
<option value='/video/av/index_12.html' cid='、205-开发开始按钮，设置开始界面的自适应
<option value='/video/av/index_13.html' cid='、301-设计头像面板
<option value='/video/av/index_14.html' cid='、302-设计体力的进度条，学习Slider和Filled Image
<option value='/video/av/index_15.html' cid='、303-关于Image中的类型simple,sliced,tiled,filled
<option value='/video/av/index_16.html' cid='、304-设计设置和对话框按钮
17、305-设计技能和技能的冷却效果
<option value='/video/av/index_18.html' cid='、401-开发窗口边框
<option value='/video/av/index_19.html' cid='、402-开发角色面板的背景和关闭按钮
<option value='/video/av/index_20.html' cid='、403-设计头像
<option value='/video/av/index_21.html' cid='、404-设计人物属性
<option value='/video/av/index_22.html' cid='、405-利用toggle开发背包的选项卡
<option value='/video/av/index_23.html' cid='、406-利用Toggle控制面板的切换
<option value='/video/av/index_24.html' cid='、407-设计装备，消耗品和材料面板，并控制他们的切换
<option value='/video/av/index_25.html' cid='、501-关卡选择界面-设计关卡选择的背景
<option value='/video/av/index_26.html' cid='、502-设计关卡按钮和锁定关卡的按钮
<option value='/video/av/index_27.html' cid='、503-添加所有关卡，并利用Grid Layout进行排序
<option value='/video/av/index_28.html' cid='、504-设计关卡的滚动列表
<option value='/video/av/index_29.html' cid='、505-控制滑动列表按照页数滑动
<option value='/video/av/index_30.html' cid='、506-控制列表按照页数滑动的缓动效果
<option value='/video/av/index_31.html' cid='、507-添加控制页数滑动的单选按钮
<option value='/video/av/index_32.html' cid='、508-利用单选按钮控制列表的滑动
<option value='/video/av/index_33.html' cid='、601-任务列表-创建任务列表的背景
<option value='/video/av/index_34.html' cid='、602-创建任务列表的人物项
<option value='/video/av/index_35.html' cid='、603-使用VerticalLayout和ScrollRect控制任务列表的滑动
<option value='/video/av/index_36.html' cid='、701-游戏设置界面-开发设置界面的背景和开发声音的滑动条
<option value='/video/av/index_37.html' cid='、702-开发选择游戏难度的单选按钮
<option value='/video/av/index_38.html' cid='、703-扩展Toggle控件，设计我们自己的音效和音乐的开关按钮
<option value='/video/av/index_39.html' cid='、801-游戏登录界面-设计登录面板，学习设计输入框
<option value='/video/av/index_40.html' cid='、802-结束语
视频地址复制
Flash地址复制
Html地址复制
离线看更方便
用或其他应用扫描二维码
转自/，有能力的请多多支持siki老师（视频只是为了自己看方便）
这是所有视频和素材网盘
http://mp./s/xf7hoRLj1jRsyNUFhuewVA
广播电视节目制作经营许可证：（沪）字第1248号
| 网络文化经营许可证：沪网文[6号 | 信息网络传播视听节目许可证：0910417 | 互联网ICP备案：沪ICP备号-3 沪ICP证：沪B2- | 违法不良信息举报邮箱： | 违法不良信息举报电话：转3Amaze UI框架分析及建议_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Amaze UI框架分析及建议
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢