WO2023245367A1

WO2023245367A1 - Hybrid application rendering system, rendering method, electronic device, and storage medium

Info

Publication number: WO2023245367A1
Application number: PCT/CN2022/099931
Authority: WO
Inventors: 郭斌; 周冰清; 彭耀宗
Original assignee: 北京小米移动软件有限公司
Priority date: 2022-06-20
Filing date: 2022-06-20
Publication date: 2023-12-28
Also published as: CN117616394A

Abstract

The present disclosure relates to a hybrid application rendering system, a rendering method, an electronic device, and a storage medium. The system comprises a JS framework, a native framework and a rendering engine; the JS framework has an application lifecycle management function and an application logic processing function; the native framework has a UI tree management function; a UI tree comprises a DOM tree, a widget tree, and a layout tree; the native framework comprises an interface construction API, and is used for creating and/or updating the DOM tree, the widget tree and the layout tree in the UI tree in response to a request of the JS framework, and sending an interaction operation event to the JS framework in response to detecting an interaction operation on the user interface; the JS framework comprises a callback request interface API, and is used for updating the UI tree in response to the interaction operation event detected by the native framework; and the rendering engine is used to execute rendering and generating a user interface according to the widget tree output by the native framework. The present embodiment can reduce the amount of memory occupied by the hybrid application rendering system, decreasing overall memory usage.

Description

Hybrid rendering application system, rendering method, electronic device and storage medium

Technical field

The present disclosure relates to the field of control technology, and in particular, to a hybrid rendering application system, a rendering method, an electronic device and a storage medium.

Background technique

Currently, existing hybrid rendering application frameworks are designed for devices with large memory such as smartphones or laptops. When the above hybrid rendering application framework renders each application, a single application usually consumes tens to hundreds of megabytes. section size of memory. The above hybrid rendering application framework is generally not available when the memory of the electronic device is only tens of megabytes.

In the process of implementing the disclosed solution, the inventor found that existing hybrid rendering application frameworks are divided into JS frameworks and native frameworks. The JS framework has management functions such as UI tree construction and update, etc. When the JS framework creates a UI tree (i.e. DOM tree), it requires a large amount of memory. In addition, the above-mentioned JS framework usually uses the V8 engine, and the VS engine usually also occupies a large amount of memory. Ultimately, the hybrid rendering application framework cannot be applied to electronic devices with small memory.

Contents of the invention

The present disclosure provides a hybrid rendering application system, rendering method, electronic device and storage medium to solve the deficiencies of related technologies.

According to a first aspect of an embodiment of the present disclosure, a hybrid rendering application system is provided. The system includes a JS framework, a native framework and a rendering engine; the JS framework has an application life cycle management function and an application logic processing function; the native The framework has a UI tree management function; wherein the UI tree includes a DOM tree, a Widget tree and a Layout tree;

The native framework includes a construction interface API for creating and/or updating the DOM tree, Widget tree and Layout tree in the UI tree in response to a request from the JS framework; and in response to detecting an interactive operation on the user interface Send interactive operation events to the JS framework;

The JS framework includes a callback request interface API for updating the UI tree in response to interactive operation events detected by the native framework;

The rendering engine is used to perform rendering and generate a user interface according to the Widget tree output by the native framework.

Optionally, the native framework creates a UI tree, including:

Create an initial DOM tree; the initial DOM tree includes multiple DOM nodes;

Create a Widget mapping for each DOM node of the initial DOM tree to obtain a Widget tree; the Widget mapping includes the mapping relationship between the DOM node and the Widget object and the mapping relationship between the Widget object and the Widget object mapping relationship;

Create a Layout tree corresponding to the Widget tree;

Traverse the layout nodes in the Layout tree and perform layout processing on the layout nodes to obtain a layout result;

Synchronize the layout result to the style attribute of the Widget tree;

The Widget tree is sent to the rendering engine in the native frame, so that the rendering engine performs a rendering operation.

Optionally, create a Widget mapping for each DOM node of the initial DOM tree, including:

