标签:
WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法。但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的。所以,无论是 Titanium 与 React Native 都是解决性能作为探索的出发点。
慢与快的标准,是按照每秒大于等于 60 FPS(60 帧每秒) 的理论,而为什么是 60 FPS,这不多描述。
按此理论,那么「每帧」里所有的操作都必须在 16ms 完成。
多说两句动画。
最早做动画都是用 setTimeout/setInterval。而 setTimeout/setInterval 的处理回调的时间 tick time 精度都在 16ms 左右。
所以,可以想象正常用这两个函数就已经 16 ms了,再加 reflow/repaint/compositing 卡顿或跳帧就是家常便饭了。
还好的是 w3c 标准和各浏览器厂商较早就支持了动画接口 RAF(RequestAnimationFrame 函数)来处理动画帧回调。解决了上述 setTimeout/setInterval Animation 不足的问题。
浏览器执行的几个步骤:
restyle/reflow/repaint 触发条件:
了解完以上信息,考虑以下条件:
以上操作能在每帧 16ms 里完成,想想都觉得是一件 TMD「不可思议」的事情。于是各种各样的奇葩优化出现了。
已知的高性能组件的几类方法:
这类的原理主要是利用人为或规范的方式,减少 restyle/reflow/repaint 触发次数:
跳过 layout 与 paint 阶段,就是多使用 Layer composite 技术,即 css 的「opacity」和「transform」属性作动画。
只能在 css 和 DOM 结构上去抠出些性能优化的空间,缺陷优化空间有限;这种优化技巧通常是放在最后调优时冲剌使用,不能做为常规手段。
原理是尽可能利用 native 能力,甚至将 JavaScript 转换成 native App 代码。
这也是要说的重点,用「开发游戏」的思路来做 UI 组件探索,我把它称为 Canvas UI framework。
用游戏的思路做 UI,最早我有这个想法是 2014 年。
Canvas 是 H5 的画布元素,即一个 DOM 元素。通过脚本控制逻辑给画布上增加文字与图像,而浏览器只需要绘制一次形成一幅图。
值得一提的是,腾迅的 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:
https://flipboard.com/@flipboard/flipboard-picks-8a1uu7ngz
这个 demo 足够复杂,动画也足够多、炫。是用 canvas 来构建整个 UI。
测试过后:
按照摩尔定律,可以预计明年 Note 的标配的 CPU 和 GPU 配置会成为主流。
而现在用 canvas UI 框架用在 MI4 以下机器仍然比较慢。而 2015 年 H5 开发 App,对很多公司来说只是 plan B 计划,大公司甚至 plan B 都不是。所以,如果一定要在纯 H5 上搞牛逼动画,还是再等等吧。
说回到 Canvas Component framework,回到我上面画的这张图:
UI 组件基于「文本」与「图像」。但 framework,除了 UI 组件本身以外,还需要有 Layout,而 css 只适用于浏览器本身的 layout 而无法适用于 Canvas 画布。
要给开发者好且排版可控的方案,那就要开发一个用 JavaScript 实现类似 CSS 的布局子集的框架。
否则 UI 的组件在画布上没有 layout 就无意义。
这个布局框架实现成本(简单实现)理论上并不大,大的是在于未来增加新 Feature 并相互组合时与浏览器本身有差异,需要有完整的 unit test。正好最近 facebook 也开源了一个用 JavaScript 写 css layout 子集的解决方案,实现了:
等等 Feature。
github 地址:https://github.com/facebook/css-layout
这些 css 布局子集基本能满足我们前期开发预期。
用 css-layout 再加上 UI 管理层,就可以比较清晰的实现出 canvas 的 UI 组件框架了。那么,剩下的事就是:
并且,让我非常欣喜的是,Flipboard 在 2 月已经完成了构建,基于 React 框架。 https://github.com/Flipboard/react-canvas
基于 css-layout + React 基础上整合而成。
看上去 Canvas 框架这么牛逼,但有很多缺陷。
Canvas UI 框架作为柳暗花明又一村的技术。https://github.com/Flipboard/react-canvas 短短一周多,已经近 4K 的 star。确实很赞。
与其看 FB 开源 react native,不如好好研究 react-canvas 吧。
标签:
原文地址:http://www.cnblogs.com/zoucaitou/p/4323270.html