User interface rendering method, electronic equipment, storage medium and program product

Abstract

The invention discloses a user interface rendering method, electronic equipment, a storage medium and a program product, relates to the technical field of computer software, and is used for improving the rendering rate of a user interface. The method comprises the following steps: in a process of starting a target application, acquiring loading data from a target cache pool; the target cache pool is used for storing loading data of the target loading item; the target loading item is an item required to be loaded when the target application is started; and rendering the user interface of the target application based on the loading data corresponding to the target loading item.

Description

Technical Field

[0001] The present application relates to the field of computer software technology, and in particular to a user interface rendering method, electronic device, storage medium, and program product. Background Art

[0002] With the increasing popularity of smart devices, dynamic user interface technologies (such as React Native and WebView) are gaining widespread adoption due to their cross-platform and fast iteration capabilities. However, existing dynamic user interface solutions still suffer from significant drawbacks in rendering performance, such as imperfect caching solutions, resulting in poor data reusability and slow rendering speeds for dynamic user pages. Summary of the Invention

[0003] The purpose of this application is to provide a user interface rendering method, electronic device, storage medium and program product for improving the rendering rate of the user interface.

[0004] To achieve the above objectives, this application adopts the following technical solutions:

[0005] In a first aspect, the present application provides a user interface rendering method, comprising: obtaining loading data from a target cache pool during the process of starting a target application; the target cache pool is used to store the loading data of a target add-in; the target add-in is an item required to be loaded when starting the target application; and rendering the user interface of the target application based on the loading data corresponding to the target add-in.

[0006] The user interface rendering method provided in the embodiment of the present application can directly obtain the loading data of the target add-in from the target cache pool, and then render the user interface of the target application based on the obtained loading data, without the need to load the target add-in separately, thereby improving the user interface rendering rate.

[0007] In some embodiments, the loaded data stored in the target cache pool includes data obtained by preloading the target loaded item.

[0008] In some embodiments, the method further includes: before the target application is started, preloading the target add-in based on the preloading thread to obtain load data corresponding to the target add-in; and storing the load data corresponding to the target add-in in a target cache pool corresponding to the target add-in.

[0009] In some embodiments, before storing the load data corresponding to the target add-in in the target cache pool corresponding to the target add-in, the method further includes: creating a target cache pool corresponding to the target add-in.

[0010] In some embodiments, the cache granularity of the target cache pool is related to the level of the target add-in.

[0011] In some embodiments, the hierarchy of the target add-in includes, from top to bottom, template, VDOM, DOM, View component, and View tree.

[0012] In some embodiments, the target add-in includes at least one of the following: a template, a VDOM, a DOM, a View component, and a View tree.

[0013] In some embodiments, the target add-in further includes at least one of the following: a business method, a dynamic component, and an engine.

[0014] In some embodiments, the target cache pool includes at least one of the following: a template cache pool, a VDOM cache pool, a DOM cache pool, a View component cache pool, and a View tree cache pool.

[0015] In some embodiments, the target cache pool further includes at least one of the following: a business method cache pool, a dynamic component cache pool, and an engine cache pool.

[0016] In some embodiments, after obtaining the load data from the target cache pool, the method further includes: if the load data corresponding to the target add-in does not exist in the target cache pool, loading the load data corresponding to the target add-in based on the loader of the target add-in.

[0017] In some embodiments, the method further includes: storing the load data corresponding to the target add-in in a target cache pool corresponding to the target add-in.

[0018] In some embodiments, the loaded data stored in the target cache pool includes loaded data that is recycled when the user interface of the target application is destroyed.

[0019] In some embodiments, the method further includes: performing lifecycle monitoring on the user interface of the target application based on the page lifecycle listener.

[0020] In some embodiments, before performing lifecycle monitoring on the user interface of the target application based on the page lifecycle listener, the method also includes: registering the View component and View tree of the user interface of the target application to the page lifecycle listener, so that when the page lifecycle listener listens to the destruction notification of the user interface of the target application, the View component and View tree of the user interface of the target application are stored in the View component cache pool and the View tree cache pool respectively.

[0021] In some embodiments, the target add-in includes an engine, and the load data corresponding to the engine is an engine instance; the method further includes: monitoring the life cycle of the engine instance based on the engine life cycle listener.

[0022] In some embodiments, before performing lifecycle monitoring on the engine instance based on the engine lifecycle listener, the method further includes: configuring the engine lifecycle listener for the engine instance so that when the engine lifecycle listener receives a destruction notification of the user interface of the target application, the engine instance is stored in the engine cache pool.

[0023] In a second aspect, the present application provides a user interface rendering device for implementing the user interface rendering method provided in the above-mentioned embodiments. The user interface rendering device includes: a processing module for obtaining loading data from a target cache pool during the startup of a target application; the target cache pool is used to store loading data of a target add-in; the target add-in is an item required to be loaded when the target application is started; and the processing module is further configured to render the user interface of the target application based on the loading data corresponding to the target add-in.

[0024] In some embodiments, the loaded data stored in the target cache pool includes data obtained by preloading the target loaded item.

[0025] In some embodiments, the processing module is further configured to preload the target add-in based on the preloading thread before the target application is started, obtain load data corresponding to the target add-in, and store the load data corresponding to the target add-in in a target cache pool corresponding to the target add-in.

[0026] In some embodiments, before storing the load data corresponding to the target add-in in the target cache pool corresponding to the target add-in, the processing module is further configured to create a target cache pool corresponding to the target add-in.