When the DOM node is a dynamic node, obtain the new value from the observer of the JS engine; create a DOM subtree according to the new value; create a Widget mapping for the DOM node of the DOM subtree; repeatedly obtain the new value from the observer of the JS engine. Steps to get new values until the condition of said dynamic node is not met.

Optionally, traverse the layout nodes in the Layout tree and perform layout processing on the layout nodes, including:

When the parent node of the layout node does not participate in the web page layout, obtain the size of the element corresponding to the parent node; the size of the element corresponding to the parent node is a preset size; perform layout processing on the layout node according to the preset size ;or,

When the parent node of the layout node participates in the web page layout, the parent node is marked; when the size of the corresponding element of the parent node is obtained after the external layout of the parent node is completed, the layout node is subjected to layout processing .

Optionally, the native framework updates the UI tree, including:

When creating a user interface, perform interactive callback registration on the DOM node of the UI tree to obtain the callback function handle corresponding to the DOM node;

When an interactive operation that triggers the user interface is detected, notify the target DOM node corresponding to the interactive operation;

Search the callback function handle according to the operation type corresponding to the interactive operation; when the callback function handle is detected, trigger the JS framework to execute the specific callback function;

Obtain the update notification sent by the JS framework, and update the structure and/or content of the UI tree according to the update notification.

Optionally, the system further includes an engine adaptation layer; the engine adaptation layer communicates with the JS engine and is used to adapt to different types of JS engines.

According to a second aspect of the embodiment of the present disclosure, a hybrid rendering method is provided, which is applied to an electronic device. The electronic device is provided with a hybrid rendering application system. The system includes a JS framework, a native framework and a rendering engine; the method includes :

The native framework creates and/or updates a UI tree in response to a request from the JS framework, the UI tree including a DOM tree, a Widget tree, and a Layout tree; and in response to detecting an interaction with the user interface, the JS framework Send interaction events;

The JS framework outputs an update notification in response to the interaction event detected by the native framework to update the UI tree;

Optionally, the native framework creates a UI tree, including:

Create an initial DOM tree in response to a creation request from the JS engine; the initial DOM tree includes a plurality of DOM nodes;

Create a Layout tree corresponding to the Widget tree;

Synchronize the layout result to the style attribute of the Widget tree;

Optionally, the native framework updates the UI tree, including:

According to a third aspect of an embodiment of the present disclosure, an electronic device is provided, including:

memory and processor;

The memory is used to store computer programs executable by the processor;

The processor is used to execute the computer program in the memory to implement the above method.

According to a fourth aspect of an embodiment of the present disclosure, a non-transitory computer-readable storage medium is provided, which can implement the above method when an executable computer program in the storage medium is executed by a processor.

The technical solutions provided by the embodiments of the present disclosure may include the following beneficial effects:

As can be seen from the above embodiments, the hybrid rendering application system provided by the embodiments of the present disclosure includes a JS framework, a native framework and a rendering engine; the JS framework has an application life cycle management function and an application logic processing function; the native framework has a UI tree Management function; wherein the UI tree includes a DOM tree, a Widget tree and a Layout tree; the native framework includes a construction interface API for creating and/or updating the DOM in the UI tree in response to a request from the JS framework tree, Widget tree and Layout tree; and in response to detecting the interaction operation on the user interface, sending an interaction event to the JS framework; the JS framework includes a callback request interface API for responding to the detection of the native framework. Interactively operate events to update the UI tree; the rendering engine is used to perform rendering and generate a user interface according to the Widget tree output by the native framework. In this way, in this embodiment, the DOM tree function is adjusted to be processed within the native framework. Since the memory occupied by the DOM tree using the native language is much smaller than the memory occupied by the DOM tree implemented in the JS language, the size of the memory occupied by the hybrid rendering application system can be reduced. Reduce memory usage and improve memory usage.

It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only, and do not limit the present disclosure.

Description of the drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure.

Figure 1 is a schematic structural diagram of a hybrid rendering application system according to an exemplary embodiment.

FIG. 2 is a schematic signal flow diagram of a hybrid rendering application system for building a UI tree according to an exemplary embodiment.

Figure 3 is a flowchart of a hybrid rendering application system for building a UI tree according to an exemplary embodiment.

