網(wǎng)上有很多關(guān)于pos機(jī)程序說明, Cube 小程序技術(shù)詳解的知識，也有很多人為大家解答關(guān)于pos機(jī)程序說明的問題，今天pos機(jī)之家(m.dsth100338.com)為大家整理了關(guān)于這方面的知識，讓我們一起來看下吧!

本文目錄一覽：

1、pos機(jī)程序說明

pos機(jī)程序說明

Cube 渲染小程序

模塊組成

小程序視角，Cube 渲染引擎主要由以下模塊組成：

Components：主要是小程序規(guī)范里的組件；Layout：支持 Inline，Block，F(xiàn)lex，Inline-Block，Inline-Flex 等多種布局方式，還包括文本分詞，斷行等計(jì)算；Style：支持樣式解析，樣式匹配，樣式繼承，偽類和偽元素等多種選擇器；Rendering：管理渲染相關(guān) Render Tree，圖片資源請求調(diào)度等；Animation：JS 和 CSS 動(dòng)畫實(shí)現(xiàn)；JS Bridge：和 JS 引擎橋接；JS Engine：目前支持 V8，JSC，QuickJS；其中 Android 下支持 V8，QuickJS；Compositor：用于動(dòng)畫和圖層的合成器（開發(fā)中）。

線程模型

Cube 小程序技術(shù)棧內(nèi)部有這么幾個(gè)線程：Bridge，Layout，Render，Paint，UI 等。

Bridge 線程：執(zhí)行 JS；與 AppX 橋接的類 DOM 的 JSAPI；處理 JS 相關(guān)事件；Layout 線程：布局計(jì)算；樣式計(jì)算與匹配；維護(hù) Layout Tree；Render 線程：維護(hù) Render Tree；綁定數(shù)據(jù)；分層；Paint 線程：生成繪制命令；UI 線程：平臺(tái)事件分發(fā)；UI 布局。

小結(jié)：

并行布局，異步繪制：這里的并行是指 JS 執(zhí)行，Layout 布局 以及 Render 三者完全并行處理。由于 Layout 和 Render，Paint 等不在一個(gè)線程，因此是異步繪制；多個(gè)線程協(xié)同工作，有點(diǎn)像 CPU 的 5 級流水線。

值得注意得是：Web 渲染引擎有個(gè)特點(diǎn)就是和 Node 相關(guān)的 DOM 操作必須和 JS 在一個(gè)線程。這就導(dǎo)致解析 HTML，布局，樣式計(jì)算，DOM，JS （包括垃圾回收）都在一個(gè)線程里。帶來的后果就是只有解析完文檔才能看到 UI 效果，這也是 Web 渲染小程序白屏?xí)r間較長的一個(gè)原因。

Cube 小程序技術(shù)棧，將“DOM操作” 和 JS 執(zhí)行解耦。因此 JS 的 GC 不會(huì)影響 UI 呈現(xiàn)。這種實(shí)現(xiàn)對于加快小程序啟動(dòng)非常有幫助。由于布局計(jì)算和 JS 執(zhí)行也解開耦合，因此一般不會(huì)由于 JS 執(zhí)行阻塞 UI 交互。

Cube 小程序技術(shù)棧的特點(diǎn)

體積小，啟動(dòng)快：主 so 只有 2.8 MB（如果包括 Ariver，AppX，InsideSDK，整體小程序技術(shù)棧最小是 5.7MB）。另外可以享受到 OS 的紅利（包括 UI 的初始化和緩存）；高性能：接近于原生體驗(yàn)；內(nèi)存占用小：小程序技術(shù)棧初始化后（包括 Inside SDK，Cube，AppX），大約只需要 7.5 MB；支持 Android，iOS 雙端。

與 Web 引擎對比

下面僅僅針對小程序場景與 Web 引擎對比：

技術(shù)演進(jìn)

讓小程序業(yè)務(wù)低成本適配 Cube 渲染小程序，需要做三方面的工作：

