A method, device and medium for rendering an interface based on a rendering engine

Abstract

The embodiment of the specification discloses a kind of interface rendering method, equipment and medium based on rendering engine, it is related to computer technical field, method includes: the interface display strategy of the interface to be rendered is acquired, according to preset mode, based on interface display strategy, the interface rendering data source corresponding to the interface to be rendered is built, interface rendering data source includes the component nesting attribute of interface component in the interface to be rendered;By rendering engine, the rendering data source corresponding to the interface to be rendered is parsed, and the multiple interface components of the interface to be rendered are obtained;According to the component nesting attribute of interface component in the interface to be rendered, the multiple interface components of the interface to be rendered are sorted, and the interface component rendering order of the interface to be rendered is generated;According to the interface component rendering order of the interface to be rendered, interface component is rendered in turn, and the interface to be rendered is obtained.No longer rely on script js file to carry out interface rendering, reduce the request number of downloading js file, avoid the burden of deploying a large number of js files.

Description

Technical Field

[0001] This specification relates to the field of computer technology, and in particular to a method, device and medium for rendering interfaces based on a rendering engine. Background Technology

[0002] In current B / S architecture and browser-based web systems, the vast majority use JavaScript (JS) files for UI rendering. Existing UI rendering technologies involve downloading different JS files. These JS files are generated by developers who bundle source code files and their configurations into a single, complex JS file using bundling tools like Webpack or Rollup. Multiple different JS files are then deployed on a server, and the browser renders the UI by interacting with these different JS files.

[0003] Developers package their source code into fixed-format JavaScript files using a bundling tool. This requires a fixed-format JavaScript engine to execute the files and render the interface in the browser. However, this approach has significant drawbacks. Different bundled JavaScript file formats require different JavaScript parsing engines, necessitating developers to adapt to specific bundled formats. Furthermore, as system functionality increases, the number of JavaScript files grows dramatically, requiring multiple requests to the server, increasing network overhead and server load. Moreover, the fixed bundled format makes browser compatibility extremely difficult.

[0004] As can be seen from the above discussion, the existing interface rendering methods rely on script files, the deployment process is relatively cumbersome, and the adaptability and rendering efficiency are poor, which cannot meet the needs of interface rendering. Summary of the Invention

[0005] This specification provides one or more embodiments of a rendering engine-based interface rendering method, device, and medium to solve the following technical problems: existing interface rendering methods rely on script files, the deployment process is relatively cumbersome, and the adaptability and rendering efficiency are poor, which cannot meet the needs of interface rendering.

[0006] One or more embodiments of this specification employ the following technical solutions:

[0007] This specification provides one or more embodiments of a rendering engine-based interface rendering method, characterized in that the method includes: obtaining an interface display strategy for an interface to be rendered; constructing an interface rendering data source corresponding to the interface to be rendered based on the interface display strategy according to a preset method, wherein the interface rendering data source includes component nesting attributes of interface components in the interface to be rendered; parsing the rendering data source corresponding to the interface to be rendered through a rendering engine to obtain multiple interface components of the interface to be rendered; sorting the multiple interface components of the interface to be rendered according to the component nesting attributes of the interface components in the interface to be rendered to generate an interface component rendering order of the interface to be rendered; and rendering the interface components sequentially according to the interface component rendering order of the interface to be rendered to obtain the interface to be rendered.

[0008] Further, according to a preset method, based on the interface display strategy, a rendering data source for the interface to be rendered is constructed, specifically including: determining the interface display format in the interface display strategy; determining multiple required components and component attributes of each required component based on the interface display format, wherein the component attributes include component name, component type, and component nesting relationship; constructing statement nodes and generating an interface format file based on the multiple required components and the component attributes of each required component, wherein the interface format file is in JSON format; and using the interface format file as the rendering data source for the interface to be rendered.

[0009] Furthermore, the rendering engine parses the rendering data source corresponding to the interface to be rendered to obtain multiple interface components of the interface to be rendered. Specifically, this includes: using the rendering engine to perform node lookup on the rendering data source to determine multiple specified statement nodes, wherein the specified statement nodes are used to represent required components; parsing the node content of the multiple specified statement nodes to obtain the node attributes corresponding to each specified statement node; and obtaining multiple interface components corresponding to the interface to be rendered based on the node attributes corresponding to each specified statement node.