Figure 4 is a schematic diagram of an initial DOM tree according to an exemplary embodiment.

Figure 5 is a schematic diagram of a Widget tree according to an exemplary embodiment.

Figure 6 is a schematic diagram of a layout node according to an exemplary embodiment.

Figure 7 is a flowchart of updating a UI tree according to an exemplary embodiment.

FIG. 8 is a block diagram of an electronic device according to an exemplary embodiment.

Detailed ways

Exemplary embodiments will be described in detail herein, examples of which are illustrated in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings refer to the same or similar elements unless otherwise indicated. The illustrative embodiments described below do not represent all embodiments consistent with the present disclosure. Rather, they are merely examples of devices consistent with aspects of the disclosure as detailed in the appended claims. It should be noted that, as long as there is no conflict, the features in the following embodiments and implementation modes can be combined with each other.

In order to solve the above technical problems, embodiments of the present disclosure provide a hybrid rendering application system, a rendering method, an electronic device, and a storage medium. FIG. 1 is a schematic structural diagram of a hybrid rendering application system according to an exemplary embodiment. Referring to Figure 1, a hybrid rendering application system includes: JS framework, native framework and rendering engine; JS framework has application life cycle management function and application logic processing function; native framework has UI tree management function; UI tree includes DOM tree, Widget tree and Layout tree. The native framework includes building interface APIs for creating and/or updating the DOM tree, Widget tree and Layout tree in the UI tree in response to requests from the JS framework; and in response to detecting interaction with the user interface (i.e. UI interface). The JS framework sends interactive operation events. The JS framework includes a callback request interface API for updating the UI tree in response to interaction events detected by the native framework. The rendering engine is used to perform rendering and generate user interfaces based on the Widget tree output by the native framework, such as LVGL engine, IMGUI engine, QT engine, etc., which are not limited here.

In this embodiment, when the native framework implements the DOM tree, there is two-way communication between the application logic and the DOM tree between the native framework and the JS framework. That is, the original framework provides a set of construction interface APIs and the JS framework provides a set of callback request interface APIs. Continuing to refer to Figure 1, the native framework includes an application container APP Container. The application container is equipped with a Module module, a DOM module and a Widget module. The Module module is used to provide application logic processing functions. The DOM module communicates bidirectionally with the JS engine. The above-mentioned JS engine provides a JS running environment and the JS framework runs on the JS engine.

The process of constructing a UI tree by the hybrid rendering application system provided by this embodiment. Figure 2 is a schematic signal flow diagram of a hybrid rendering application system constructing a UI tree according to an exemplary embodiment. Figure 3 is a schematic diagram of the signal flow of constructing a UI tree by a hybrid rendering application system according to an exemplary embodiment. A flow chart of building a UI tree using a hybrid rendering application system. Referring to Figures 2 and 3, building the UI tree includes:

In step 31, the native framework may create an initial DOM tree in response to receiving a creation request from the JS engine in the JS framework, where the initial DOM tree includes a plurality of DOM nodes. Referring to Figure 4, in an example, the initial DOM tree includes node Doc, node Div, (dynamic) node for and node button, and the parent node of node Div is node Doc, and its child nodes are node for and node button respectively. It should be noted that the above initial DOM tree is only for illustrative purposes and does not constitute a limitation on the disclosed solution. The creation of the initial DOM tree in this step can be performed by the DOM module in the native framework.

In step 32, the native framework may create a Widget mapping for each DOM node of the initial DOM tree to obtain a Widget tree.

Referring to Figure 5, in an example, the node Doc in the initial DOM tree corresponds to the Widget object scene in the Widget tree.

The Widget object div in the Widget tree corresponding to the node div in the initial DOM tree. Since the node for in the initial DOM tree is a dynamic node, including two text nodes, there are two corresponding text objects in the Widget tree. When the node in the initial DOM tree is a dynamic node, the native framework can obtain the new value from the observer of the JS engine (responsible for monitoring application data changes, such as addition, deletion, modification, etc., and triggering the associated DOM tree node), and then according to the above The new value creates a DOM subtree. After that, create a Widget mapping for the DOM node of the DOM subtree; repeat the steps of getting new values from the observer of the JS engine until the conditions of the dynamic node are not met, such as exceeding the maximum value of the loop in the node for.

