大屏小程序探索实践 | Cube 技术解读

阅读模式 · 发表于 2022-8-24 07:14:01

所谓大屏小法式，是以 Cube 小法式技术栈为载体，运转在智能电视或智能机顶盒等设惫亓一种小法式形状。这些装备的首要特点是：

以 Android 系统为主，系统版本普遍较低，有些装备仍然逗留在 Android 4.2，Android 4.4 以下装备占比在40%+；
内存低，512MB 以下的装备占比跨越 20%，1GB 以下的装备占比跨越 60%；
CPU 主频低，双核占比在 20% 左右，有的只要 1.5GHz；
和手机装备相比力，按手机淘宝的装备评分系统为参照的话，全数都是低端装备。

正是由于这些智能电视或智能机顶盒自然存在的硬件上的瓶颈，且运转在这些智能电视或智能机顶盒上的Android 利用法式在版本公布上受行业广电监管以及硬件厂商的限制诸多，每年只要几次的版本公布迭代窗口。所以亟需一种更小、更快、更省的静态化技术栈来处理用户装备升级周期长，客户端版本长尾题目。而 Cube 小法式技术栈，从设想之初就具有更小、更快、更省的特点，是以成为智能电视或智能机顶盒（以下简称为 OTT装备的不贰挑选。
对于 Cube 衬着引擎来说，在付出宝钱包中，面临的是手机真个场景，而在OTT上，面临的是一个全新的场景，既需要处理 OTT 装备的性能题目，也需要更公道的焦点引擎才能的支持。
焦点引擎

作甚焦点引擎？上面提到了作甚大屏小法式以及大屏小法式运转的 OTT 装备，而这些 OTT 装备的交互方式，就是经过遥控器来操纵，这一点和触控装备完全分歧。遥控器经过 Android 系统的按键系统，停止事务分发，来实现利用法式的交互，那末这里就不能不提到我们的焦点引擎，也就是 FocusEngine 了。
所谓 FocusEngine，现实包括几大部分：FocusNode (焦点 View )、FocusTree (焦点树)、FocusFinder (焦点查找器)、FocusState (焦点状态)、FocusEffect(焦点结果)。
而原本的 Cube 小法式技术栈不具有FocusEngine 的才能，也就是说衬着引擎中缺少最初一棵树 FocusTree，更没有焦点查找器、焦点状态以及焦点结果的支持。关于Cube 小法式衬着引擎中 LayoutTree，RenderTree，LayerTree，此处不再停止额外赘述，具体领会可拜见之前文章先容《Cube 衬着设想的宿世今生》中常见术语和数据模子的先容。
实现细节

上面我们提到 FocusEngine 包括的几个首要部分，下面我们来看看 Cube 小法式衬着引擎中的知名豪杰------ Focus 的实现。
FocusNode (焦点 View )

FocusNode 是用于获得遥控器按键事务的工具，也就是说当小法式的 AXML 中一个 view 节点具有了focusable 属性时，那末在 Cube 衬着引擎中会映照成一个 FocusNode 节点，且会停止实体化。该节点具有自动获得焦点 requestFocus 和自动断根焦点 clearFocus 的才能，同时也可以监听 focus 的变化，可接收到 onFocusChange 的回调 onFocus 和 onBlur 事务告诉

<view id=&#34;focus-control&#34; class=&#34;button&#34; focusable=&#34;true&#34; onFocus=&#34;handleFocus&#34;
onBlur=&#34;handleBlur&#34;>
doRequestFocus() {
my.createSelectorQuery().select(&#39;#focus-control&#39;).node().exec(function(ret) {
const ref = ret && ret[0];
ref.requestFocus();
})
}

复制代码

FocusTree (焦点树)

FocusTree 是与 Cube 衬着引擎中的 LayerTree 自力开的，一棵零丁的实体节点的 Tree，它首要用于保护 LayerTree 中可聚焦 FocusNode 之间的父子关系。FocusTree 临时没法经过零丁的工具检察这棵树的结构，但挂在树上的 FocusNode 可经过 DevTools 的 Elements 或 Android 的 LayoutInspector 检察，后续会斟酌支持停止自力树的 dump 后导出方便检察。焦点树结构示例以下：

大屏小法式摸索理论 | Cube 技术解读-1.jpg

FocusFinder (焦点查找器)

FocusFinder 是负责焦点搜索逻辑的焦点查找器，内部保护着用于从当前具有焦点的 FocusNode 中查找给定偏向上的下一个可聚焦 FocusNode 的算法(PS：这里的偏向指的是遥控器操纵的高低左右)。
在 Cube 的衬着引擎中，不管是 Layout、Render pipline，还是 Tree，代码均采用 C++ 来实现，而FocusFinder 的算法实现亦是如此。我们在 FocusFinder 的实现上，以 Android 的 FocusFinder 实现为蓝本，实现了合适 Cube 衬着引擎的焦点查找算法，去除了 Android 自己的 descendant focusability 支持，采用默许FOCUS_AFTER_DESCENDANTS 的查找战略，且基于内部 FocusNode 的治理机制，不再额外供给UserSpecifiedFocusNode 的支持，并支持了五种优先级查找战略，别离为CENTER_FIRST（中心对齐优先）、LEFT_FIRST（左对齐优先）、RIGHT_FIRST（右对齐优先）、TOP_FIRST（顶对齐优先）、BOTTOM_FIRST（底对齐优先）。焦点查找战略举例说明以下：

大屏小法式摸索理论 | Cube 技术解读-2.jpg