[0010] Further, according to the component nesting attributes of the interface components in the interface to be rendered, the multiple interface components of the interface to be rendered are sorted to generate the rendering order of the interface components of the interface to be rendered. Specifically, this includes: obtaining the node attributes corresponding to each specified statement node, wherein the node attributes include the component name and component nesting relationship of the required component corresponding to the node; sorting the multiple specified statement nodes according to the component nesting relationship of the required component corresponding to each specified statement node, in an order of nesting from the inside out, to generate a node sorting result of the multiple specified statement nodes; and converting the node sorting result into the rendering order of the interface components of the interface to be rendered based on the component name of the required component corresponding to each specified statement node.

[0011] Further, the interface components are rendered sequentially according to their rendering order to obtain the interface to be rendered. Specifically, this includes: rendering the interface components in the rendering order according to their rendering order, and setting a rendering flag for each rendered interface component; identifying the first interface component at the end of the rendering order among the multiple interface components; obtaining the first component attribute corresponding to the first interface component, and determining whether the first interface component is the outermost component based on the first component attribute and the rendering flag; when the first interface component is the outermost component, determining the interface to be rendered, and interacting with a specified browser to display the interface to be rendered through the specified browser.

[0012] Further, based on the first component attribute corresponding to the first interface component and the rendering identifier, determining whether the first interface component is the outermost component specifically includes: determining multiple second interface components contained in the first interface component according to the first component attribute corresponding to the first interface component, wherein the first component attribute includes the nesting relationship of the interface components; obtaining the rendering identifier of each second interface component, wherein the rendering identifier includes a rendered identifier and an unrendered identifier; when the rendering identifier of each second interface component is the rendered identifier, determining that the first interface component is the outermost component.

[0013] Further, based on the component nesting relationship of the requirement components corresponding to each specified statement node, the multiple specified statement nodes are sorted in an outward nesting order to generate a node sorting result for the multiple specified statement nodes. Specifically, this includes: generating a directed dependency graph of the multiple specified statement nodes based on the component nesting relationship of the requirement components corresponding to each specified statement node; determining the nesting level of each specified statement node based on the directed dependency graph, wherein in the directed dependency graph, the first statement node corresponding to the first nesting level points to the second statement node corresponding to the second nesting level, and the first nesting level is lower than the second nesting level; and generating a node sorting result for the multiple specified statement nodes based on the nesting level of each specified statement node.

[0014] Furthermore, based on the nesting level of each specified statement node, a node sorting result for multiple specified statement nodes is generated, specifically including: determining the nesting order from the inside out according to the nesting level of each specified statement node in ascending order; sorting the multiple specified statement nodes according to the nesting order from the inside out to generate a node sorting result for multiple specified statement nodes.

[0015] This specification provides one or more embodiments of a rendering engine-based interface rendering device, including:

[0016] At least one processor; and,

[0017] A memory communicatively connected to the at least one processor; wherein,

[0018] The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to:

[0019] The process involves obtaining the interface display strategy for the interface to be rendered, constructing an interface rendering data source corresponding to the interface to be rendered based on the interface display strategy according to a preset method, wherein the interface rendering data source includes the component nesting attributes of the interface components in the interface to be rendered; parsing the rendering data source corresponding to the interface to be rendered through a rendering engine to obtain multiple interface components of the interface to be rendered; sorting the multiple interface components of the interface to be rendered according to the component nesting attributes of the interface components in the interface to be rendered to generate the interface component rendering order of the interface to be rendered; and rendering the interface components sequentially according to the interface component rendering order of the interface to be rendered to obtain the interface to be rendered.

[0020] This specification provides one or more embodiments of a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as follows:

[0021] The process involves obtaining the interface display strategy for the interface to be rendered, constructing an interface rendering data source corresponding to the interface to be rendered based on the interface display strategy according to a preset method, wherein the interface rendering data source includes the component nesting attributes of the interface components in the interface to be rendered; parsing the rendering data source corresponding to the interface to be rendered through a rendering engine to obtain multiple interface components of the interface to be rendered; sorting the multiple interface components of the interface to be rendered according to the component nesting attributes of the interface components in the interface to be rendered to generate the interface component rendering order of the interface to be rendered; and rendering the interface components sequentially according to the interface component rendering order of the interface to be rendered to obtain the interface to be rendered.