[0027] In some embodiments, the cache granularity of the target cache pool is related to the level of the target add-in.

[0028] In some embodiments, the hierarchy of the target add-in includes, from top to bottom, template, VDOM, DOM, View component, and View tree.

[0029] In some embodiments, the target add-in includes at least one of the following: a template, a VDOM, a DOM, a View component, and a View tree.

[0030] In some embodiments, the target add-in further includes at least one of the following: a business method, a dynamic component, and an engine.

[0031] In some embodiments, the target cache pool includes at least one of the following: a template cache pool, a VDOM cache pool, a DOM cache pool, a View component cache pool, and a View tree cache pool.

[0032] In some embodiments, the target cache pool further includes at least one of the following: a business method cache pool, a dynamic component cache pool, and an engine cache pool.

[0033] In some embodiments, after obtaining the load data from the target cache pool, the processing module is further configured to load the load data corresponding to the target add-in based on the loader of the target add-in if the load data corresponding to the target add-in does not exist in the target cache pool.

[0034] In some embodiments, the processing module is further configured to store the load data corresponding to the target add-in in a target cache pool corresponding to the target add-in.

[0035] In some embodiments, the loaded data stored in the target cache pool includes loaded data that is recycled when the user interface of the target application is destroyed.

[0036] In some embodiments,

[0037] In some embodiments, the user interface rendering device further includes: a monitoring module; the monitoring module is used to monitor the life cycle of the user interface of the target application based on the page life cycle listener.

[0038] In some embodiments, based on the page lifecycle listener, before performing lifecycle monitoring on the user interface of the target application, the monitoring module is also used to register the View component and View tree of the user interface of the target application with the page lifecycle listener, so that when the page lifecycle listener listens to the destruction notification of the user interface of the target application, the View component and View tree of the user interface of the target application are stored in the View component cache pool and the View tree cache pool respectively.

[0039] In some embodiments, the target add-in includes an engine, and the load data corresponding to the engine is an engine instance; the monitoring module is further used to monitor the life cycle of the engine instance based on the engine life cycle listener.

[0040] In some embodiments, based on the engine lifecycle listener, before performing lifecycle monitoring on the engine instance, the monitoring module is also used to configure the engine lifecycle listener for the engine instance so that when the engine lifecycle listener listens to the destruction notification of the user interface of the target application, the engine instance is stored in the engine cache pool.

[0041] In a third aspect, the present application provides an electronic device comprising: a processor and a memory; the memory stores instructions executable by the processor; when the processor is configured to execute the instructions, the electronic device implements the method of the first aspect above.

[0042] In a fourth aspect, the present application provides a computer-readable storage medium, which includes: computer software instructions; when the computer software instructions are executed in an electronic device, the electronic device implements the method of the first aspect above.

[0043] In a fifth aspect, the present application provides a computer program product, which includes a computer program; when the computer program runs in an electronic device, the electronic device implements the method of the first aspect above.

[0044] The beneficial effects of the second to fifth aspects mentioned above refer to the corresponding description of the first aspect and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0046] Figure 1 An architectural diagram of a user interface rendering method provided in an embodiment of the present application;

[0047] Figure 2 A flowchart of a user interface rendering method provided in an embodiment of the present application;

[0048] Figure 3 A flowchart of another user interface rendering method provided in an embodiment of the present application;

[0049] Figure 4 A business method and dynamic component preloading and caching framework provided for the implementation of this application;

[0050] Figure 5 A schematic diagram of an engine cache architecture provided for the implementation of this application;

[0051] Figure 6 A flowchart of another user interface rendering method provided in an embodiment of the present application;

[0052] Figure 7 A user interface lifecycle monitoring framework provided for the implementation of this application;

[0053] Figure 8 Another user interface lifecycle monitoring framework provided for this application implementation;

[0054] Figure 9 A flowchart of another user interface rendering method provided in an embodiment of the present application;

[0055] Figure 10 A flowchart of another user interface rendering method provided in an embodiment of the present application;

[0056] Figure 11 A schematic diagram of the structure of a user interface rendering device provided in an embodiment of the present application;

[0057] Figure 12 This is a schematic diagram of the structure of an electronic device provided in this application. DETAILED DESCRIPTION

[0058] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0059] In the description of this application, it should be understood that the terms "upper," "lower," "left," "right," "front," "back," "inner," "outer," and the like, indicating directions or positional relationships, are based on the directions or relative positional relationships shown in the accompanying drawings and are intended solely to facilitate the description of this application and simplify the description. They do not indicate or imply that the devices or components referred to must have a specific direction, be constructed, or operate in a specific direction. Therefore, they should not be construed as limitations on this application. Unless otherwise specified, the above-mentioned directionality descriptions may be flexibly set in actual application, provided that the relative positional relationships shown in the accompanying drawings are met.

[0060] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of the technical features being referred to. Thus, a feature specified as "first" or "second" may explicitly or implicitly include one or more of such features. Throughout this application, unless otherwise specified, "plurality" means two or more.

[0061] In the description of this application, it should be noted that, unless otherwise expressly specified or limited, the terms "mounted," "connected," "connected," and "connected" should be understood broadly. For example, they may refer to fixed connections, detachable connections, or integral connections. They may be directly connected, indirectly connected through an intermediary, or internally connected between two components. Those skilled in the art will understand the specific meanings of these terms in this application based on the specific circumstances.

[0062] In the embodiments of the present application, the terms "comprises," "comprising," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, article, or device comprising a series of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not preclude the presence of other identical elements in the process, article, or device comprising the element.

