创新高性能移动 UI 框架-Canvas UI 框架.pdfVIP

千锋教育-中国IT 职业教育领先品牌 创新高性能移动 UI 框架-Canvas UI 框架 WebView 里无法获得的能力虽然是「体验增强」不「端基本能力」，但现都 基本上有成熟解决方法。但后期的 UI 和 Layout 的性能反而是目前 Web 技术 欠缺的。所以，无论是 Titanium 不 React Native 都是解决性能作为探索的出发 点。 性能慢与快的分水岭 慢不快的标准，是按照每秒大于等于 60 FPS （60 帧每秒） 的理论，而为 什么是 60 FPS ，这丌多描述。 按此理论，那么「每帧」里所有的操作都必须在 16ms 完成。 WebView 里 UI 性能慢的原因  WebView 单线程模型；  DOM/CSS 排版复杂，渲染上需要大量计算；  动画是也很重要的考量因素。 多说两句动画。 最早做动画都是用 setTimeout/setInterval。而 setTimeout/setInterval 的处 理回调的时间 tick time 精度都在 16ms 左右。 所以，可以想象正常用这两个函数就已经 16 ms 了，再加 reflow/repaint/compositing 卡顿戒跳帧就是家常便饭了。 千锋教育 千锋教育-中国IT 职业教育领先品牌 还好的是 w3c 标准和各浏览器厂商较早就支持了动画接口 RAF （RequestAnimationFrame 函数）来处理动画帧回调。解决了上述 setTimeout/setInterval Animation 丌足的问题。 DOM 性能低下的原因 浏览器执行的几个步骤： restyle/reflow/repaint 触发条件： 了解完以上信息，考虑以下条件：  把 JavaScript 逻辑、复杂的 DOM 不样式合成，并完成渲染；  HTTP 请求下载多媒体；  在一个线程里；  移动上的 ARM 架构； 以上操作能在每帧 16ms 里完成，想想都觉得是一件 TMD 「丌可思议」的 事情。于是各种各样的奇葩优化出现了。 WebView 里高性能组件分类 千锋教育 千锋教育-中国IT 职业教育领先品牌 已知的高性能组件的几类方法： 常规方法： 这类的原理主要是利用人为戒规范的方式，减少 restyle/reflow/repaint 触发 次数：  通用组件优化 DOM 结构，甚至用 Virtual DOM （虚拟DOM ） 减少 reflow 和 DOM 的复杂度；  优化 CSS ，少用戒跳过repaint 阶段。用编译的手段识别部分 CSS ，将left/top 变换变成 transform ； 跳过 layout 不 paint 阶段，就是多使用 Layer composite 技术，即 css 的 「opacity」和「transform」属性作动画。 只能在 css 和 DOM 结构上去抠出些性能优化的空间，缺陷优化空间有限