The Widget object button in the Widget tree corresponding to the node button in the initial DOM tree. Moreover, the above-mentioned Widget tree also has a mapping relationship between nodes in the DOM tree, so the above-mentioned Widget mapping includes a mapping relationship between the DOM node and the Widget object and a mapping relationship between the Widget object and the Widget object. . The creation of the Widget tree in this step can be performed by the Widget module in the native framework.

In step 33, the native framework can create a Layout tree corresponding to the Widget tree. Among them, the principle of creating a Layout tree is similar to that of creating a Widget tree. After a certain Widget object in the Widget tree is created, the layout node (ie, layout node) can be created synchronously. Referring to Figure 6, after creating the widget object div in an example, you can create a layout node Layout node div corresponding to the widget object div. The layout node Layout node div includes three child nodes Layout node Text. After the layout nodes corresponding to all widget object divs are created, a Layout tree can be generated based on the mapping relationship of the widget objects in the Widget tree. The Layout tree created in this step can be executed by the Widget module in the native framework.

In step 34, the native framework may traverse the layout nodes in the Layout tree and perform layout processing on the layout nodes to obtain a layout result. The above layout results include the size and position of the node, such as the width, height and position of the upper left corner of the node.

When the parent node of a layout node does not participate in web page layout (Flex layout), the native framework can obtain the size of the element corresponding to the parent node (such as text, picture, control, etc.); among them, the size of the element corresponding to the parent node is the preset size, including The screen size and the preset size (smaller than the screen size), and then perform layout processing on the layout node according to the preset size. Or, when the parent node of the layout node participates in the web page layout, the size of the element corresponding to the parent node is unknown at this time, so the parent node is marked; when the external layout of the parent node is completed, the size of the element corresponding to the parent node is obtained. When changing the size, the layout node is laid out according to the size of the corresponding element of the parent node. The layout processing in this step can be performed by the Widget module in the native framework.

In step 35, the native framework may synchronize the layout result to the style attribute of the Widget tree. The synchronized layout results in this step can be executed by the Widget module in the native framework.

In step 36, the native framework may send the Widget tree to the rendering engine within the native framework, so that the rendering engine performs a rendering operation. Sending the Widget tree in this step can be performed by the Widget module in the native framework.

In one embodiment, the native framework can update the UI tree, see Figure 7, including:

In step 71, when creating the user interface, the native framework can register an interactive callback on the DOM node of the UI tree to obtain the callback function handle corresponding to the DOM node. For example, if the DOM node is an image node, you can register a click callback function handle. The callback registration in this step can be performed by the DOM module in the native framework.

In step 72, when an interactive operation that triggers the user interface is detected, the target DOM node corresponding to the interactive operation is notified. The native framework can detect user interface interactions, generate an event when detecting an interaction that triggers the user interface, and send the above event to the JS engine. Detection of interactive operations and notifications in this step can be performed by the Widget module in the native framework.

In step 73, the native framework can search for the callback function handle according to the operation type corresponding to the interactive operation; when the callback function handle is detected, the JS framework is triggered to execute the specific callback function. The callback function handle search in this step can be performed by the DOM module in the native framework.

In step 74, the native framework may obtain the update notification sent by the JS framework, and update the structure and/or content of the UI tree according to the update notification. The callback function handle search in this step can be performed by the DOM module in the native framework.

In one embodiment, the JS engine can cooperate with the native framework to update the UI tree, including: when receiving an interactive operation event sent by the native framework, query the operation type of the above event, and call back the function according to the above operation type. When the callback function is queried, the above callback function can be called to perform update operations on the DOM tree, such as adding nodes, deleting nodes, updating node attributes, etc. These update operations will bring about data changes, so the JS engine can generate update notifications and send To native framework. The native framework updates the DOM tree according to the above update notification, and updates the Widget tree and Layout tree.

In one embodiment, continuing to refer to FIG. 1 , the hybrid rendering application system provided in this embodiment further includes an engine adaptation layer JSI. The engine adaptation layer JSI communicates with the JS engine and is used to adapt to different types of JS engines. For example, the JS engine can be V8 engine, QuickJS engine, Duktape engine, JerryScript engine, etc. The engine adaptation layer JSI can seamlessly switch between the above multiple JS engines by sealing the JS API into a unified format, so as to replace it with a light engine. The effect of the magnitude engine.

In this way, compared with the DOM tree management set up by the JS framework in related technologies, in this embodiment, when the native framework sets up the DOM tree management function, the DOM tree can be implemented using the native language. At this time, the amount of memory occupied by the DOM tree will be greatly reduced. From the related The tens of megabytes in technology are reduced to a few megabytes, which is beneficial to improving memory usage. In other words, since the hybrid rendering application system provided in this embodiment occupies less memory, it can be applied to electronic devices with less memory resources, such as smart watches, smart bracelets, smart glasses, etc., thereby expanding the applicability of the hybrid rendering application system. scope.

Based on the hybrid rendering application system provided by the embodiment of the present disclosure, the embodiment of the present disclosure also provides a hybrid rendering method, which is applied to an electronic device. The electronic device is provided with a hybrid rendering application system, and the system includes JS framework, native framework and rendering engine; the methods include:

In one embodiment, the native framework creates a UI tree, including:

Create a Layout tree corresponding to the Widget tree;

Synchronize the layout result to the style attribute of the Widget tree;

In one embodiment, creating a Widget mapping for each DOM node of the initial DOM tree includes:

In one embodiment, traversing the layout nodes in the Layout tree and performing layout processing on the layout nodes includes:

In one embodiment, the native framework updates the UI tree, including:

It should be noted that the method shown in this embodiment matches the content of the system embodiment, and reference may be made to the content of the above system embodiment, which will not be described again here.

FIG. 8 is a block diagram of an electronic device according to an exemplary embodiment. For example, the electronic device 800 may be a smartphone, a computer, a digital broadcast terminal, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

Referring to FIG. 8 , the electronic device 800 may include one or more of the following components: a processing component 802 , a memory 804 , a power supply component 806 , a multimedia component 808 , an audio component 810 , an input/output (I/O) interface 812 , and a sensor component 814 , communication component 816, image acquisition component 818.

Processing component 802 generally controls the overall operations of electronic device 800, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. Processing component 802 may include one or more processors 820 to execute computer programs. Additionally, processing component 802 may include one or more modules that facilitate interaction between processing component 802 and other components. For example, processing component 802 may include a multimedia module to facilitate interaction between multimedia component 808 and processing component 802.

Memory 804 is configured to store various types of data to support operations at electronic device 800 . Examples of such data include computer programs for any application or method operating on electronic device 800, contact data, phonebook data, messages, pictures, videos, etc. Memory 804 may be implemented by any type of volatile or non-volatile storage device, or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EEPROM), Programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disk.

Power supply component 806 provides power to various components of electronic device 800 . Power supply components 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to electronic device 800 . The power supply component 806 may include a power supply chip, and the controller can communicate with the power supply chip to control the power supply chip to turn on or off the switching device, so that the battery supplies power to the motherboard circuit or not.

Multimedia component 808 includes a screen that provides an output interface between electronic device 800 and the target object. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input information from the target object. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. A touch sensor can not only sense the boundaries of a touch or swipe action, but also detect the duration and pressure associated with the touch or swipe action.

Audio component 810 is configured to output and/or input audio file information. For example, audio component 810 includes a microphone (MIC) configured to receive external audio file information when electronic device 800 is in operating modes, such as call mode, recording mode, and voice recognition mode. The received audio file information may be further stored in memory 804 or sent via communication component 816 . In some embodiments, audio component 810 also includes a speaker for outputting audio file information.

The I/O interface 812 provides an interface between the processing component 802 and a peripheral interface module, which may be a keyboard, a click wheel, a button, etc.

Sensor component 814 includes one or more sensors for providing various aspects of status assessment for electronic device 800 . For example, the sensor component 814 can detect the open/closed state of the electronic device 800, the relative positioning of components, such as the display screen and keypad of the electronic device 800, and the sensor component 814 can also detect the position change of the electronic device 800 or a component. , the presence or absence of the target object in contact with the electronic device 800 , the orientation or acceleration/deceleration of the electronic device 800 and the temperature change of the electronic device 800 . In this example, the sensor component 814 may include a magnetic sensor, a gyroscope, and a magnetic field sensor, where the magnetic field sensor includes at least one of the following: a Hall sensor, a thin film magnetoresistive sensor, and a magnetic liquid acceleration sensor.

Communication component 816 is configured to facilitate wired or wireless communication between electronic device 800 and other devices. The electronic device 800 can access a wireless network based on communication standards, such as WiFi, 2G, 3G, 4G, 5G, or a combination thereof. In one exemplary embodiment, communication component 816 receives broadcast information or broadcast-related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, communications component 816 also includes a near field communications (NFC) module to facilitate short-range communications. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

In an exemplary embodiment, electronic device 800 may be configured by one or more application specific integrated circuits (ASICs), digital information processors (DSPs), digital information processing devices (DSPDs), programmable logic devices (PLDs), field programmable Programmed gate array (FPGA), controller, microcontroller, microprocessor or other electronic component implementation.

In an exemplary embodiment, a non-transitory computer-readable storage medium is also provided, such as a memory 804 including instructions, and the above-mentioned executable computer program can be executed by a processor. Among them, the readable storage medium can be ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, optical data storage device, etc.

Other embodiments of the disclosure will be readily apparent to those skilled in the art from consideration of the specification and practice of the disclosure herein. The present disclosure is intended to cover any modifications, uses, or adaptations that follow the general principles of the disclosure and include common knowledge or customary technical means in the technical field that are not disclosed in the disclosure. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

It is to be understood that the present disclosure is not limited to the precise structures described above and illustrated in the accompanying drawings, and various modifications and changes may be made without departing from the scope thereof. The scope of the disclosure is limited only by the appended claims.

Claims

A hybrid rendering application system, characterized in that the system includes a JS framework, a native framework and a rendering engine; the JS framework has an application life cycle management function and an application logic processing function; the native framework has a UI tree management function; Wherein, the UI tree includes DOM tree, Widget tree and Layout tree;

The native framework includes a construction interface API for creating and/or updating the DOM tree, Widget tree and Layout tree in the UI tree in response to a request from the JS framework; and in response to detecting an interactive operation on the user interface Send interactive operation events to the JS framework;

The JS framework includes a callback request interface API for updating the UI tree in response to interactive operation events detected by the native framework;

The rendering engine is used to perform rendering and generate a user interface according to the Widget tree output by the native framework.
The system according to claim 1, characterized in that the native framework creates a UI tree, including:

Create an initial DOM tree; the initial DOM tree includes multiple DOM nodes;

Create a Widget mapping for each DOM node of the initial DOM tree to obtain a Widget tree; the Widget mapping includes the mapping relationship between the DOM node and the Widget object and the mapping relationship between the Widget object and the Widget object mapping relationship;

Create a Layout tree corresponding to the Widget tree;

Traverse the layout nodes in the Layout tree and perform layout processing on the layout nodes to obtain a layout result;

Synchronize the layout result to the style attribute of the Widget tree;

The Widget tree is sent to the rendering engine in the native frame, so that the rendering engine performs a rendering operation.
The system according to claim 2, characterized in that creating a Widget mapping for each DOM node of the initial DOM tree includes:

When the DOM node is a dynamic node, obtain the new value from the observer of the JS engine; create a DOM subtree based on the new value; create a Widget mapping for the DOM node of the DOM subtree; repeatedly obtain the new value from the observer of the JS engine. Steps to get new values until the condition of said dynamic node is not met.
The system according to claim 1, characterized in that traversing the layout nodes in the Layout tree and performing layout processing on the layout nodes includes:

When the parent node of the layout node does not participate in the web page layout, obtain the size of the element corresponding to the parent node; the size of the element corresponding to the parent node is a preset size; perform layout processing on the layout node according to the preset size ;or,