擁抱 Web 技術(shù)，補(bǔ)齊前端開發(fā)常用的能力：包括 CSS，小程序組件等；完善相關(guān)工具：包括開發(fā)，調(diào)試，Profile，發(fā)布，打包等；針對 Cube 的架構(gòu)特點(diǎn)，深入優(yōu)化，并拉開和 Web 渲染的差異。提供更好的用戶體驗(yàn)。

新的流式布局（Flow Layout）

最初 Cube 小程序使用只支持 Flex 布局 Yoga 用于布局計(jì)算。后面升級成支持 Block，F(xiàn)lex，Inline-Block等多種布局方式的 Flow Layout。從而解決開發(fā)者只能使用 Flex 布局的困擾。目前兩個(gè)布局引擎 Cube 內(nèi)部都支持。其中 Flow Layout 主要用在小程序，Yoga 用在卡片。兩者能力差異如下：

支持 CSS 樣式表

老版本的 Cube 只支持內(nèi)聯(lián)樣式和簡單的 CSS 選擇器；然而小程序并沒有約束 CSS，因此 Cube 擴(kuò)充支持 CSS 樣式表，樣式繼承，多種選擇器等。從而使得 Web 渲染切換到 Cube 渲染，適配成本大大降低。甚至部分小程序可以做到在小程序 IDE 里基于 Web 渲染開發(fā)，然后打包成 Cube 渲染產(chǎn)物在真機(jī)上預(yù)覽。前端同學(xué)無需進(jìn)行過多的修改和適配。

新老 Cube 版本，選擇器支持上的差異如下：

支持自動(dòng)分詞，斷行（Inline Text）

最初 Cube 用的是 Android 和 iOS 提供的文本計(jì)算和繪制能力。這種技術(shù)方案（以下稱為平臺(tái)層 Text）存在3個(gè)問題：

性能問題：特別是 Android 下，利用 Android 平臺(tái)層的接口實(shí)現(xiàn)文本布局計(jì)算，導(dǎo)致在文本較多的情況下，布局耗時(shí)在渲染整體耗時(shí)里占比較高；富文本特性：富文本以及許多文本特性支持較麻煩；各平臺(tái)上實(shí)現(xiàn)文本效果存在細(xì)節(jié)差異或者兼容性問題。

針對上述問題，在 Flow Layout 基礎(chǔ)上增強(qiáng)支持 Inline Text 布局計(jì)算文本?；?Inline Text 可以較輕松實(shí)現(xiàn)以下富文本，圖文混排，分詞，自動(dòng)換行等。

1.富文本

2.自動(dòng)換行和分詞

Inline Text 實(shí)現(xiàn)前后的文本樣式對比如下：

采用 QuickJS 替代 V8

V8 雖然是性能最高的 JS 引擎，但是存在內(nèi)存占用大，初始化較慢等不足。在 IoT 或者低端設(shè)備上這些不足會(huì)被放大。因此在這些設(shè)備上，Cube 采用 QuickJS 取代 V8。一方面降低內(nèi)存占用，另外一方面提升初始化性能。

Cube 內(nèi)部目前適配了多個(gè) JS 引擎，具體如下：

在 Android 移動(dòng)端上使用 V8 和 JSIiOS 上使用 JSCIoT 等低端設(shè)備上使用 QuickJS

另外我們在開源 QuickJS 基礎(chǔ)上做了些優(yōu)化工作。優(yōu)化的結(jié)果大致如下（后續(xù)文章將詳細(xì)介紹）：

支持動(dòng)畫和多媒體組件

除了上述基礎(chǔ)組件和能力之外，動(dòng)畫和多媒體也是部分小程序不可缺少的。因此我們擴(kuò)展支持了 Video，Canvas、Lottie，Live Player 等組件支持。并應(yīng)用于 TV 大屏小程序、小游戲以及直播場景上。

在低端設(shè)備上，如何提高動(dòng)畫幀率并且降低內(nèi)存占用也做了深度的優(yōu)化。以下是 Video 和 Canvas 組件在小程序中的效果圖：

Cavas 組件

Video 組件

Cavas 組件

Video 組件

支持多種模式的小程序產(chǎn)物

目前 Cube 支持多種模式的小程序產(chǎn)物：Native，Cube，Shared。