[0063] In the embodiments of this application, words such as "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of this application should not be interpreted as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary" or "for example" is intended to present the relevant concepts in a concrete manner.

[0064] In the description of this specification, specific features, structures, materials or characteristics may be combined in an appropriate manner in any one or more embodiments or examples.

[0065] First, some technical terms involved in this application are explained.

[0066] (1) Activity

[0067] Activity is a component in Android development that can contain a user interface. It is mainly used to interact with users, such as making calls, taking photos, sending emails, etc.

[0068] (2) Document Object Model (DOM)

[0069] The DOM is a programming interface for web documents. It forms a tree-like structure by arranging the content (such as text and images) and structure (such as headings, paragraphs, and lists) contained in a web page in a specific order and relationship. The DOM represents documents as nodes and objects, allowing programming languages to interact with the web page.

[0070] (3) Virtual Document Object Model (VDOM)

[0071] VDOM is a lightweight JavaScript object copy of DOM, which is used to optimize the performance of DOM operations.

[0072] (4) View component

[0073] A View is the base class for all user interface components in Android development. It represents a drawable area on the user interface, typically occupying a rectangular area on the screen. It is used to display content (such as text and images) and handle user interactions (such as clicks and touches).

[0074] (5)View tree

[0075] In Android development, the View tree is a hierarchical structure used to organize and manage all views and view groups in the interface.

[0076] (6) Cold start

[0077] A cold start occurs when an application is started without any existing processes in the system. This usually occurs when an application is started for the first time or when the application process is completely killed and then started again.

[0078] (7) Warm start

[0079] A warm start is between a cold start and a hot start. It occurs when the app process still exists but the main UI activity is destroyed (for example, due to low memory).

[0080] (8) Business methods

[0081] Business methods refer to the logical processing that implements specific business requirements in front-end projects. They usually involve user interaction, data processing, state management and other aspects.

[0082] (9) Dynamic Components

[0083] Dynamic components are a feature in modern front-end frameworks (such as Vue.js, React.js, etc.) that allow developers to dynamically switch or load components based on conditions at runtime without reloading the entire page.

[0084] In recent years, with the continuous development of automotive intelligence and the popularization of intelligent Android system car platforms, Over The Air (OTA) upgrades have gradually become problematic, with high costs, poor timeliness, and low new business reach.

[0085] To address issues such as poor timeliness, high costs, and low business reach, various dynamic user interface rendering solutions have emerged on mobile platforms since the launch of React Native in 2015. While these solutions perform well for native applications, they struggle with non-native applications. Improving the rendering performance of dynamic user interfaces to match that of native applications is a constant pursuit in the field.

[0086] Current approaches to accelerating rendering performance focus on preloading and caching, specifically layout file preloading and View caching. Dynamic user interfaces primarily optimize performance by preloading layout files (or template files), while native development models primarily utilize View caching. However, native layout caches have a large granularity, such as RecyclerView's type cache, and offer poor reusability. Dynamic user interfaces are optimized only for template file preloading and parsing, resulting in consistently lower performance than native UIs.

[0087] To address the above technical issues, this application provides a user interface rendering method. The method involves obtaining loading data from a target cache pool during the startup of a target application. The target cache pool is used to store the loading data of a target add-on. The target add-on is the item required to be loaded when the target application is started. Based on the loading data corresponding to the target add-on, the user interface of the target application is rendered. This method can directly obtain the loading data of the target add-on from the target cache pool and then render the user interface of the target application based on the obtained loading data, without the need to separately load the target add-on, thereby improving the user interface rendering speed.

[0088] The user interface rendering method provided in the embodiment of the present application can be executed by an electronic device.

[0089] For example, the electronic device may be a server, for example, a single server, or a server cluster composed of multiple servers. In some implementations, the server cluster may also be a distributed cluster.

[0090] For example, the electronic device may be a terminal device, such as a mobile phone, a tablet computer, a desktop computer, a laptop computer, a handheld computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook computer, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) or virtual reality (VR) device, etc. The embodiments of the present application do not impose any particular limitation on the specific form of the terminal device.

[0091] The user interface rendering method provided by this application is described in detail below with reference to the accompanying drawings.

[0092] Figure 1 This is an architectural diagram of a user interface rendering method provided in an embodiment of the present application, such as Figure 1As shown, the architecture includes: a business method registration function module, a component registration function module, an engine management function module, a preloading function module, a life cycle monitoring function module and a cache function module.

[0093] The business method registration function module is used to complete the registration of business methods involved in the target application through static registration and dynamic registration.

[0094] The dynamic component registration function module is used to complete the registration of dynamic components involved in the target application through static registration and dynamic registration.

[0095] The engine management function module is used to create an engine for rendering the user interface based on the engine factory, and then store the created engine in the engine cache pool.

[0096] The preloading function module is used to preload target template files, component creation tools, and business logic functions.

[0097] The lifecycle monitoring function module is used to monitor the lifecycle of the user interface through Activity monitoring and Fragment monitoring.

[0098] The cache function module sets the template cache pool, VDOM cache pool, DOM cache pool, view component cache pool and view tree cache pool, so as to cache template data, VDOM data, DOM data, view component data and view tree data.

[0099] Figure 2 A flowchart of a user interface rendering method provided in an embodiment of the present application is shown in FIG. Figure 2 As shown, the method includes:

[0100] S100 . During the process of starting the target application, loading data is obtained from the target cache pool.

[0101] The target cache pool is used to store the loading data of the target add-in, which is the item required to be loaded when the target application is started.

