As a lightweight mini program technology stack, Cube has the characteristics of small size, fast startup, and low memory footprint, and is also more suitable for "use-and-go" mini program scenarios.

Author: Zeng Weihong (Hengshi)

"""""Cube Technology Interpretation" series, the previously launched "Summary of Alipay's New Generation Dynamic Technology Architecture and Selection" "Interpretation of Cube Card Technology Stack" welcomes everyone to review. "

mini program has become a de facto standard in the industry as a dynamic or cross-end development technology stack. As a lightweight mini program technology stack, Cube has the characteristics of small size, fast startup, and low memory footprint, and is also more suitable for "use-and-go" mini program scenarios. The following will focus on the Cube applet technology stack and technology evolution practice (if there is no special explanation, all data and charts are for applets).

Cube rendering applet

modules form

applet perspective, Cube rendering engine mainly consists of the following modules:

• Components: mainly components in the mini program specifications;
• Layout: supports Inline, Block, Flex, Inline-Block, Inline-Flex and other layout methods, including text word segmentation, line breaking, etc. calculation;
• Style: supports style analysis, style matching, style inheritance, pseudo-classes and pseudo-elements and other selectors;
• Rendering: manage rendering related Render Tree, image resource request scheduling, etc.;
• Animation: JS and CSS animation implementation;
• JS Bridge: bridged with JS engine;
• JS Engine: Currently supports V8, JSC, and QuickJS; among them, V8, QuickJS is supported on Android;
• Compositor: a synthesizer for animations and layers (under development).

thread model

Cube There are several threads inside the mini program technology stack: Bridge, Layout, Render, Paint, UI, etc.

• Bridge Thread: Execute JS; JSAPI of DOM-like bridged with AppX; handle JS-related events;
• Layout Thread: Layout calculation; Style calculation and matching; Maintain Layout Tree;
• Render Thread: Maintain Render Tree; Bind data; Layout;
• Paint Thread: Maintain Render Tree; Bind data; Layout;
• Paint Thread: Generate drawing command;
• UI Thread: platform event distribution; UI layout.

Summary :

• parallel layout, asynchronous drawing: Parallelism here refers to the complete parallel processing of JS execution, Layout layout and Render. Since Layout and Render, Paint are not in the same thread, they are drawn asynchronously; multiple threads of
• work together, which is a bit like the 5th level pipeline of CPU.

It is worth noting that : The Web rendering engine has a feature that the DOM operations related to Node must be on the same thread as JS. This leads to parsing HTML, layout, style calculation, DOM, and JS (including garbage collection) in one thread. The consequence is that only after parsing the document can you see the UI effect, which is also a reason why the web rendering mini-programs have a longer time to use white screens.

Cube applet technology stack, decoupling with "DOM operation" and JS. Therefore, the GC of JS will not affect UI rendering. This implementation is very helpful for speeding up the startup of applets. Since layout computing and JS execution also unblock -coupled , UI interactions are generally not blocked due to JS execution.

Cube Features of the mini program technology stack

• small size and fast startup: the main so is only 2.8 MB (if it includes Ariver, AppX, InsideSDK, the smallest mini program technology stack is 5.7 MB).In addition, you can enjoy the bonus of OS (including UI initialization and cache);
• high performance: close to the native experience;
• memory footprint: After the mini program technology stack is initialized (including Inside SDK, Cube, AppX), it only requires about 7.5 MB;
• supports Android and iOS dual-end.

and Web engine comparison

is only for mini program scenarios and Web Engine comparison:

technology evolution

makes mini program business adapt at low cost Cube rendering mini programs requires three aspects:

• embraces web technology and fills in the common capabilities of front-end development of : including CSS, applet components, etc.;
• improves related tools: including development, debugging, profile, publishing, packaging, etc.;
• optimizes in-depth to meet the architectural characteristics of Cube, and unblocks the differences from Web rendering. Provide a better user experience.

New Flow Layout

Originally, Cube applets only used Flex layout Yoga for layout calculations. Later it will be upgraded to Flow Layout that supports various layout methods such as Block, Flex, Inline-Block, etc. This solves the problem that developers can only use Flex layout. Currently, both layout engines, Cube, are internally supported.Among them, Flow Layout is mainly used in mini programs, and Yoga is used in cards. The differences in abilities of the two are as follows:

supports CSS Stylesheet

Old version of Cube only supports inline styles and simple CSS selectors; however, applets do not restrict CSS, so Cube extension supports CSS stylesheets, style inheritance, multiple selectors, etc. This allows web rendering to switch to Cube rendering, greatly reducing the adaptation cost. Some applets can even be developed based on web rendering in the applet IDE, and then packaged into Cube rendering products for previewing on real machines. Front-end students do not need to make too many modifications and adaptations.

new and old Cube versions, the difference in selector support is as follows:

@media

Note:

• [1] The old version of Cube refers to: wallet previous versions 10.2.0; the new style capability of
• basically matches the style capability of the web engine; the new style capability of
• supports complex selectors like this.

div div.jartto p span.yellow a#t1 {}.pixel-ratio-2 .web1px::before {}div:nth-child(2n+1) {}input[type="button"] {}#blue,div div.jartto p span.yellow a#t1 {}

supports automatic word segmentation and line breaking (Inline Text)

Originally Cube used the text calculation and drawing capabilities provided by Android and iOS. There are three problems with this technical solution (hereinafter referred to as platform layer Text):

1. performance problems: especially under Android, text layout calculation is implemented using the interface of the Android platform layer, resulting in a high degree of layout time in the overall rendering time when there is a lot of text;
2. rich text features: rich text and many text features support are troublesome;
3. implementation of text effects on various platforms has different details or compatibility issues.

In response to the above problems, the Inline Text layout calculation text is enhanced based on Flow Layout. Based on Inline Text, the following rich texts, graphic and text mixing, word segmentation, automatic line wrapping, etc. can be easily implemented.

. Rich text

. Automatic line wrap and word segmentation

Inline Text Text The text style pair before and after implementation is as follows:

Note :

• Assuming the original The text features implemented by Cube using the platform layer interface are called: platform layer Texttml6;
• means that the implementation details are incomplete or not fully supported;
• can implement rich text components with rich features based on Inline Text;
• is worth mentioning: this implementation is very exquisite, and the volume of the Cube package is only increased by 170KB. The following articles will discuss the specific details in detail.

Time-consuming comparison of text layout calculation (scenarios with many text nodes):

QuickJS replaces V8

V8, although it is the highest performance JS engine, it has insufficient memory usage and slow initialization. These shortcomings will be amplified on IoT or low-end devices. So on these devices, Cube uses QuickJS instead of V8. On the one hand, it reduces memory usage, and on the other hand, it improves initialization performance.

Cube currently has multiple JS engines, as follows:

• Use V8 and JSI
• on Android mobile terminal to use JSC
• IoT and other low-end devices such as JSC
• IoT. In addition, we have done some optimization work based on open source QuickJS. The optimization results are roughly as follows (the subsequent article will be introduced in detail):
  html l20

  +16.5%

  V8 Bench	open source QuickJS	optimized QuickJS	effect
  DeltaBlue	627	627	731
  Crypto	893	893	933	933	+4.5%html ml5
  RayTrace	59	59	194	+160%
  EarleyBoyer	973	906	906	+95.9%
  RegExp	78	Splayhhh	+48.9%htm2
  Splayhtm6	756	783		+135.8%
  NavierStokes		https://www. ml3 644	643	%
  score (higher the better)	672	991	+47%

  supports animation and multimedia components

  In addition to the above basic components and capabilities, animation and multimedia are also indispensable for some mini programs. Therefore, we extended the support of Video, Canvas, Lottie, Live Player and other components. And applied to TV large-screen mini programs, mini games and live broadcast scenarios.

  On low-end devices, how to increase the frame rate of animation and reduce memory usage has also been deeply optimized.The following is the rendering of the Video and Canvas components in the applet:

  Cavas components
  Video Component

  supports multiple modes of applet products

  Currently Cube supports multiple modes of applet products: Native, Cube, Shared.

  • Native mode: It corresponds to the old Cube rendering applet mode, does not support CSS style sheets, and can only support inline styles and a limited number of CSS selectors. The highest performance and low compatibility;
  • Cube mode: evolved in the Native mode, supporting CSS stylesheets and multiple CSS selectors. Good performance, supports commonly used CSS styles and features (including style inheritance and multiple CSS selectors);
  • Shared mode: developed to reduce the migration of web rendering applets or transitioning to Cube rendering. In the same applet product, it supports both web rendering and Cube rendering. And Cube rendered pages support stylesheets. This balances performance and compatibility. Compared with web rendered applets, the product volume increase will not exceed 10%.

  	Native mode	Cube mode	Shared Mode
  Mini program product volume	smaller	in	slightly larger	Mini Program Performance	High	High	High	slightly lower
  Mini Program Compatibility	General	slightly higher	high
  new style	new style	do not support	support	support	support
  New layout	Support	Support	Support	Support	Support

  Note : If needed Web products are guaranteed, and the mini program products of Native mode and Cube mode are larger than Shared mode .

  is currently working

  Cube applet and related teams on TV and POS machines to polish the mini program technology stack (including rendering engine, JS engine, AppX, Ariver container), etc.

  problems on TV:

  • has less memory: some devices only have 512MB of memory, and long list scrolling is easy to get stuck;
  • needs to support focus switching;
  • CPU has a low main frequency: some only have 1GHz.

  short- and medium-term goal is to replace WeeX single page with the mini-program technology stack. The current progress is as follows: the startup performance of

  • applets exceeds WeeX single page in terms of performance (the advantages are more obvious on low-end devices); the memory usage of
  • after the mini program is initialized is less than 10MB, and the overall memory usage of typical applets is about 32MB.

  Specific details follow-up articles summarize in detail.

  problems faced on POS machines:

  runs ordering applets on POS machines, mainly facing the following problems:

  • has less memory: some devices only have 512MB of memory, which is prone to jamming and OOM;
  • CPU has few cores: some CPUs only have dual cores (hardware performance is about 1/5 of that of mainstream mobile phones);
  • long list scrolling card.

  The short- and medium-term goal is to replace the app developed by Flutter with the mini program technology stack. The current progress is as follows: the first screen startup performance of

  • applet has improved 30%+; the pages of the interactive scenarios that
  • applets focus, such as shopping carts, product details pages, etc., are close to the Flutter App; the home page of
  • home page scrolling frame rate reaches 50, and users can no longer perceive the difference between Flutter (the Flutter frame rate is 60); the memory usage of
  • applets has decreased by 30% (local tests have no jams and OOM).

  This scene is mainly a long list with a large number of text nodes. A lot of optimization methods have been adopted, and the subsequent articles have summarized and introduced in detail.

  summary

  In order to adapt to the mini program, the Cube rendering engine has made great progress in layout calculation, style capabilities, component support, and development tools with the work of friends. At the same time, in low-end devices (such as IoT devices) or performance-sensitive scenarios, Cube applets have also achieved good results in reducing memory usage. In the future, in the face of a variety of IoT devices, it is necessary to accelerate the evolution of technology to support more scenarios. Everyone is welcome to exchange and discuss.

  Follow [Alibaba Mobile Technology] WeChat official account, 3 mobile technology practices & practical information every week for you to think about!