Native 模式：對應(yīng)的是舊的 Cube 渲染小程序模式，不支持 CSS 樣式表，只能支持內(nèi)聯(lián)樣式和有限的幾種 CSS 選擇器。性能最高，兼容性較低；Cube 模式：在 Native 模式進(jìn)化而來，支持 CSS 樣式表和多種 CSS 選擇器。性能良好，支持常用的 CSS 樣式和特性（包括樣式繼承，多種 CSS 選擇器）；Shared 模式：為了降低 Web 渲染的小程序遷移或者過渡到 Cube 渲染而開發(fā)。在同一個(gè)小程序產(chǎn)物里既支持 Web 渲染一部分頁面又支持 Cube 渲染一部分頁面。而且 Cube 渲染的頁面支持樣式表。這樣在性能和兼容性平衡。小程序產(chǎn)物相對于 Web 渲染的小程序，產(chǎn)物體積增加不會(huì)超過 10%。

注：如果需要 Web 產(chǎn)物兜底，則 Native 模式 和 Cube 模式的小程序產(chǎn)物，比 Shared 模式大。

研發(fā)進(jìn)展

Cube 小程序在 TV 和 POS 機(jī)上和相關(guān)團(tuán)隊(duì)，一起打磨小程序技術(shù)棧（包括渲染引擎，JS 引擎，AppX，Ariver 容器）等。

在 TV 上面臨的問題：

內(nèi)存少：有的設(shè)備只有 512MB 內(nèi)存，長列表滾動(dòng)容易卡；需要支持焦點(diǎn)切換；CPU 主頻較低：有的只有 1GHz。

短中期目標(biāo)是用小程序技術(shù)棧替代 WeeX 單頁。當(dāng)前進(jìn)展如下：

小程序啟動(dòng)性能上超過 WeeX 單頁（低端設(shè)備上優(yōu)勢更明顯）；內(nèi)存占用上，小程序初始化后內(nèi)存占用小于 10MB，典型小程序整體內(nèi)存占用在 32MB 左右。

具體細(xì)節(jié)后續(xù)文章詳細(xì)總結(jié)。

在 POS 機(jī)上面臨的問題：

在 POS 機(jī)上跑點(diǎn)餐小程序，主要有面臨以下問題：

內(nèi)存少：部分設(shè)備只有 512MB 內(nèi)存，容易出現(xiàn)卡死和 OOM；CPU 核心少：部分 CPU 只有雙核（硬件性能大約是主流手機(jī)的 1/5）；長列表滾動(dòng)卡。

短中期目標(biāo)是用小程序技術(shù)棧替代 Flutter 開發(fā)的 App。當(dāng)前進(jìn)展如下：

小程序首屏啟動(dòng)性能提升了 30%+；小程序重點(diǎn)的交互場景的頁面，比如：購物車，商品詳情頁等，都已接近 Flutter App；首頁滾動(dòng)幀率達(dá)到 50，用戶已經(jīng)難以感知和 Flutter 的差異（Flutter 幀率是 60）；小程序內(nèi)存占用下降了 30%（本地測試已無卡死和 OOM）。

該場景主要是文本節(jié)點(diǎn)較多的長列表。采用了非常多的優(yōu)化方法，后續(xù)文章詳細(xì)總結(jié)介紹。

總結(jié)

為了適配小程序，Cube 渲染引擎在布局計(jì)算、樣式能力、組件支持，還有開發(fā)工具等在小伙伴一起努力下取得了較大的進(jìn)展。同時(shí)在低端設(shè)備（比如：IoT 設(shè)備）或者性能敏感場景，Cube 小程序性能優(yōu)化，降低內(nèi)存占用也取得了不錯(cuò)的效果。

而未來面對多種多樣的 IoT 設(shè)備，還需要加速技術(shù)演進(jìn)以支持更多的場景。歡迎大家一起來交流討論。

以上就是關(guān)于pos機(jī)程序說明, Cube 小程序技術(shù)詳解的知識，后面我們會(huì)繼續(xù)為大家整理關(guān)于pos機(jī)程序說明的知識，希望能夠幫助到大家！