[0102] In some embodiments, the target add-in includes at least one of the following: a template, a VDOM, a DOM, a View component, and a View tree.

[0103] Exemplarily, the template can be a static HTML structure or a template language (such as Vue template, React JSX, etc.).

[0104] In some embodiments, the target cache pool includes at least one of the following: a template cache pool, a VDOM cache pool, a DOM cache pool, a View component cache pool, and a View tree cache pool.

[0105] In some embodiments, the target add-in further includes at least one of the following: a business method, a dynamic component, and an engine.

[0106] Exemplarily, the engine may be a rendering engine, such as Blink, Gecko, etc.

[0107] In some embodiments, the target cache pool further includes at least one of the following: a business method cache pool, a dynamic component cache pool, and an engine cache pool.

[0108] In some embodiments, the loaded data stored in the target cache pool includes data obtained by preloading the target loaded item.

[0109] In some embodiments, the loaded data stored in the target cache pool includes loaded data that is recycled when the user interface of the target application is destroyed.

[0110] S200: Rendering a user interface of a target application based on loading data corresponding to a target add-in.

[0111] In some embodiments, based on the loading data corresponding to the target add-in, rendering the user interface of the target application is achieved by rendering based on the hierarchical relationship of the target add-in. The specific process is introduced in the detailed description of S200 below and is not repeated here.

[0112] It can be understood that the user interface rendering method provided in the present application can directly obtain the loading data of the target add-in from the target cache pool, and then render the user interface of the target application based on the obtained loading data, without the need to load the target add-in separately, thereby improving the user interface rendering rate.

[0113] In some embodiments, the hierarchy of the target add-in includes, from top to bottom, template, VDOM, DOM, View component, and View tree.

[0114] Based on the hierarchy of the target add-ins, S200 can be specifically implemented as follows:

[0115] a1. Query template data from the template cache pool and return it.

[0116] a2. Query VDOM data from the VDOM cache pool and return it.

[0117] a3. Query DOM data from the DOM cache pool and return it.

[0118] a4. Query the View component data from the View component cache pool and return it.

[0119] a5. Query the View tree data from the View tree cache pool and return it.

[0120] For example, in a web application based on Vue or React, the template defines the structure and layout of the page. Through the generation and update of VDOM and the operation of DOM, the user-visible View components and View tree are finally rendered. The entire process depends on the support of the underlying engine and the data transmission and interaction between each layer.

[0121] In some embodiments, after obtaining the loading data from the target cache pool as described above, the user interface rendering method provided by the embodiment of the present application also includes: if the loading data corresponding to the target add-in does not exist in the target cache pool, loading the loading data corresponding to the target add-in based on the loader of the target add-in.

[0122] It is understandable that by setting the target add-in level, the cache and loading granularity of the target add-in are refined, so that the loading data corresponding to the target add-in can be quickly obtained from the target cache pool, thereby improving the rendering speed.

[0123] Exemplarily, when the template data does not exist in the template cache pool, the template data is loaded through the template loader and added to the template cache pool.

[0124] Exemplarily, when the VDOM data does not exist in the VDOM cache pool, the template data is parsed by a VDOM parser to obtain the VDOM data, and the VDOM data is added to the VDOM cache pool.

[0125] Exemplarily, when there is no DOM data in the DOM cache pool, the VDOM data is parsed by a DOM parser to obtain the DOM data, and the DOM data is added to the DOM cache pool.

[0126] Exemplarily, when the View component data does not exist in the View component cache pool, the DOM data is parsed by the ViewElement constructor to create a View component, and the View component data is added to the View component cache pool.

[0127] Exemplarily, when the View tree data does not exist in the View tree cache pool, the View tree constructor parses the DOM data to create the View tree data, and then adds the View tree data to the View tree cache pool.

[0128] In some embodiments, in the target cache pool, the load data corresponding to the target add-on has a unique code. By querying the code in the target cache pool, it can be determined whether the load data corresponding to the target add-on exists in the target cache pool.

[0129] In some embodiments, when the target add-in item does not have loading data corresponding to the target add-in item in the target cache pool, the user interface rendering method provided by the embodiment of the present application further includes: storing the loading data corresponding to the target add-in item in the target cache pool corresponding to the target add-in item.

[0130] It can be understood that when the loading data corresponding to the target add-in does not exist in the target cache pool, dynamically loading data through the loader can ensure the availability of data and the continuity of rendering; at the same time, after loading, the loading data corresponding to the target add-in can be stored in the target cache pool corresponding to the target add-in. In this way, the required loading data can be obtained from the cache pool when the user interface is rendered next time, thereby improving rendering efficiency.

[0131] In some embodiments, as Figure 3 As shown, before the above step S100, the user interface rendering method provided by the embodiment of the present application further includes:

[0132] S300: Before the target application is started, preload the target add-in based on the preloading thread to obtain loading data corresponding to the target add-in.

[0133] In some embodiments, the preloading thread is asynchronous with the main thread of page rendering, and the preloading thread does not affect the main thread.

[0134] It should be noted that target add-ins are parsed layer by layer, and the preloading thread primarily loads template files. Typically, multiple page templates are used in the same application. The preloading thread retrieves the most frequently used template files and parses the template data for each template file into a VDOM file, a DOM file, and a View component file. In the target cache pool corresponding to the target add-in, the VDOM files, DOM files, and View component files parsed from the same template file can be queried using the template number corresponding to the template file.

[0135] S400: Storing the load data corresponding to the target add-in in the target cache pool corresponding to the target add-in.