如上所示，当前获得焦点的 FocusNode 为 A，而 FocusNode B 和 FocusNode C 在水平偏向上与 Current Focus Node A 的 Rect 存在交集，是以在内部我们会经过带权重比的间隔判定；FocusNode E，在垂直偏向上与Current Focus Node A 的 Rect 有交集，而水平偏向上没有，所以更合适作为 FOCUS_UP 的焦点查找，而不是FOCUS_LEFT 的查找；而 FocusNode B 和 FocusNode D，依照 Cube 的衬着引擎的法则，在水平偏向上是答应跨列移动焦点的而垂直偏向是不答应跨列移动焦点的且 FocusNode E 会作为 FOCUS_UP 的优先挑选，是以，此时停止 FOCUS_LEFT 的时辰，会优先挑选 FocusNode B。
FocusState (焦点状态)

FocusState 是负责保护 FocusNode 节点焦点状态的治理者，内部保护 FocusNode 节点的焦点状态，由于在 AXML 下，当一个 View 节点获得 focusable 属性时，那末此时该节点会被标志成 FocusNode 节点。当Android 系统按键分发时，FocusFinder 接收到查找的号令，会从 FocusTree 中停止 FocusNode 的查找，当找到最合适的 FocusNode 节点时，那末此时该 FocusNode 需要标志自己的 FocusState 为 focused 状态，与此同时，假定内部的 child node 没有 FocusNode，但有叶子节点 text 或 image，那末此时会标志 text 或 image 节点为 selected 状态。
FocusEffect (焦点结果)

FocusEffect 首要用来暗示分歧的节点对应的 FocusState 的焦点结果，在前端开辟者视角下，首要经过 CSS 的伪类 :focus 来实现，以下代码片断：

.button {
margin-top: 30rpx;
margin-left: 15rpx;
width: 450rpx;
height: 200rpx;
border: 2rpx red solid;
}
.button:focus {
border: 2rpx blue solid;
}

复制代码

以下图所示，高亮的 Item 地点的节点为当前获得焦点的 FocusNode：

下面看下在 OTT 装备上 Cube 小法式的根本性能数据：(以淘宝特价版小法式为例)

大屏小法式摸索理论 | Cube 技术解读-4.jpg

因优化环节触及到整体小法式技术栈，所以这里简单提一下小法式根本设备中的几大部分，其中包括：容器，前端框架，Cube 衬着引擎，剧本引擎。首要性能优化手段包括但不限于以下内容：

包巨细：移除 OTT 装备不需要的才能模块，移除 AntUI、平安数据库、permission 管控模块，同享apk 宿主内 so。
剧本引擎：在付出宝钱包移动端上利用 JSC/V8 作为 JS 代码的履行引擎，IOT 装备上利用的是 QuickJS。
内存占用：
- 静态区块优化；
- JNI Global Reference 优化；
- Activity Context 高低文，虚拟机和 Native 的解耦，避免 Context 被 Native 持有，形成内存泄露；
- Native 中衬着树相关内存优化，内存泄露检测处置。
启动性能：
- 虚拟机优化方面，利用 Class Verify 抑制 + GC 抑制；
- 优化 Android InvocationHandler 静态代理在中低端装备耗时题目；
- 小法式产物 Bytecode 才能支持，削减小法式产物在剧本引擎下 Parse 和 AST 的阶段耗时，间接履行Bytecode。

上面我们先容完了和 FocusEngine 相关的实现细节，相信大师对于 FocusEngine 所包括的几个首要部分有了初步的熟悉和领会。经过上述关于 FocusNode 节点以及 FocusEffect 伪类的代码片断，不丢脸出，只要利用了 Cube 小法式技术栈，那末开辟一个大屏小法式，和开辟一个普通的付出宝小法式差别性是微不敷道的。
除了开辟方式和普通付出宝小法式完全无二之外，在调试工具上也是可以利用 Chrome DevTools 来停止编辑和点窜响应的可 Focus 的 DOM 节点的，以下图所示：

大屏小法式摸索理论 | Cube 技术解读-5.jpg

从拥抱 Native 开辟，到拥抱静态化小法式技术栈开辟，即处理了碎片化装备下的长尾瓶颈题目，又是产物技术的架构升级。在 CIBN 酷喵影视下，我们和营业方一道停止了大胆的创新和摸索，终极实现了多种 Cube 小法式的产物形状。其中包括用于双十一战争的直播间半屏小法式、用于桌面首页高文业的 Tab 小法式、用于搜索广告下的嵌入式小法式、以及用于营业运营的全屏小法式，结果别离以下：

大屏小法式摸索理论 | Cube 技术解读-6.jpg

关于衬着引擎自己的思考，未来会进一步打磨整体的衬着链路，在性能上提升 Cube 小法式的启动性能。众所周知，诠释性说话每次运转时都需要经过诠释器对法式停止静态诠释和履行。而这个进程少不了从 Parse 到AST，再从 AST 到 Bytecode 的进程，未来会进一步削减 Parse 和 AST 的进程，能充实发挥剧本引擎对Bytecode 的支持，提升启动性能。别的，也会逐步削减对 Platform 层的依靠，使 Platform 层更轻量化，充实下降 Cube 衬着系统战争台自己的衬着系统的耦合，更好的完善提升衬着自己的才能。
在营业场景摸索上，未来会与更多的二三方停止合作，不管是大屏真个 App，还是桌面 launcher，帮助他们处理版本长尾效应和营业静态性题目，固然也会有更多的场景的支持，比方小游戏，3D等。
假如你需要一种更小、更快、更省的静态化衬着技术栈，且具有更好的开辟体验和行业共鸣，那末 Cube 也许是一个不错的挑选。
原文链接
本文为阿里云原创内容，未经答应不得转载。

		自动登录	找回密码
密码			立即注册


	选中篇: 置顶\|

选中 篇:

大屏小程序探索实践 | Cube 技术解读

说点什么

神回复

选中篇: