Canvas UI：卓越性能的移动用户界面框架

时间：11-08 名人轶事提交错误

这篇文章给大家聊聊关于Canvas UI：卓越性能的移动用户界面框架，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

Canvas UI - 高性能移动UI框架- aiqiqi58.com - 2

慢与快的标准是基于大于等于60 FPS/秒（每秒60帧）的理论，而为什么是60 FPS，就不多描述了。

根据这个理论，“每一帧”中的所有操作必须在16ms内完成。

WebView 中UI 性能缓慢的原因。

WebView单线程模型； DOM/CSS布局复杂，需要大量计算进行渲染；动画也是一个非常重要的考虑因素。

关于动画的几句话。

最早的动画是使用setTimeout/setInterval 完成的。

setTimeout/setInterval的回调处理时间tick时间的精度在16ms左右。

因此，你可以想象，这两个函数的正常使用已经是16 ms，并且添加reflow/repaint/compositing来冻结或跳帧是常见的。

幸运的是，w3c标准和各个浏览器厂商很早就支持了动画接口RAF（RequestAnimationFrame函数）来处理动画帧回调。解决了上述setTimeout/setInterval动画不足的问题。

DOM 性能不佳的原因。

浏览器执行的几个步骤：

Canvas UI - 高性能移动UI框架- aiqiqi58.com - 3

重新样式/回流/重绘触发条件：

Canvas UI 高性能移动UI框架- aiqiqi58.com - 4

了解了以上信息后，考虑以下条件：结合JavaScript逻辑、复杂的DOM和样式，完成渲染；下载多媒体的HTTP请求；在一个线程中；移动端ARM架构；

上述操作每帧可以在16ms内完成，仔细想想这是一件“难以置信”的事情。

于是各种奇怪的优化就出现了。

WebView中高性能组件的分类。

对于高性能组件，已知有几种类型的方法：

1）常规方法

这类原理主要是采用人工或者标准化的方法来减少restyle/reflow/repaint的触发次数：通用组件优化DOM结构，甚至使用Virtual DOM（虚拟DOM）来降低reflow和DOM的复杂度；优化CSS，减少使用或跳过重绘阶段。使用编译识别部分CSS，将left/top变换改为transform；

跳过布局和绘制阶段，使用图层复合技术，即动画CSS的“不透明度”和“变换”属性。

我们只能在CSS和DOM结构上找到一些性能优化的空间，缺陷优化的空间有限；此优化技术通常是放在最后调优时冲剌使用，不能做为常规手段。**2) 高级方法

原则是尽可能利用原生能力，甚至将JavaScript转化为原生App代码。使用JavaScript激活原生组件，将增强型高性能组件交给原生处理。这就是之前FEX中提到的“轻组件”所做的事情。这个原理类似于PC时代的ActiveX； WebView中无法实现的功能在native中实现。使用原生Activity的渲染线程来分担浏览器渲染压力（WebViewCoreThread即WebView线程）。肮脏的事情是处理原生UI 的分层管理。需要后台有一个线程来检测滚动/调整大小/ui 更改期间UI 边界是否重叠或相互重叠。 JavaScript 被翻译成Java/OC 代码。与React Native/Titanium 类似，将JavaScript 翻译为本机代码，尤其是在UI 组件上。（有兴趣的同学可以反编译React Native写的Facebook Group）示例：使用React通过虚拟Web UI映射到Native View，将代码逻辑翻译成native。

3）新方法——Canvas UI

这也是重点。用“开发游戏”的思路来探索UI组件。我将其称为Canvas UI 框架。

CanvasUI框架

我第一次有这个想法是在2014年，用游戏的创意来制作UI。

为什么使用画布？

Canvas是H5的canvas元素，它是一个DOM元素。通过脚本控制逻辑将文本和图像添加到画布上，浏览器只需绘制一次即可形成图片。仅使用一个Canvas DOM元素，减少DOM数量和渲染复杂度，将原来的CPU密集型操作变成GPU操作。大多数Canvas使用硬件GPU加速渲染。 GPU 比CPU 拥有更多的ALU（计算单元），并且可以使用JavaScript 在CPU 中完成控制操作（逻辑）。您甚至可以使用WebWorker多线程来处理CPU密集型操作，从而实现充分利用硬件资源的能力。 Canvas画布无论是JavaScript H5还是原生都有类似的API。所以：可以在浏览器中进行本地调试。最糟糕的解决方案可以使用Canvas UI 在浏览器中运行。更进一步，您可以将浏览器Canvas 界面反映到本机画布上以提高性能。

值得一提的是，腾讯的X5内核内置了egret（Egret游戏引擎和cocos2dx），所以如果时间线拉长的话，WebView的canvas功能会更加强大。

2014年中期，很多人都见过默认内置cocos2dx引擎的浏览器。用WebView玩《钓鱼大师》非常流畅。

由此可见，使用Canvas作为UI组件的可行性是相当高的。

解决方案。

业界很早就有尝试用游戏的思路来解决DOM 绘制的问题。

最早的实验是愤怒的小鸟游戏制造商zynga做的。 2010年编写的演示滚动器：https://github.com/zynga/scroller

设计并开发基于Canvas的UI框架系统。由于系统比较复杂，需要接管浏览器构建的整个流程：

要在实际环境中验证效果，需要将原始页面的DOM写入canvas，再加上一些调优和比较，需要比较大的工作量（包括Zynga，只实现了一个简单的demo）

暂时搁置一下吧。

最近在浏览github和新闻时，惊喜地发现有人在做同样的事情。最后找到了Flipboard同学写的一个demo：

https://flipboard.com/@flipboard/flipboard-picks-8a1uu7ngz 这个demo已经足够复杂了，动画数量众多，眼花缭乱。整个用户界面是使用画布构建的。

测试后：