[0136] It is understandable that before the target application is started, the target add-in is preloaded based on the preloading thread to obtain the loading data corresponding to the target add-in. In this way, when the target application is started, the loading data corresponding to the target add-in required for page rendering can be obtained immediately without waiting for a long loading process, thereby improving page rendering efficiency.

[0137] In some embodiments, the above S300-S400 may be specifically implemented as follows:

[0138] b1. Business method preloading.

[0139] For example, Figure 4 As shown, the Function abstract class is implemented for the business method, the business method is statically registered through the AutoService annotation, and the business method data is stored in the business method cache pool.

[0140] b2. Dynamic component preloading.

[0141] For example, Figure 4 As shown, the IViewElementCrebtor interface is implemented for the dynamic component, the dynamic component is statically registered through the AutoService annotation, and the dynamic component data is stored in the dynamic component cache pool.

[0142] For example, Figure 4 As shown, the ServiceLoader service discovers the preloading thread that runs asynchronously with the main thread, discovers and instantiates business methods and dynamic components, and adds the instantiated business methods and dynamic components to the business method pool and dynamic component pool respectively.

[0143] It is understandable that the discovery and instantiation of business methods and dynamic components are performed in the preloading thread and have no impact on the main thread. Furthermore, when the main thread actually loads and renders the user interface, the created business methods and dynamic component examples can be directly used, thereby improving the rendering rate.

[0144] b3. Engine preloading.

[0145] For example, Figure 5 The following is a schematic diagram of the engine cache architecture provided by the embodiment of the present application. As shown in the figure, during the dynamic user interface container initialization phase, the engine configurator is initialized, a virtual machine engine is created through the engine factory, and the created engine is added to the engine cache pool. The life cycle listener and the life cycle monitoring framework will be introduced in the engine life cycle monitoring later (i.e. for Figure 8 ), which will not be described here.

[0146] b4. Template preloading.

[0147] Exemplarily, the template file is read and verified, and after the verification passes, the template data is added to the template cache pool.

[0148] b5. VDOM preloading.

[0149] Exemplarily, the template data is parsed into structured VDOM data, and the VDOM data is added to the VDOM cache pool.

[0150] Exemplarily, parsing the template data into VDOM data can be achieved by parsing the template string to generate an abstract syntax tree, and then converting the abstract syntax tree into a VDOM node.

[0151] b6. DOM preloading.

[0152] Exemplarily, the VDOM data is parsed into DOM data, and the DOM data is added to the DOM cache pool.

[0153] Exemplarily, parsing VDOM data into DOM data can be achieved by converting the VDOM tree structure into directly operable real DOM elements and inserting them into the page, while updating the changed parts by comparing the differences between the new and old VDOMs.

[0154] b7. View component preloading.

[0155] For example, for the same template file, the dynamic component corresponding to the View component parsed based on the template file is searched from the dynamic component pool. If found, the View creation method of the dynamic component is executed to create an entity View component and add the View component to the View component cache pool.

[0156] In some embodiments, as Figure 6 As shown, before the above S400, the user interface rendering method provided by the embodiment of the present application further includes:

[0157] S401: Create a target cache pool corresponding to a target add-in.

[0158] In some embodiments, a continuous memory space may be allocated to the target add-in to complete the creation of the target cache pool.

[0159] In some embodiments, in order to efficiently manage data in the cache pool, data structures such as linked lists and hash tables may be used to store data.

[0160] In some embodiments, before the target application is launched, the preloading thread can be triggered according to preset rules or conditions. For example, the preloading thread will be started when the application configuration file specifies a target add-on to be preloaded; or the preloading thread will be started when the target application initialization phase detects that sufficient system resources are available and preloading conditions are met.

[0161] It is understandable that since the loading and creation process itself is time-consuming, by creating a preloading thread, loading the target add-in in the preloading thread, creating a target cache pool corresponding to the target add-in, and storing the loaded data of the target add-in in the corresponding target cache pool, the target add-in can be loaded and stored in advance before the user interface is rendered. The preloading thread runs asynchronously with the main thread, thereby shortening the overall runtime.

[0162] In some embodiments, the cache granularity of the target cache pool is related to the level of the target add-in.

[0163] Exemplarily, the target add-in levels are template, VDOM, DOM, View component, and View tree, and the cache granularity of the target cache pool is template cache, VDOM cache, DOM cache, View component cache, and View tree cache accordingly.

[0164] In some embodiments, the user interface rendering method provided by the embodiments of the present application further includes: based on a page lifecycle listener, performing lifecycle monitoring on the user interface of the target application.

[0165] Below through Figure 7 A user interface lifecycle monitoring framework provided in an embodiment of the present application is introduced.

[0166] In some embodiments, as Figure 7 As shown, the LifecycleOwner interface is used to monitor the life cycle of the user interface, and the DynamicLifecycleListener is used to obtain the change events of the user interface life cycle, such as loading start and loading completion.

[0167] It should be noted that if Figure 7 As shown, there are two types of dynamic user interface external rendering interfaces. One is DynamicView, which is a dynamic View that can be directly used in layouts. Templates can be loaded through the View's load method, and the lifecycle listener interface DynamicLifecycleListener must be registered during load. The other is TemplateLoader, which can directly load templates but cannot be used in layouts. The lifecycle listener interface DynamicLifecycleListener must be registered during the load method.

