干货系列之创新高性能移动ui框架-canvasui框架

《干货系列之创新高性能移动ui框架-canvasui框架》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、千锋教育-中国IT职业教育领先品牌干货系列之创新高性能移动UI框架-CanvasUI框架WebView里无法获得的能力虽然是「体验增强」与「端基本能力」，但现都基本上有成熟解决方法。但后期的UI和Layout的性能反而是目前Web技术欠缺的。所以，无论是Titanium与ReactNative都是解决性能作为探索的出发点。性能慢与快的分水岭慢与快的标准，是按照每秒大于等于60FPS（60帧每秒）的理论，而为什么是60FPS，这不多描述。按此理论，那么「每帧」里所有的操作都必须在16ms完成。WebView里UI性能慢的原因·WebView单线

2、程模型；·DOM/CSS排版复杂，渲染上需要大量计算；·动画是也很重要的考量因素。多说两句动画。最早做动画都是用setTimeout/setInterval。而setTimeout/setInterval的处理回调的时间ticktime精度都在16ms左右。所以，可以想象正常用这两个函数就已经16ms了，再加reflow/repaint/compositing卡顿或跳帧就是家常便饭了。千锋教育www.qfedu.com千锋教育-中国IT职业教育领先品牌还好的是w3c标准和各浏览器厂商较早就支持了动画接口RAF（RequestAnimation

3、Frame函数）来处理动画帧回调。解决了上述setTimeout/setIntervalAnimation不足的问题。DOM性能低下的原因浏览器执行的几个步骤：restyle/reflow/repaint触发条件：了解完以上信息，考虑以下条件：·把JavaScript逻辑、复杂的DOM与样式合成，并完成渲染；·HTTP请求下载多媒体；·在一个线程里；·移动上的ARM架构；以上操作能在每帧16ms里完成，想想都觉得是一件TMD「不可思议」的事情。于是各种各样的奇葩优化出现了。WebView里高性能组件分类千锋教育www.qfedu.com千锋教

4、育-中国IT职业教育领先品牌已知的高性能组件的几类方法：常规方法：这类的原理主要是利用人为或规范的方式，减少restyle/reflow/repaint触发次数：·通用组件优化DOM结构，甚至用VirtualDOM（虚拟DOM）减少reflow和DOM的复杂度；·优化CSS，少用或跳过repaint阶段。用编译的手段识别部分CSS，将left/top变换变成transform；跳过layout与paint阶段，就是多使用Layercomposite技术，即css的「opacity」和「transform」属性作动画。只能在css和DOM结构上

5、去抠出些性能优化的空间，缺陷优化空间有限；这种优化技巧通常是放在最后调优时冲剌使用，不能做为常规手段。进阶方法千锋教育www.qfedu.com千锋教育-中国IT职业教育领先品牌原理是尽可能利用native能力，甚至将JavaScript转换成nativeApp代码。·用JavaScript调起native组件，将增强与高性能组件交给native来处理，以前在FEX提的「轻组件」就是这么做的。这个原理类似PC时代的ActiveX；·将WebView里无法实现的功能用native实现。·利用nativeActivity的渲染线程，分担浏览器渲染

6、压力（WebViewCoreThread是WebView线程）。·最dirty的事在于处理native上UI的层次管理。需要后台有线程一直在检测scroll/resize/uichange时UI边界是否有相互覆盖与叠加的问题。·JavaScript翻译成Java/OC代码。类似ReactNative/Titanium，将JavaScript翻译成native代码，特别是UI组件上。（有兴趣的同学可以反编译ReactNative写的FacebookGroup）·例：用React，通过虚拟WebUI映射至NativeView，并且将代码逻辑翻译成

7、native。新方法—CanvasUI这也是要说的重点，用「开发游戏」的思路来做UI组件探索，我把它称为CanvasUIframework。CanvasUIframework用游戏的思路做UI，最早我有这个想法是2014年。为什么要用Canvas?Canvas是H5的画布元素，即一个DOM元素。通过脚本控制逻辑给画布千锋教育www.qfedu.com千锋教育-中国IT职业教育领先品牌上增加文字与图像，而浏览器只需要绘制一次形成一幅图。·只用一个CanvasDOM元素，降低DOM数量与渲染的复杂度，可以将原来CPU密集型变成GPU操作。绝大多数

8、针对Canvas是用硬件GPU加速渲染。·GPU的ALU（计算单元）比CPU要多很多，而控制运算（逻辑）则可以用JavaScript在CPU里做，甚至还可以用Web