[0022] The at least one technical solution adopted in the embodiments of this specification can achieve the following beneficial effects: Through the above technical solutions, a data source for interface rendering is constructed according to the interface display strategy, eliminating reliance on script (JS) files for interface rendering, significantly reducing the number of requests to download JS files, and avoiding the burden of deploying a large number of JS files. Through the interpretation rendering engine, only the interface JSON format file is needed to quickly render the interface, and due to the reduction in JS file requests, the interface rendering time is greatly reduced, improving the user experience; since the interpretation rendering engine is responsible for adapting to different browsers, it can quickly adapt to different browsers and display the same rendering effect for different browsers. Attached Figure Description

[0023] To more clearly illustrate the technical solutions in the embodiments or prior art of this specification, the drawings used in the description of the embodiments or prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. In the drawings:

[0024] Figure 1 A flowchart illustrating a rendering engine-based interface rendering method provided in the embodiments of this specification;

[0025] Figure 2 This is an application diagram illustrating another interface rendering method based on a rendering engine provided in the embodiments of this specification.

[0026] Figure 3 This is a schematic diagram of the structure of a rendering engine-based interface rendering device provided in the embodiments of this specification. Detailed Implementation

[0027] To enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this specification, and not all embodiments. Based on the embodiments of this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this specification.

[0028] In current B / S architecture and browser-based web systems, the vast majority use JavaScript (JS) files for UI rendering. Existing UI rendering technologies involve downloading different JS files. These JS files are generated by developers who bundle source code files and their configurations into a single, complex JS file using bundling tools like Webpack or Rollup. Multiple different JS files are then deployed on a server, and the browser renders the UI by interacting with these different JS files.

[0029] Developers package their source code into fixed-format JavaScript files using a bundling tool. This requires a fixed-format JavaScript engine to execute the files and render the interface in the browser. However, this approach has significant drawbacks. Different bundled JavaScript file formats require different JavaScript parsing engines, necessitating developers to adapt to specific bundled formats. Furthermore, as system functionality increases, the number of JavaScript files grows dramatically, requiring multiple requests to the server, increasing network overhead and server load. Moreover, the fixed bundled format makes browser compatibility extremely difficult.

[0030] As can be seen from the above discussion, the existing interface rendering methods rely on script files, the deployment process is relatively cumbersome, and the adaptability and rendering efficiency are poor, which cannot meet the needs of interface rendering.

[0031] This specification provides an interface rendering method based on a rendering engine. It should be noted that the execution subject in this specification embodiment can be a server or any device with data processing capabilities. Figure 1 A flowchart illustrating a rendering engine-based interface rendering method provided in this specification is shown below. Figure 1 As shown, the main steps include the following:

[0032] Step S101: Obtain the interface display strategy of the interface to be rendered, and construct the interface rendering data source corresponding to the interface to be rendered based on the interface display strategy according to the preset method.

[0033] The data source for rendering this interface includes the nested properties of the interface components in the interface to be rendered.

[0034] According to a preset method, based on the interface display strategy, the interface rendering data source for the interface to be rendered is constructed, specifically including: determining the interface display format in the interface display strategy; based on the interface display format, determining multiple required components and the component attributes of each required component, the component attributes including component name, component type, and component nesting relationship; constructing statement nodes according to the multiple required components and the component attributes of each required component, generating an interface format file, wherein the interface format file is in JSON format; and using the interface format file as the interface rendering data source for the interface to be rendered.

[0035] In one embodiment of this specification, a display strategy for the interface to be rendered is predetermined. This display strategy refers to the composition of the final rendered interface and the display method between its components, i.e., the interface display format, which can be determined by the required interface components. The interface rendering data source for this interface is then constructed based on the display strategy.

[0036] In one embodiment of this specification, based on the interface display format, multiple required components for the interface to be rendered and the component attributes of each required component are determined. These component attributes include the component name, component type, and component nesting relationship. Each required component is treated as a statement node. Based on the component attributes of each required component, the statement node is populated with attribute content to generate a JSON file. This JSON file is then used as the data source for rendering the interface to be rendered.