[0168] For example, Figure 7As shown, the page containers that carry dynamic user interfaces include: androidxActivity, FragmentActivity, Activity, androidx Fragment, supportV4Fragment, and Fragment. While androidx Activity, androidx Fragment, FragmentActivity, and supportV4Fragment all inherit the LifecycleOwner interface, Activity and Fragment do not. Therefore, the ActivityLifecycle lifecycle monitoring class is implemented for Activity, and the FragmentLifecycle lifecycle monitoring class is implemented for Fragment. Monitoring of the user interface lifecycle is achieved by registering a DynamicLifecycleListener with LifecycleOwner, ActivityLifecycle, and FragmentLifecycle.

[0169] For example, DynamicLifecycleListener monitors the life cycle of the user interface by binding to a page container (such as androidx Activity, FragmentActivity, etc.). When the page container triggers a loading start event, DynamicLifecycleListener notifies related components and modules to prepare for loading, such as obtaining the required loading data corresponding to the target add-in from the target cache pool of the target add-in in advance, or initializing some necessary resources. When monitoring some changes in the life cycle of the user interface, DynamicLifecycleListener triggers the corresponding callback function (such as onDestroy) to perform some subsequent processing operations, such as updating the page status, releasing temporary resources, etc.

[0170] In some embodiments, before the above-mentioned page lifecycle listener is used to perform lifecycle monitoring on the user interface of the target application, the user interface rendering method provided by the embodiment of the present application also includes: registering the View component and View tree of the user interface of the target application to the page lifecycle listener, so that when the page lifecycle listener listens to the destruction notification of the user interface of the target application, the View component and View tree of the user interface of the target application are stored in the View component cache pool and the View tree cache pool respectively.

[0171] Exemplarily, the View components and View tree of the target application's user interface are registered with DynamicLifecycleListener. When the user interface is destroyed, DynamicLifecycleListener stores the View components and View tree of the target application's user interface in the View component cache pool and the View tree cache pool, respectively.

[0172] In some embodiments, the user interface is destroyed by calling the onDestroy function.

[0173] Exemplary scenarios for user interface destruction include when the user exits the page (for example, clicking the back key to exit the current page), when the user interface needs to be destroyed when system resources are insufficient, or when the configuration is updated (for example, when the screen rotates) causing the user interface to be destroyed and recreated.

[0174] In some embodiments, as Figure 8 As shown, the user interface rendering method provided in the embodiment of the present application further includes: based on the engine life cycle listener, monitoring the life cycle of the engine instance.

[0175] In some embodiments, before the above-mentioned engine lifecycle listener is used to monitor the lifecycle of the engine instance, the user interface rendering method provided in the embodiment of the present application also includes: configuring the engine lifecycle listener for the engine instance so that the engine lifecycle listener stores the engine instance in the engine cache pool when it listens to the destruction notification of the user interface of the target application.

[0176] The following is an introduction to the user interface rendering method provided by this application through a complete embodiment.

[0177] like Figure 9 FIG. 1 is a flow chart of a user interface rendering method provided by an embodiment of the present application. Figure 9 As shown, including:

[0178] S1. Create a preloading thread to preload the target add-in.

[0179] S2. Create a target cache pool corresponding to the target add-in, and add the preloaded loading data of the target add-in to the corresponding target cache pool.

[0180] S3. When the main thread runs to render the user interface, the loading data of the target add-in is obtained from the target cache pool.

[0181] If the target add-in data exists in the target cache pool, step S4 is executed;

[0182] If the target add-in data does not exist in the target cache pool, step S5 is executed.

[0183] S4. Rendering the user interface based on the target add-in data.

[0184] S5. The loader based on the target add-in loads the load data corresponding to the target add-in, and adds the load data corresponding to the target add-in to the corresponding target cache pool.

[0185] S6. Based on the page lifecycle listener, the lifecycle of the user interface is monitored.

[0186] S7. When the page lifecycle listener receives a notification of destruction of the user interface of the target application, the view component and view tree of the user interface are stored in the view component cache pool and the view tree cache pool respectively.

[0187] Figure 10 A flowchart of a user interface optimization provided in an embodiment of the present application, such as Figure 10 As shown, after the application is started, a preloading process is created to complete the preloading of business methods, dynamic components, engines, templates, VDOM, DOM, and views in sequence. At the same time, the loaded business method data, dynamic component data, engine data, template data, VDOM data, DOM data, and view data are stored in the corresponding cache pool. When the user interface is rendered, the rendering engine obtains engine data, template data, VDOM data, DOM data, view component data, and view tree data from the cache pool in sequence. In this process, if the required data (engine data, template data, VDOM data, DOM data, view component data, and view tree data) does not exist in the cache pool, the required data is reloaded and stored in the corresponding cache pool. In this process, the lifecycle monitoring of the view component and the view tree is realized by declaring the lifecycle monitoring registration. When the user interface destruction notification (onDesrtoy callback function) is monitored, the view component data and the view tree data are recycled and stored in the view component cache pool and the view tree cache pool respectively.

[0188] It is understandable that the user interface rendering method provided by the present application can quickly obtain loading data from the target cache pool during the startup of the target application, and render the user interface based on the loading data, thereby improving the rendering efficiency. At the same time, by setting the preloading thread and the target cache pool, the loading creation can be completed in advance before the user interface is rendered, further improving the rendering rate. In addition, based on the setting of the page lifecycle listener and the engine lifecycle listener, the lifecycle management of the user interface and the engine instance can be performed, and the View components and View tree can be recycled and cached when the user interface is destroyed, thereby realizing the rapid reuse of the View components and the View tree.