When the parent node of the layout node participates in the web page layout, the parent node is marked; when the size of the corresponding element of the parent node is obtained after the external layout of the parent node is completed, the layout node is subjected to layout processing .
The system according to claim 1, characterized in that the native framework updates the UI tree, including:

When creating a user interface, perform interactive callback registration on the DOM node of the UI tree to obtain the callback function handle corresponding to the DOM node;

When an interactive operation that triggers the user interface is detected, notify the target DOM node corresponding to the interactive operation;

Search the callback function handle according to the operation type corresponding to the interactive operation; when the callback function handle is detected, trigger the JS framework to execute the specific callback function;

Obtain the update notification sent by the JS framework, and update the structure and/or content of the UI tree according to the update notification.
The system according to claim 1, characterized in that the system further includes an engine adaptation layer; the engine adaptation layer communicates with the JS engine and is used to adapt to different types of JS engines.
A hybrid rendering method, characterized in that it is applied to electronic equipment, and the electronic equipment is equipped with a hybrid rendering application system. The system includes a JS framework, a native framework and a rendering engine; the method includes:

The native framework creates and/or updates a UI tree in response to a request from the JS framework, the UI tree including a DOM tree, a Widget tree, and a Layout tree; and in response to detecting an interaction with the user interface, the JS framework Send interaction events;

The JS framework outputs an update notification in response to the interaction event detected by the native framework to update the UI tree;

The rendering engine is used to perform rendering and generate a user interface according to the Widget tree output by the native framework.
The method according to claim 7, characterized in that the native framework creates a UI tree, including:

Create an initial DOM tree in response to a creation request from the JS engine; the initial DOM tree includes a plurality of DOM nodes;

Create a Widget mapping for each DOM node of the initial DOM tree to obtain a Widget tree; the Widget mapping includes the mapping relationship between the DOM node and the Widget object and the mapping relationship between the Widget object and the Widget object mapping relationship;

Create a Layout tree corresponding to the Widget tree;

Traverse the layout nodes in the Layout tree and perform layout processing on the layout nodes to obtain a layout result;

Synchronize the layout result to the style attribute of the Widget tree;

The Widget tree is sent to the rendering engine in the native frame, so that the rendering engine performs a rendering operation.
The method according to claim 8, characterized in that creating a Widget mapping for each DOM node of the initial DOM tree includes:

When the DOM node is a dynamic node, obtain the new value from the observer of the JS engine; create a DOM subtree based on the new value; create a Widget mapping for the DOM node of the DOM subtree; repeatedly obtain the new value from the observer of the JS engine. Steps to get new values until the condition of said dynamic node is not met.
The method according to claim 7, characterized in that traversing layout nodes in the Layout tree and performing layout processing on the layout nodes includes:

When the parent node of the layout node does not participate in the web page layout, obtain the size of the element corresponding to the parent node; the size of the element corresponding to the parent node is a preset size; perform layout processing on the layout node according to the preset size ;or,

When the parent node of the layout node participates in the web page layout, the parent node is marked; when the size of the corresponding element of the parent node is obtained after the external layout of the parent node is completed, the layout node is subjected to layout processing .
The method according to claim 7, characterized in that the native framework updates the UI tree, including:

When creating a user interface, perform interactive callback registration on the DOM node of the UI tree to obtain the callback function handle corresponding to the DOM node;

When an interactive operation that triggers the user interface is detected, notify the target DOM node corresponding to the interactive operation;

Search the callback function handle according to the operation type corresponding to the interactive operation; when the callback function handle is detected, trigger the JS framework to execute the specific callback function;

Obtain the update notification sent by the JS framework, and update the structure and/or content of the UI tree according to the update notification.
An electronic device, characterized by including:

memory and processor;

The memory is used to store computer programs executable by the processor;

The processor is configured to execute the computer program in the memory to implement the method according to any one of claims 7 to 11.
A non-transitory computer-readable storage medium, characterized in that when the executable computer program in the storage medium is executed by a processor, the method according to any one of claims 7 to 11 can be implemented.