[0037] Step S102: The rendering engine parses the rendering data source corresponding to the interface to be rendered, and obtains multiple interface components of the interface to be rendered.

[0038] The rendering engine parses the rendering data source corresponding to the interface to be rendered, and obtains multiple interface components of the interface to be rendered. Specifically, the rendering engine performs node lookup on the rendering data source to determine multiple specified statement nodes, where the specified statement nodes are used to represent the required components; the node content of the multiple specified statement nodes is parsed to obtain the node attributes corresponding to each specified statement node; and multiple interface components corresponding to the interface to be rendered are obtained based on the node attributes corresponding to each specified statement node.

[0039] In one embodiment of this specification, the rendering engine parses the JSON file and performs node lookups within it, for example, by searching for "components". Each found "components" node indicates that the data source file contains a required component; that is, the "components" node is the specified statement node. The content of the nodes following the "components" node is parsed to obtain node attributes, such as id, type, view model, and contents, where contents is used to represent the component nesting relationship. Following this method, based on the node attributes corresponding to each specified statement node, the multiple UI components required for the rendered interface are determined.

[0040] Step S103: Sort the multiple interface components of the interface to be rendered according to the component nesting attributes of the interface components in the interface to be rendered, and generate the rendering order of the interface components of the interface to be rendered.

[0041] Based on the component nesting attributes of the interface components in the interface to be rendered, the multiple interface components of the interface to be rendered are sorted to generate the rendering order of the interface components of the interface to be rendered. Specifically, this includes: obtaining the node attributes corresponding to each specified statement node, wherein the node attributes include the component name and component nesting relationship of the required component corresponding to the node; sorting the multiple specified statement nodes according to the component nesting relationship of the required component corresponding to each specified statement node in the order of nesting from the inside out, generating a node sorting result for the multiple specified statement nodes; and converting the node sorting result into the rendering order of the interface components of the interface to be rendered based on the component name of the required component corresponding to each specified statement node.

[0042] In one embodiment of this specification, the node attributes of each specified statement node are determined, namely the component name and component nesting relationship of the component corresponding to that node. It should be noted that component nesting relationship refers to the inclusion relationship between components; during rendering, they need to be rendered from the inside out according to different levels. For example, if component A nests component B, it means that component A contains component B, and their order from the inside out is component B, then component A. Based on the component nesting relationship of the required component corresponding to each specified statement node, multiple specified statement nodes are sorted according to the nesting order from the inside out, generating a node sorting result for multiple specified statement nodes. For example, if statement node 4 contains statement node 3, statement node 3 contains statement node 2, and statement node 2 contains statement node 1, the generated node sorting result according to the nesting order from the inside out is node 1, node 2, node 3, and node 4. After obtaining the node sorting result, based on the component name of the required component corresponding to each specified statement node, the node sorting result is converted into the rendering order of the interface components of the interface to be rendered. It should be noted that there may be a situation where statement node 3 contains both statement node 2 and statement node 1. In this case, statement node 1 and statement node 2 are at the same level, and their rendering order can be set according to user requirements.

[0043] Based on the component nesting relationship of the requirement components corresponding to each specified statement node, the multiple specified statement nodes are sorted in an outward nesting order to generate a node sorting result for the multiple specified statement nodes. Specifically, this includes: generating a directed dependency graph of the multiple specified statement nodes based on the component nesting relationship of the requirement components corresponding to each specified statement node; determining the nesting level of each specified statement node based on the directed dependency graph, wherein in the directed dependency graph, the first statement node corresponding to the first nesting level points to the second statement node corresponding to the second nesting level, and the first nesting level is lower than the second nesting level; and generating a node sorting result for the multiple specified statement nodes based on the nesting level of each specified statement node.