[0189] It can be seen that the above mainly introduces the solution provided by the embodiment of the present application from the perspective of the method. In order to achieve the above functions, the embodiment of the present application provides hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should easily appreciate that, in combination with the modules and algorithm steps of each example described in the embodiment disclosed herein, the embodiment of the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in a hardware or computer software driven hardware manner depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present invention.

[0190] In the embodiment of the present application, the functional modules of the user interface rendering device can be divided according to the above method example. For example, each functional module can be divided according to each function, or two or more functions can be integrated into one processing module. The above integrated modules can be implemented in the form of hardware or in the form of software functional modules. Optionally, the division of modules in the embodiment of the present application is schematic and is only a logical functional division. In actual implementation, there may be other division methods.

[0191] Figure 11 This is a structural diagram of a user interface rendering device provided in an embodiment of the present application, which is used to implement the user interface rendering method provided in the above embodiment. Figure 11 As shown, the user interface rendering device 400 includes a processing module 401 .

[0192] The processing module 401 is used to obtain loading data from the target cache pool during the process of starting the target application; the target cache pool is used to store the loading data of the target add-in; the target add-in is the item required to be loaded when the target application is started;

[0193] The processing module 401 is further configured to render the user interface of the target application based on the loading data corresponding to the target add-in.

[0194] In some embodiments, the loaded data stored in the target cache pool includes data obtained by preloading the target loaded item.

[0195] In some embodiments, the processing module 401 is further configured to preload the target add-in based on the preloading thread before the target application is started, obtain loading data corresponding to the target add-in, and store the loading data corresponding to the target add-in in a target cache pool corresponding to the target add-in.

[0196] In some embodiments, before storing the load data corresponding to the target add-in in the target cache pool corresponding to the target add-in, the processing module 401 is further configured to create a target cache pool corresponding to the target add-in.

[0197] In some embodiments, the cache granularity of the target cache pool is related to the level of the target add-in.

[0198] In some embodiments, the hierarchy of the target add-in includes, from top to bottom, the following: engine, template, VDOM, DOM, View component, and View tree.

[0199] In some embodiments, the target add-in includes at least one of the following: a template, a VDOM, a DOM, a View component, and a View tree.

[0200] In some embodiments, the target add-in further includes at least one of the following: a business method, a dynamic component, and an engine.

[0201] In some embodiments, the target cache pool includes at least one of the following: a template cache pool, a VDOM cache pool, a DOM cache pool, a View component cache pool, and a View tree cache pool.

[0202] In some embodiments, the target cache pool further includes at least one of the following: a business method cache pool, a dynamic component cache pool, and an engine cache pool.

[0203] In some embodiments, after obtaining the load data from the target cache pool, processing module 401 is further configured to load the load data corresponding to the target add-in based on the loader of the target add-in if the load data corresponding to the target add-in does not exist in the target cache pool.

[0204] In some embodiments, the processing module 401 is further configured to store the load data corresponding to the target add-in in a target cache pool corresponding to the target add-in.

[0205] In some embodiments, the loaded data stored in the target cache pool includes loaded data that is recycled when the user interface of the target application is destroyed.

[0206] In some embodiments, the user interface rendering device 400 further includes a monitoring module 402 ; the monitoring module 402 is configured to monitor the life cycle of the user interface of the target application based on a page life cycle listener.

[0207] In some embodiments, based on the page lifecycle listener, before performing lifecycle monitoring on the user interface of the target application, the monitoring module 402 is also used to register the View component and View tree of the user interface of the target application to the page lifecycle listener, so that when the page lifecycle listener listens to the destruction notification of the user interface of the target application, the View component and View tree of the user interface of the target application are stored in the View component cache pool and the View tree cache pool respectively.

[0208] In some embodiments, the target add-in includes an engine, and the load data corresponding to the engine is an engine instance; the monitoring module 402 is further configured to monitor the life cycle of the engine instance based on the engine life cycle listener.

[0209] In some embodiments, based on the engine lifecycle listener, before performing lifecycle monitoring on the engine instance, the monitoring module 402 is also used to configure the engine lifecycle listener for the engine instance so that when the engine lifecycle listener listens to the destruction notification of the user interface of the target application, the engine instance is stored in the engine cache pool.

[0210] In the case of implementing the functions of the above-mentioned integrated modules in the form of hardware, the embodiment of the present invention provides a possible structural diagram of the electronic device involved in the above-mentioned embodiment. Figure 12 As shown, the electronic device 900 includes: a processor 902 , a communication interface 903 , and a bus 904 . Optionally, the electronic device 900 may further include a memory 901 .

[0211] Processor 902 may implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 902 may be a central processing unit, a general-purpose processor, a digital signal processor, an application-specific integrated circuit, a field-programmable gate array, or other programmable logic device, a transistor logic device, a hardware component, or any combination thereof. It may implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 902 may also be a combination that implements computing functions, such as a combination of one or more microprocessors, or a combination of a DSP and a microprocessor.

[0212] The communication interface 903 is used to connect to other devices via a communication network, such as Ethernet, wireless access network, wireless local area network (WLAN), etc.

[0213] The memory 901 may be a read-only memory (ROM) or other type of static storage device that can store static information and instructions, a random access memory (RAM) or other type of dynamic storage device that can store information and instructions, or an electrically erasable programmable read-only memory (EEPROM), a disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto.

[0214] As a possible implementation, memory 901 may exist independently of processor 902 and may be connected to processor 902 via bus 904 for storing instructions or program codes. When processor 902 calls and executes the instructions or program codes stored in memory 901, the user interface rendering method provided in an embodiment of the present invention can be implemented.

[0215] In another possible implementation, the memory 901 may also be integrated with the processor 902 .

[0216] The bus 904 may be an extended industry standard architecture (EISA) bus, etc. The bus 904 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 12 Only one thick line is used in the diagram, but this does not mean that there is only one bus or one type of bus.

[0217] Through the description of the above implementation methods, technical personnel in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the service calling device can be divided into different functional modules to complete all or part of the functions described above.

[0218] The present application also provides a computer-readable storage medium. All or part of the processes in the above method embodiments may be performed by computer program instructions directed to the relevant hardware. The program may be stored in the above computer-readable storage medium. When the computer program instructions are executed on a computer, the computer performs the user interface rendering method described in any of the above embodiments.

[0219] Exemplarily, the above-mentioned computer-readable storage media may include, but are not limited to: magnetic storage devices (e.g., hard disks, floppy disks, or magnetic tapes, etc.), optical disks (e.g., compact disks (CDs), digital versatile disks (DVDs), etc.), smart cards, and flash memory devices (e.g., erasable programmable read-only memories (EPROMs), cards, sticks, or key drives, etc.). The various computer-readable storage media described in the present disclosure may represent one or more devices and / or other machine-readable storage media for storing information. The term "machine-readable storage medium" may include, but is not limited to, wireless channels and various other media capable of storing, containing, and / or carrying instructions and / or data.

[0220] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program product runs on a computer, it enables the computer to execute any one of the user interface rendering methods provided in the above embodiments.

[0221] The above are only specific embodiments of the present application, but the scope of protection of this application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A user interface rendering method, characterized in that: The method comprises: During the process of starting the target application, loading data is obtained from the target cache pool; the target cache pool is used to store loading data of the target add-in; the target add-in is an item required to be loaded when the target application is started; Rendering the user interface of the target application based on the loading data corresponding to the target added-in item.

2. The method according to claim 1, characterized in that The loaded data stored in the target cache pool includes data obtained by preloading the target loaded item.

3. The method according to claim 1, characterized in that The method further comprises: Before the target application is started, preloading the target add-in item based on a preloading thread to obtain loading data corresponding to the target add-in item; The loaded data corresponding to the target added-in item is stored in a target cache pool corresponding to the target added-in item.

4. The method according to claim 3, characterized in that Before storing the load data corresponding to the target add-in item in the target cache pool corresponding to the target add-in item, the method further includes: Create a target cache pool corresponding to the target add-in.

5. The method according to claim 1, wherein The cache granularity of the target cache pool is related to the level of the target add-in.

6. The method according to claim 5, characterized in that The target add-in hierarchy includes, from top to bottom: Template, VDOM, DOM, View component, View tree.

7. The method according to claim 1, characterized in that The target add-in includes at least one of the following: Template, VDOM, DOM, View component, View tree.

8. The method according to claim 7, characterized in that The target add-in item further includes at least one of the following: Business methods, dynamic components, engines.

9. The method according to claim 1, characterized in that The target cache pool includes at least one of the following: Template cache pool, VDOM cache pool, DOM cache pool, View component cache pool, View tree cache pool.

10. The method according to claim 9, characterized in that The target cache pool further includes at least one of the following: Business method cache pool, dynamic component cache pool, engine cache pool.

11. The method according to claim 1, wherein After acquiring the load data from the target cache pool, the method further includes: If the load data corresponding to the target add-in does not exist in the target cache pool, the load data corresponding to the target add-in is loaded based on the loader of the target add-in.

12. The method according to claim 11, characterized in that The method further comprises: The loaded data corresponding to the target added-in item is stored in the target cache pool corresponding to the target added-in item.

13. The method according to claim 1, wherein The loaded data stored in the target cache pool includes loaded data that is recycled when the user interface of the target application is destroyed.

14. The method according to claim 1, wherein The method further comprises: Based on the page lifecycle listener, the lifecycle of the user interface of the target application is monitored.

15. The method according to claim 14, characterized in that Before performing lifecycle monitoring on the user interface of the target application based on the page lifecycle listener, the method further includes: Register the View component and View tree of the target application's user interface to the page lifecycle listener, so that when the page lifecycle listener receives the destruction notification of the target application's user interface, it stores the View component and View tree of the target application's user interface in the View component cache pool and the View tree cache pool, respectively.

16. The method according to claim 1, wherein The target add-in includes an engine, and the load data corresponding to the engine is an engine instance; the method further includes: Based on the engine lifecycle listener, the lifecycle of the engine instance is monitored.

17. The method according to claim 16, characterized in that Before performing lifecycle monitoring on the engine instance based on the engine lifecycle listener, the method further includes: The engine lifecycle listener is configured for the engine instance, so that when the engine lifecycle listener receives a notification of destroying the user interface of the target application, the engine instance is stored in an engine cache pool.

18. An electronic device, characterized in that: The method comprises a processor and a memory, wherein the processor is coupled to the memory; the memory is used to store computer instructions, and the computer instructions are loaded and executed by the processor to enable a computer device to implement the user interface rendering method according to any one of claims 1 to 17.

19. A computer storage medium, characterized in that The computer storage medium includes computer execution instructions, and when the computer execution instructions are executed on a computer, the computer is caused to execute the user interface rendering method according to any one of claims 1 to 17.

20. A computer program product, characterized in that The computer program product includes a computer program, and when the computer program is run on an electronic device, the electronic device executes the user interface rendering method according to any one of claims 1 to 17.

Images