[0044] In one embodiment of this specification, the node sorting result can be generated using a directed dependency graph. First, based on the component nesting relationship of the requirement components corresponding to each specified statement node, a directed dependency graph of multiple specified statement nodes is generated. For example, statement node 4 contains statement node 3, statement node 3 contains statement node 2, and statement node 2 contains statement node 1. The directed dependency graph between statement node 1, statement node 2, statement node 3, and statement node 4 can be represented as: statement node 1 points to statement node 2, statement node 2 points to statement node 3, and statement node 3 points to statement node 4. Based on the directed dependency graph, the nesting level of each specified statement node is determined. Continuing with the previous example, the nesting level corresponding to statement node 1 is level one, the nesting level corresponding to statement node 2 is level two, the nesting level corresponding to statement node 3 is level three, and the nesting level corresponding to statement node 4 is level four. Level one is less than level two, level two is less than level three, and level three is less than level four, thus obtaining the nesting level of each specified statement node. Based on the nesting level of each specified statement node, the node sorting result is generated in ascending order of nesting level.

[0045] Based on the nesting level of each specified statement node, generate a node sorting result for multiple specified statement nodes. Specifically, this includes: determining the nesting order from the inside out according to the nesting level of each specified statement node in ascending order; and sorting the multiple specified statement nodes according to the nesting order from the inside out to generate a node sorting result for multiple specified statement nodes.

[0046] In one embodiment of this specification, after obtaining the nesting level of each specified statement node, the nesting levels are arranged from smallest to largest as the nesting order from the inside out, so as to sort the multiple specified statement nodes according to the nesting order from the inside out and generate a node sorting result.

[0047] Step S104: Render the interface components sequentially according to their rendering order to obtain the interface to be rendered.

[0048] The interface components are rendered sequentially according to their rendering order to obtain the interface to be rendered. Specifically, this includes: rendering the interface components in the rendering order sequentially, and setting a rendering flag for each rendered component; identifying the first interface component at the end of the rendering order among the multiple interface components; obtaining the first component attribute corresponding to the first interface component, and determining whether the first interface component is the outermost component based on the first component attribute and the rendering flag; when the first interface component is the outermost component, determining the interface to be rendered, and interacting with a specified browser to display the interface through the specified browser.

[0049] In one embodiment of this specification, after obtaining the rendering order of the interface components, the interface components are rendered sequentially from the inside out. After each interface component is rendered, a rendering flag is set for that component. This rendering flag indicates that the component has completed rendering. Before rendering any interface component, the rendering flags of all interface components are initialized to 0. After rendering is complete, the rendering flags are set to 1. Once all interface components have been rendered, it is determined whether the last rendered interface component is the outermost interface component. Here, the first interface component is the last interface component in the rendering order. The component attributes and rendering flag of the first interface component are determined to confirm whether the first interface component is the outermost component.

[0050] In one embodiment of this specification, when the first interface component is the outermost component, the interface to be rendered is determined, and the interface to be rendered interacts with a specified browser to display the interface to be rendered through the specified browser. Interacting with the browser to display the rendered interface in the browser involves creating a body element of the interface using the browser API: document.createElement(“body”), then setting its inner HTML to the HTML structure obtained by the rendering engine from parsing the JSON file, and finally, the browser renders the interface.

[0051] Based on the first component attribute corresponding to the first interface component and the rendering identifier, determining whether the first interface component is the outermost component specifically includes: determining multiple second interface components contained in the first interface component according to the first component attribute corresponding to the first interface component, wherein the first component attribute includes the nesting relationship of the interface components; obtaining the rendering identifier of each second interface component, wherein the rendering identifier includes a rendered identifier and an unrendered identifier; when the rendering identifier of each second interface component is the rendered identifier, determining that the first interface component is the outermost component.

[0052] In one embodiment of this specification, when determining whether a first interface component is the outermost component, the nesting relationship attribute of the first interface component, namely the contents node attribute, is used. If all interface components corresponding to its contents node are rendered, and no other interface contains the contents of that component, then the node is considered the outermost interface component. In other words, the interface components corresponding to the contents node are multiple second interface components contained within the first interface component. When all the interface components it contains have been rendered, and no other interface component contains the first interface component, the first interface component is considered the outermost component.

[0053] Figure 2 This is an application diagram illustrating another interface rendering method based on a rendering engine provided in the embodiments of this specification, such as... Figure 2 As shown, firstly, a JSON file in the UI rendering format suitable for the interpreter rendering engine is obtained; the interpreter rendering engine parses the JSON file to construct UI components with a hierarchical structure, where UI components can contain each other, and each UI component can be displayed independently. The interpreter rendering engine renders the UI components layer by layer in sequence until the outermost UI component; finally, it interacts with the browser to display the rendered interface through the browser.

[0054] For the JSON file used by the interpreter rendering engine, it must contain self-contained attributes of the UI components, such as id, type, and name, and also a contents node to contain other UI components. The rendering order of UI components is from the inside out, and within the same layer, in sequential order, with the content node determining the component's layer. The outermost UI component is determined if all UI components corresponding to its contents node are rendered, and no other UI component contains that component in its contents node; then that node is considered the outermost UI component. Interacting with the browser, the rendered interface is displayed in the browser. A body element is created using the browser API: document.createElement("body"), and its innerHtml is set to the HTML structure obtained from parsing the JSON file by the interpreter rendering engine, allowing the browser to render the interface.

[0055] By employing the above technical solution, a data source for interface rendering is constructed based on the interface display strategy, eliminating reliance on JavaScript files for interface rendering. This significantly reduces the number of JavaScript file download requests and avoids the burden of deploying a large number of JavaScript files. Through the interpretive rendering engine, only the interface's JSON format file is needed for rapid rendering. Furthermore, the reduced JavaScript file requests greatly decrease rendering time, improving user experience. Since browser compatibility is handled by the interpretive rendering engine, it can quickly adapt to different browsers, displaying the same rendering effect across various browsers.

[0056] This specification also provides an interface rendering device based on a rendering engine, such as... Figure 3 As shown, the device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to:

[0057] Obtain the interface display strategy of the interface to be rendered. Based on the interface display strategy according to a preset method, construct the interface rendering data source corresponding to the interface to be rendered. The interface rendering data source includes the component nesting attributes of the interface components in the interface to be rendered. The rendering engine parses the rendering data source corresponding to the interface to be rendered to obtain multiple interface components of the interface to be rendered. According to the component nesting attributes of the interface components in the interface to be rendered, sort the multiple interface components of the interface to be rendered to generate the interface component rendering order of the interface to be rendered. According to the interface component rendering order of the interface to be rendered, render the interface components in sequence to obtain the interface to be rendered.

[0058] This specification also provides a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as follows:

[0059] Obtain the interface display strategy of the interface to be rendered. Based on the interface display strategy according to a preset method, construct the interface rendering data source corresponding to the interface to be rendered. The interface rendering data source includes the component nesting attributes of the interface components in the interface to be rendered. The rendering engine parses the rendering data source corresponding to the interface to be rendered to obtain multiple interface components of the interface to be rendered. According to the component nesting attributes of the interface components in the interface to be rendered, sort the multiple interface components of the interface to be rendered to generate the interface component rendering order of the interface to be rendered. According to the interface component rendering order of the interface to be rendered, render the interface components in sequence to obtain the interface to be rendered.

[0060] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments of apparatus, devices, and non-volatile computer storage media are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0061] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0062] The devices, media, and methods provided in the embodiments of this specification are one-to-one correspondences. Therefore, the devices and media also have similar beneficial technical effects as their corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0063] Those skilled in the art will understand that the embodiments of this specification can be provided as methods, systems, or computer program products. Therefore, this specification may take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this specification may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0064] This specification is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this specification. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0065] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0066] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0067] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0068] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0069] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0070] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0071] The above are merely one or more embodiments of this specification and are not intended to limit this specification. Various modifications and variations can be made to the one or more embodiments of this specification by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principle of one or more embodiments of this specification should be included within the scope of the claims of this specification.

Claims

1. A UI rendering method based on a rendering engine, characterized in that, The method includes: Obtain the interface display strategy of the interface to be rendered, and construct the interface rendering data source corresponding to the interface to be rendered based on the interface display strategy according to a preset method. The interface rendering data source includes the component nesting attributes of the interface components in the interface to be rendered. The rendering engine parses the rendering data source corresponding to the interface to be rendered, and obtains multiple interface components of the interface to be rendered. According to the component nesting attribute of the interface components in the interface to be rendered, sort the multiple interface components of the interface to be rendered to generate the rendering order of the interface components of the interface to be rendered. The interface components are rendered sequentially according to their rendering order to obtain the interface to be rendered. Based on the component nesting attributes of the interface components in the interface to be rendered, the multiple interface components of the interface to be rendered are sorted to generate the rendering order of the interface components of the interface to be rendered, specifically including: Obtain the node attributes corresponding to each specified statement node, wherein the node attributes include the component name and component nesting relationship of the requirement component corresponding to the node; Based on the component nesting relationship of the requirement component corresponding to each specified statement node, the multiple specified statement nodes are sorted in the order of nesting from the inside out, generating a node sorting result for the multiple specified statement nodes. Based on the component name of the required component corresponding to each specified statement node, the node sorting result is converted into the rendering order of the interface components of the interface to be rendered; Based on the component nesting relationship of the requirement components corresponding to each specified statement node, the multiple specified statement nodes are sorted in an order of nesting from the inside out, generating a node sorting result for the multiple specified statement nodes, specifically including: Based on the component nesting relationship of the requirement components corresponding to each specified statement node, generate a directed graph of dependency relationships for multiple specified statement nodes; Based on the directed dependency graph, the nesting level of each specified statement node is determined, wherein in the directed dependency graph, the first statement node corresponding to the first nesting level points to the second statement node corresponding to the second nesting level, and the first nesting level is less than the second nesting level. Based on the nesting level of each specified statement node, generate a node sorting result for multiple specified statement nodes; Based on the nesting level of each specified statement node, a node sorting result for multiple specified statement nodes is generated, specifically including: Based on the nesting level of each specified statement node, the nesting order from the inside out is determined in ascending order of the nesting levels; The system sorts multiple specified statement nodes according to their nesting order from the inside out, generating a sorted result for the multiple specified statement nodes.

2. The interface rendering method based on a rendering engine according to claim 1, characterized in that, According to a preset method and based on the interface display strategy, the interface rendering data source for the interface to be rendered is constructed, specifically including: Determine the interface display format in the interface display strategy; Based on the interface display format, multiple requirement components and component attributes of each requirement component are determined. The component attributes include component name, component type, and component nesting relationship. Based on multiple requirement components and the component attributes of each requirement component, construct statement nodes and generate an interface format file, wherein the interface format file is in JSON format; The interface format file is used as the interface rendering data source for the interface to be rendered.

3. The interface rendering method based on a rendering engine according to claim 1, characterized in that, The rendering engine parses the rendering data source corresponding to the interface to be rendered, obtaining multiple interface components of the interface to be rendered, specifically including: The rendering engine performs node lookup on the rendering data source to determine multiple specified statement nodes, wherein the specified statement nodes are used to represent the required components. The node content of the multiple specified statement nodes is parsed to obtain the node attributes corresponding to each specified statement node; Based on the node attributes corresponding to each specified statement node, multiple interface components corresponding to the interface to be rendered are obtained.

4. The interface rendering method based on a rendering engine according to claim 1, characterized in that, The interface components are rendered sequentially according to their rendering order to obtain the interface to be rendered, specifically including: According to the rendering order of the interface components of the interface to be rendered, the interface components in the rendering order are rendered in sequence, and the rendering flag is set for the interface components after rendering is completed. Among the plurality of interface components, the first interface component located at the end of the rendering order of the interface components is determined; Obtain the first component attribute corresponding to the first interface component, and determine whether the first interface component is the outermost component based on the first component attribute corresponding to the first interface component and the rendering identifier; When the first interface component is the outermost component, the interface to be rendered is determined, and the interface to be rendered is interacted with a specified browser so that the interface to be rendered can be displayed through the specified browser.

5. The interface rendering method based on a rendering engine according to claim 4, characterized in that, Based on the first component attribute corresponding to the first interface component and the rendering identifier, it is determined whether the first interface component is the outermost component, specifically including: Based on the first component attribute corresponding to the first interface component, determine a plurality of second interface components contained in the first interface component, wherein the first component attribute includes the nesting relationship of the interface components; Obtain the rendering identifier of each of the second interface components, wherein the rendering identifier includes a rendered identifier and an unrendered identifier; When the rendering identifier of each of the second interface components is the rendered identifier, the first interface component is determined to be the outermost component.

6. A UI rendering device based on a rendering engine, characterized in that, The device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method as described in any one of claims 1-5.

7. A non-volatile computer storage medium storing computer-executable instructions, characterized in that, The computer-executable instructions are configured to perform the method as described in any one of claims 1-5.

Images