CN108874393B

CN108874393B - Rendering method, rendering device, storage medium and computer equipment

Info

Publication number: CN108874393B
Application number: CN201810573849.6A
Authority: CN
Inventors: 盛波
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2018-06-06
Filing date: 2018-06-06
Publication date: 2021-07-02
Anticipated expiration: 2038-06-06
Also published as: CN108874393A

Abstract

The application relates to a rendering method, a rendering device, a storage medium and a computer device, wherein the method comprises the following steps: acquiring a front-end node tree; determining a first container node only including composition information in the front-end node tree; generating a typesetting result; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree; generating an upper screen node tree which accords with the node tree structure according to the typesetting result; and rendering according to the upper screen node tree. The technical problem that rendering speed is low due to the fact that a large number of controls are generated in the rendering process can be solved through the scheme provided by the application.

Description

Rendering method, rendering device, storage medium and computer equipment

Technical Field

The present application relates to the field of internet technologies, and in particular, to a rendering method, an apparatus, a storage medium, and a computer device.

Background

With the continuous development of internet technology, users can install various browsers or other application programs with web browsing functions on terminals, and users can browse and acquire interesting contents conveniently through front-end data with texts, pictures, videos and the like displayed by the browsers or other application programs with web browsing functions.

Before displaying the front-end data, the terminal renders the front-end data according to the internal relationship of the front-end data, and in a conventional rendering scheme, when receiving the front-end data sent by a server, the terminal typesets the front-end data according to the size of a terminal screen by using a User Interface (UI) thread according to the internal relationship of the front-end data, and renders the typesetted front-end data. However, when the front end data volume is large and the internal relationship is complex, a large number of controls will be generated in the rendering process, thereby causing a problem of slow rendering speed.

Disclosure of Invention

Based on this, it is necessary to provide a data presentation method, an apparatus, a storage medium, and a computer device for solving a technical problem of slow rendering speed caused by generation of a large number of controls during rendering.

A rendering method, comprising:

acquiring a front-end node tree;

determining a first container node only including composition information in the front-end node tree;

generating a typesetting result; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree;

generating an upper screen node tree which accords with the node tree structure according to the typesetting result;

and rendering according to the upper screen node tree.

A rendering apparatus, comprising:

the node tree acquisition module is used for acquiring a front-end node tree;

the container node determining module is used for determining a first container node only comprising the typesetting information in the front-end node tree;

the typesetting result generating module is used for generating a typesetting result; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree;

the node tree generating module is used for generating an upper screen node tree which accords with the node tree structure according to the typesetting result;

and the rendering module is used for rendering according to the upper screen node tree.

A storage medium storing a computer program which, when executed by a processor, causes the processor to perform the steps of the rendering method described above

A computer device comprising a memory and a processor, the memory storing a computer program which, when executed by the processor, causes the processor to perform the steps of the rendering method described above.

The rendering method, the rendering device, the storage medium and the computer equipment acquire the front-end node tree, determine the first container node only including the typesetting information in the front-end node tree, and accordingly find the node which can be optimized. And generating a typesetting result which represents that the first container node is deleted from the front-end node tree, and generating a screen node tree according to the typesetting result, so that the screen node tree optimized for the front-end node tree can be obtained, and the structure of the front-end node tree is simplified. And generating a screen node tree according to the typesetting result, wherein the screen node tree is the node tree after the front node tree is optimized, so that the rendering time can be effectively shortened and the rendering speed can be improved when the rendering is carried out according to the screen node tree.

Drawings

FIG. 1 is a diagram of an application environment of a rendering method in one embodiment;

FIG. 2 is a flow diagram of a rendering method in one embodiment;

FIG. 3 is a diagram illustrating the relationship between a tree of front-end nodes and an interface in one embodiment;

FIG. 4 is a diagram illustrating optimization of a front-end node tree in one embodiment;

FIG. 5 is a flowchart illustrating steps for generating a composition result based on the determined locations and the determined locations according to one embodiment;

FIG. 6 is a diagram illustrating optimization of a front-end node tree to obtain a top-screen node tree, according to an embodiment;

FIG. 7 is a schematic diagram illustrating the determination of a location at which a child node of a first container node is mounted in one embodiment;

FIG. 8 is a diagram illustrating the steps for finding a first container node that includes only composition information, under an embodiment;

FIG. 9 is a diagram illustrating an embodiment of determining a location at which a child node is mounted when a container node includes only composition information;

FIG. 10 is a diagram illustrating the steps of determining a subtree and having a second container node as a node for mounting the subtree in one embodiment;

FIG. 11 is a diagram illustrating the determination of the location of a child node when a container node is a type information only node in one embodiment;

FIG. 12 is a schematic diagram of determining a location at which a subtree of a first container node is mounted in one embodiment;

FIG. 13 is a diagram illustrating the steps for restoring an on-screen node tree in one embodiment;

FIG. 14 is a diagram illustrating changes to container nodes in one embodiment;

FIG. 15 is a diagram illustrating recovery of an on-screen tree with changes to container nodes in one embodiment;

FIG. 16 is a block diagram showing a configuration of a rendering apparatus in one embodiment;

FIG. 17 is a block diagram showing the construction of a rendering apparatus according to another embodiment;

FIG. 18 is a block diagram of a computer device in one embodiment.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application.

FIG. 1 is a diagram of an application environment of a rendering method in one embodiment. Referring to fig. 1, the rendering method is applied to a rendering system. The rendering system includes a terminal 110 and a server 120. The terminal 110 and the server 120 are connected through a network. The terminal 110 may specifically be a desktop terminal or a mobile terminal, and the mobile terminal may specifically be at least one of a mobile phone, a tablet computer, a notebook computer, and the like. The server 120 may be implemented as a stand-alone server or a server cluster composed of a plurality of servers.

As shown in FIG. 2, in one embodiment, a rendering method is provided. The embodiment is mainly illustrated by applying the method to the terminal 110 in fig. 1. Referring to fig. 2, the rendering method specifically includes the following steps:

s202, a front-end node tree is obtained.

The front end may be a foreground portion of a website, and may be a webpage provided to a user for browsing by a browser or an application having a webpage browsing function on a PC or a mobile terminal. The application having the web browsing function may be: and the non-browser application program can call a browser kernel, display the file content provided by the webpage server and enable a user to interact with the file. The application program can be at least one of a voice chat program, an instant chat program, a shopping program, a microblog program and a company management program. Optionally, the user interface in the application is generated by the application, the web browsing function in the application is implemented by calling a browser kernel, and the browser kernel does not generally belong to the application. The front-end node tree may refer to a node tree of the front-end data, which may be used to reflect the internal relationship between the inside of the front-end data, and to reflect the arrangement position of the front-end data such as each image, text, and video on the web page. The front-end node tree may include, but is not limited to, the following elements: a hierarchy of nodes, parent-child relationships, and a node tree. The nodes are data elements in the front-end node tree, each node has corresponding attribute and data, and the attribute of the node can comprise a container attribute and a control attribute. The data that the node has can be front end data, including data content corresponding to the control attributes, such as images, text, and video. The parent-child relationship is the dependency relationship between each upper-layer node and each lower-layer node in the front-end node tree. The hierarchy of the node tree refers to the hierarchy that each node is located in the front-end node tree, such that a root node is located at the first level of the front-end node tree, a child node of the root node is located at the second level of the front-end node tree, and so on.

In one embodiment, the terminal synchronizes the front-end node tree from the web front end to the terminal through jsbridge (javascript bridge), and caches the transmitted front-end node tree to the terminal memory. The JSB bridge can be a bridge built by JavaScript, one end of the JSB bridge is a web front end, and the other end of the JSB bridge is a local terminal. Through JSbridge, the JavaScript code of the web front end can be called by the terminal, and the code which is native to the system can be called by the web front end.

In one embodiment, after the terminal obtains the front-end node tree, each node in the memory of the terminal stores the front-end data, color, action tag, composition information, and the like corresponding to its own node. The action tag refers to that when a user clicks or touches a text, an image or a corresponding button of a corresponding node, a corresponding event is generated, such as entering an original webpage address of a picture, or switching from one picture to another picture.

In one embodiment, the terminal establishes a mapping relationship between the node tree identification and the front-end node tree. And when the front-end node tree is optimized and rendered, the terminal acquires the front-end node tree corresponding to the node tree identifier from the local memory.

S204, determining the first container node only including the typesetting information in the front-end node tree.

For the web page, the typesetting may be a layout of the display position and the display size of the front-end data to be displayed in the web page. Corresponding to the node tree, the typesetting may be to arrange each child node included in the container node in the node tree. Therefore, the layout information may refer to information for arranging the positions, sizes, and the like of the child nodes included in the container node. A container node may refer to a node that holds nodes, and may be, for example, a View node. For example, in the container node View, an Image node and a Text node may be stored.

As an example, as shown in FIG. 3, FIG. 3 illustrates a schematic diagram of data display according to a node tree in one embodiment. As shown in fig. 3(a), three container nodes View1, View2, and View3, the child nodes contained in the container node View1 are Image2, View2, and View3, the child nodes contained in the View2 are Text1 and Image1, and the child nodes contained in the View3 are Text2, so the layout information is information for performing position layout and size layout on each node of the container node. Correspondingly, when there is a container node only including the composition information in the front-end node tree, the container node may be optimized, and the optimized on-screen node tree is rendered, so that the terminal may display the corresponding data content as shown in fig. 3 (b). Note that View1 is the root View, i.e., the View displayed on the entire display screen of the terminal in FIG. 3 (b).

In one embodiment, the terminal traverses the front-end node tree, obtains each node in the front-end node tree, and determines a first container node which only comprises the typesetting information in the front-end node tree from the traversed nodes.

In another embodiment, the terminal traverses the front-end node tree, obtains nodes in the front-end node tree, and determines container nodes in the front-end node tree from the traversed nodes. The terminal filters the first container node including only the composition information from the extracted container nodes.

S206, generating a typesetting result; the typesetting result represents the node tree structure after the container nodes are deleted from the front-end node tree.

When the front-end data volume is large and the inherent relation of the front-end data is complex, the number of nodes of the corresponding front-end node tree is large, when the front-end node tree is rendered, the terminal generates corresponding controls for each node, so that the number of the generated controls is large, the rendering speed is influenced, and the problem that the display interface is blocked is caused. In order to avoid the problem of pause, the container nodes only used for typesetting can be optimized, so that the corresponding controls are prevented from being generated for the container nodes only used for typesetting, and the rendering speed is increased. It should be noted that if the root node is a container node that only includes the composition information, the root node cannot be optimized, and only the container node that is not the root node can be optimized.

For the container node, when the container node is only used for typesetting the child nodes, the container node can be optimized, and the dimension of the front-end node tree is reduced. The typesetting result can be a typesetting node tree for typesetting the front-end data according to the front-end node tree; or may be a node tree structure optimized for container nodes in the front-end node tree.

For example, as shown in FIG. 3(a), since the View2 includes only layout information, it is shown that the View2 may be optimized. For the child nodes Text1 and Image1 of the View2, because the View2 can be optimized, when the View2 is optimized to generate the top-screen node tree, the mounting positions of the child nodes Text1 and Image1 will change, for example, the original mounting position on the View2 is changed to the mounting position on the View 1.

In one embodiment, when the first container node includes only the composition information, the terminal marks the first container node with the optimization tag. Wherein the optimization label is used to indicate that the first container node can be optimized to reduce the dimension of the front-end node tree.

In one embodiment, when the first container node only includes the composition information, the terminal acquires a child node corresponding to the first container node. Since the first container node including only the composition information can be optimized, the terminal determines a position where the child node is mounted when the first container node is optimized. The mounted positions comprise the container node View mounted by the child nodes and the positions on the container node View. It should be noted that the container node View mounted by the child node refers to a second container node including non-composition information, and the second container node is a node that cannot be optimized.

In one embodiment, the terminal generates the typesetting result according to the mounted positions of the child nodes of the first container node and each node. Or the terminal generates the typesetting result according to the mounted positions of the child nodes of the first container node and the nodes except the first container node.

In one embodiment, when there is no first container node including only the composition information in the front-end node tree, a composition result representing a node tree structure of the front-end node tree is generated.

Specifically, when the first container node only including the composition information does not exist in the front-end node tree, it indicates that all the container nodes in the front-end node tree include the composition information and also include the non-composition information, such as the color and the action label in addition to the composition information in the container node. And adding colors in the container to the View nodes when the terminal renders the node tree so as to add background colors to corresponding views of the webpage when the terminal is on the screen. The action tag in the container is used for responding to a corresponding trigger event, such as when a user clicks or touches the text, the image or the corresponding button of the corresponding node, a corresponding event is generated, such as entering the original webpage address of the picture, or switching from one picture to another picture.

And S208, generating an upper screen node tree according with the node tree structure according to the typesetting result.

The screen node tree is obtained by optimizing the front node tree, and in terms of the number of nodes, the number of the nodes of the screen node tree is smaller than that of the nodes of the front node tree before optimization.

In one embodiment, the terminal generates the upper screen node tree according to nodes except the first container node in the typesetting result. And the terminal mounts the child node to the corresponding position of the upper screen node tree according to the mounted position of the child node of the first container node in the typesetting result, so as to obtain the upper screen node tree conforming to the node tree structure.

As an example, as shown in FIG. 4, a schematic diagram of an on-screen node tree is obtained for optimizing a front-end node tree in one embodiment. As shown in FIG. 4(a), since View2 includes only layout information, it is shown that View2 may be optimized. For the child nodes Text1 and Image1 of the View2, because the View2 can be optimized, when the View2 is optimized to generate an upper screen node tree, the mounting positions of the child nodes Text1 and Image1 will change, and the positions of the child nodes Text1 and Image1 mounted when the View2 is optimized are determined. As shown in fig. 4(b), an on-screen node tree conforming to the node tree structure is generated from View1, View3, Text1, Text2, Image1, and Image2, and the mount position of Text1 and the mount position of Image 1. In summary, Text1 and Image1 are mounted on View2 in the front-end node tree, as shown in FIG. 4 (a). In the top-screen node tree, the View2 is optimized, and the corresponding Text1 and Image1 are mounted on the View1, as shown in fig. 4 (b).

And S210, rendering according to the screen node tree.

In one embodiment, the terminal renders the nodes in the upper screen node tree according to the upper screen node tree. Specifically, the terminal renders the nodes in the upper screen node tree through OpenGL or Direct 3D. It should be noted that the nodes in the upper screen node tree have corresponding front-end data, and rendering the nodes in the upper screen node tree is performed, that is, rendering the corresponding front-end data according to the layout of the web page.

For example, as shown in fig. 3, for a node Image1 in the top-screen node tree, rendering the node Image1 by the terminal may refer to: the Image data included in the node is rendered according to the layout of Image 1. And obtaining the corresponding image for displaying on the terminal screen after rendering.

In one embodiment, controls corresponding to nodes in the upper screen node tree are generated according to the upper screen node tree, and each node of the upper screen node tree is rendered according to the generated controls. The number of the generated controls can be the same as the number of the nodes of the node tree on the screen. The number of the container nodes in the screen node tree is smaller than that of the container nodes in the front node tree, the number of the correspondingly generated controls is reduced, and the rendering speed is improved.

In the above embodiment, the front-end node tree is obtained, and the first container node in the front-end node tree that only includes the composition information is determined, so that the node that can be optimized is found. And generating a typesetting result which represents that the first container node is deleted from the front-end node tree, and generating a screen node tree according to the typesetting result, so that the screen node tree optimized for the front-end node tree can be obtained, and the structure of the front-end node tree is simplified. And generating a screen node tree according to the typesetting result, wherein the screen node tree is the node tree after the front node tree is optimized, so that the rendering time can be effectively shortened and the rendering speed can be improved when the rendering is carried out according to the screen node tree.

In one embodiment, the typesetting result is generated through a first thread, and the upper screen node tree is generated through a second thread and rendered; the first thread and the second thread are different.

Wherein the first thread may be a background thread, such as a non-UI thread. The second thread may be a foreground thread, such as a UI thread of the foreground.

In one embodiment, the terminal determines, through the first thread, the first container node only including the composition information in the front-end node tree, and generates a composition result, where the composition result represents the node tree structure after the first container node is deleted from the front-end node tree. And the terminal generates an upper screen node tree which accords with the node tree structure according to the typesetting result through the second thread, and renders according to the upper screen node tree.

Specifically, the terminal determines, through a background non-UI thread, that only the first container node of the composition information is included in the front-end node tree, and generates a composition result. And the terminal generates an upper screen node tree which accords with the node tree structure according to the typesetting result through the UI thread of the foreground, and renders according to the upper screen node tree.

In the embodiment, the time-consuming typesetting operation is delivered to the first thread for processing, so that the influence on the rendering speed due to the complex structure of the front-end node tree and the large corresponding data amount of the front end is avoided. The second thread is specially used for processing the rendering operation, and the typesetting operation is not processed, so that the influence of the typesetting operation on the second thread is avoided, the calculated amount of the second thread is reduced, and the rendering speed is improved.

In an embodiment, as shown in fig. 5, S204 may specifically include:

s502, searching a first container node only comprising the typesetting information along a path between a root node and a leaf node in the front-end node tree.

Where the root node may also be referred to as the tree root of the front-end node tree, the root node has no parent node. In the front-end node tree, there is one and only one root node. A leaf node refers to the endmost node of the front-end node tree, with the leaf node having no children.

In one embodiment, when determining the root node of the front-end node tree, the terminal sequentially traverses from the root node along the direction of the child nodes, and searches for the first container node only including the typesetting information in the traversing process.

In one embodiment, when the root node of the front-end node tree is determined, the terminal traverses from high to low according to the levels of the front-end node tree from the root node, and searches for the first container node only including the typesetting information in the traversing process. Specifically, the step of traversing, by the terminal, from high to low according to the hierarchy of the node tree may specifically include: and the terminal traverses from the first level to the (N + 1) th level in sequence according to the level of the front-end node tree. Wherein N is a positive integer greater than or equal to 1.

S206 may specifically include the following two steps:

s504, determining the positions of the nodes left after the first container node is deleted from the path.

In one embodiment, when the first container node including only the composition information is found, it indicates that the found first container node may be optimized, and at this time, the terminal determines the positions of the nodes remaining when the first container node is optimized.

As an example, as shown in FIG. 6, FIG. 6 illustrates a schematic diagram of optimizing a front-end node tree resulting in an on-screen node tree in one embodiment. As shown in fig. 6(a), the terminal traverses from the root node View1 in the direction of the arrow in the figure, and obtains the container node including only the layout information according to the result of the traversal. The two nodes of View2 and View4 only include layout information, which means that the two nodes of View2 and View4 can be optimized, and when the two nodes of View2 and View4 are optimized, the position of Image1 changes. Therefore, the terminal determines the mounted position of the Image1 when the views 2 and 4 are optimized, namely the mounted positions of the views 2 and 4 are the child node positions of the View1 node. While the positions of the other nodes do not change. As shown in FIG. 6(b), the terminal generates an on-screen node tree that optimizes the front-end node tree based on nodes other than View2 and View4 and the positions of the nodes. It can be seen that View2 and View4 in fig. 6(a) are optimized in fig. 6(b) such that the number of nodes in the front-end node tree is reduced, i.e., the dimension of the front-end node tree is reduced.

In one embodiment, when searching for the first container node including only the composition information, it indicates that the first container node may be optimized, and at this time, the terminal determines a position where the child node of the first container node is mounted after being optimized. The positions of other nodes are not changed, and the terminal does not need to determine the positions of the nodes except the first container node and the child nodes of the first container node, so that the calculation amount is reduced.

S506, generating a typesetting result according to the positions of the nodes in each path.

In one embodiment, the terminal generates the typesetting result according to the nodes of the paths except the first container and the positions of the nodes. And the typesetting result can be used for guiding the information of the typesetting of each node of the upper screen node tree.

As an example, as shown in fig. 7, for a schematic diagram of determining a location mounted by a child node of a first container node in an embodiment, when images 1 and Text1 are optimized in View2 and View4, the mounted locations will change, and at this time, the locations mounted by images 1 and Text1 after View2 and View4 are optimized need to be re-determined, so as to generate a layout result according to the locations mounted by the re-determined images 1 and Text1, and the locations and nodes of other nodes except View2, View4, Image1, and Text1, where the layout result is used for guiding the locations mounted by the nodes when an upper screen node tree is generated.

In the above embodiment, along the path between the root node and the leaf node in the front-end node tree, the first container node only including the composition information can be quickly found. And determining the positions of the nodes left after the first container node is deleted from the paths, and generating a typesetting result according to the positions of the nodes in each path, wherein the typesetting result is a typesetting result for optimizing the front-end node tree, so that the terminal generates the front-end node tree according to the typesetting result to optimize the front-end node tree to obtain the upper screen node tree, and further, the structure of the front-end node tree is simplified.

In an embodiment, as shown in fig. 8, S502 may specifically include:

s802, traversing the front-end node tree with depth first.

In one embodiment, the terminal traverses the front-end node tree according to a depth-first traversal mode to traverse to leaf nodes of subtrees in the front-end node tree. It should be noted that, when traversing to the leaf node in the subtree, step S804 is executed.

As an example, as shown in fig. 9, it is a schematic diagram of determining the mounted position of the child node when the container node only includes the composition information in one embodiment. Fig. 9(a) is a diagram illustrating depth-first traversal of a front-end node tree and finding of parent nodes at upper levels of leaf nodes in one embodiment. As shown by the solid arrow in fig. 9(a), the traversal is performed from the parent node View1 to the child node according to the depth-first traversal path, and S804 is performed when the traversal reaches the leaf node Image 1. Fig. 9(b) is a schematic diagram of determining a position where the traversed leaf node will be mounted when performing optimized typesetting in one embodiment, and fig. 9(b) is further described in the subsequent embodiments.

In one embodiment, the terminal may further traverse the front-end node tree in a breadth-first traversal manner, and when traversing to a leaf node of a sub-tree in the front-end node tree, perform step S804.

S804, when traversing to the leaf node in the front-end node tree, searching the first container node only including the typesetting information along the traversal path where the leaf node is located.

Wherein, the traversal path may traverse the subtree in the front-end node tree according to the depth-first traversal mode. During traversal of a subtree, the following two scenarios may occur:

in the scenario 1, container nodes in each non-root node in the subtree are all first container nodes only including the layout information.

In one embodiment, when traversing to a leaf node in the front-end node tree, the terminal searches for a first container node including only the composition information from the leaf node to each parent node along the traversal path.

For example, as shown in fig. 9(a), when traversing to Image1, the following steps are performed: s1, finding the parent node View4 of the Image 1. When the View4 is the first container node only including the composition information, the process proceeds to S2, i.e., the parent node View2 of the View4 is searched. When the View2 is the first container node only including the composition information, the process proceeds to S3, and the parent node View1 of the View2 is searched. Since View1 is a root node that cannot be optimized, the first container nodes View2 and View4, which include only layout information, are obtained. Further, as shown in FIG. 9(b), when the terminal determines that View2 and View4 may be optimized, the terminal may determine from View2 or View1 the location where Image1 will be mounted when optimizing the front-end node tree. If the position to be mounted when the Image1 optimizes the front-end node tree is determined according to the View2, the mounted position is the position of the View 2. If the position to be mounted of the Image1 when the front-end node tree is optimized is determined according to the View2, the mounted position is the child node of the View1 which is mounted on the View 1. Note that, the node Image1 traversed first is preferentially mounted on the left side of View 1; and for the next traversal Text1, mount at the right position of Image1, as shown by the Image1 and Text1 nodes of the dashed circle in fig. 9 (b). Wherein, for nodes of the same hierarchy, the leftmost indicates the position is forward.

In addition, it should be noted that, in fig. 9(b), views 2 and View4 of dotted circles indicate that they can be optimized.

In the above embodiment, the depth-first traversal is performed on the front-end node tree, and the leaf nodes of the sub-trees can be quickly traversed. When traversing to the leaf node in the front-end node tree, the first container node only including the typesetting information is searched along the traversal path where the leaf node is located, so that the container node which can be optimized can be quickly searched, the time for optimizing and typesetting the front-end node tree is favorably shortened, and the rendering speed is accelerated. In addition, because the depth-first search method does not fully reserve nodes, and the expanded nodes are popped out and deleted from the database, the occupied controls are fewer, and when the number of nodes in the current end node tree is more, the problem of memory overflow can be effectively avoided.

In an embodiment, as shown in fig. 10, S502 may specifically include:

in scenario 2, the container node in each non-root node in the subtree has a first container node that only includes layout information and a second container node that includes non-layout information.

S1002, determining leaf nodes in the front-end node tree.

In one embodiment, the terminal traverses the front-end node tree and determines leaf nodes in the front-end node tree based on the results of the traversal. The step of traversing the front-end node tree by the terminal may specifically include: and the terminal traverses the front-end node tree from the root node according to the depth-first traversal mode or the breadth-first traversal mode.

As an example, as shown in fig. 11, a schematic diagram of determining a location where a child node is mounted when a container node only includes composition information in one embodiment is shown. Referring to fig. 11(a), which is a schematic diagram of performing depth-first traversal on the front-end node tree and finding each upper parent node of the leaf nodes in one embodiment, the solid arrows are paths of depth-first traversal, starting from the parent node View1 to the child nodes, and when the path is traversed to the Image1, S1004 is executed. Fig. 11(b) is a schematic diagram illustrating an embodiment of determining a position where a traversed leaf node will be mounted when performing optimized typesetting, and fig. 11(b) is further described in the following embodiments.

S1004, finding a first container node including only the layout information and a second container node including non-layout information along a path from the root node to the leaf node.

Wherein, the path from the root node to the leaf node refers to: and traversing the path from the root node to the leaf node according to a depth-first traversal mode.

In one embodiment, the terminal searches from the leaf node to the root node along the traversed path, and finds the container node between the leaf node and the root node. Wherein the container nodes between the leaf nodes and the root node include a first container node of the composition information and a second container node of the non-composition information.

For example, as shown in fig. 11(a), when traversing to Image1, the following steps are performed: s1, finding the parent node View4 of the Image 1. When the View4 is the first container node only including the composition information, the process proceeds to S2, i.e., the parent node View2 of the View4 is searched. When the View2 is the second container node including the non-layout information, since the second container node View2 of the non-layout information is a node that cannot be optimized, the first container node View2 including only the layout information and the second container node View4 including the non-layout information are obtained. Further, as shown in fig. 11(b), when the terminal determines that View4 can be optimized and View2 cannot be optimized, the terminal may determine, according to View4, a location where Image1 is to be mounted when optimizing the front-end node tree, that is, a mounted location is a child node of View2 that is mounted on View 2. Note that, the node Image1 traversed first is preferentially mounted on the left side of View 2; and for the next traversal Text1, at a position to the right of Image1, as shown by the dashed circle Image1 and solid circle Text1 nodes in fig. 9 (b). Wherein, for nodes of the same hierarchy, the leftmost indicates the position is forward.

Note that in FIG. 9(b), the View4 of the dashed circle can be optimized.

S504 may specifically include:

s1006, when the second container node is the parent node of the first container node, determining a subtree of the first container node including only the composition information.

Wherein the subtree of the first container node refers to: and taking the child nodes of the first container node as the root nodes to form the subtree.

Specifically, when the second container node is a parent node of the first container node, and the first container node has child nodes and grandchild nodes, a subtree of the first container node including only the layout information is determined.

In one embodiment, when the second container node is a parent node of the first container node, the terminal acquires a child node of the first container node, and establishes a subtree by using the acquired child node as a root node.

As an example, as shown in FIG. 12, a diagram of determining a location at which a subtree of a first container node is mounted in one embodiment is shown. The subtree of the first container node View4 is a node tree of a dotted line portion, and comprises two nodes, View5 and Image 1.

And S1008, taking the second container node as a node for mounting the subtree.

In one embodiment, the terminal determines the location of the subtree when the first container node is optimized, based on the second container node, which is not optimized. The position where the first container node is mounted when being optimized is a child node position of the second container node, that is, a subtree is mounted on the second container node.

In the above embodiment, when traversing to the leaf node in the front-end node tree, the first container node only containing the typesetting information and the second container node containing the non-typesetting information are searched along the traversal path where the leaf node is located, so that the container node which can be optimized and the container node which cannot be optimized can be quickly searched, the time for optimizing and typesetting the front-end node tree can be shortened, and the rendering speed is increased.

In one embodiment, S504 may specifically include: performing depth-first traversal from the first container node; determining the times of traversing to the leaf node and passing through the first container node; and determining the mounting positions of the leaf nodes according to the number of times.

According to the depth-first traversal mode, when a leaf node is traversed, the parent node is returned, and other leaf nodes of the parent node are continuously traversed. Thus, the number of times the first container node is traversed to the leaf node refers to: the number of times the first container node is traversed while traversing each leaf node. It should be noted that, for a certain first container node, there are N child nodes, and then, the first container node is traversed N times to complete the traversal of the N child nodes. For example, assuming that a root node of a sub-tree is View, and three child nodes of the root node View are Image, Text and Video, respectively, the terminal traverses the Image, the Text for the first time and the Video for the third time according to a depth-first traversal mode, and traverses the child nodes in the sub-tree for the third time.

In one embodiment, when the first container node has child nodes and does not have grandchild nodes, the terminal performs depth-first traversal on the child nodes of the first container node with the first container node as a starting point. And the terminal calculates the times of traversing the first container node when traversing each leaf node, and determines each leaf node according to the times of traversing each leaf node in the subtree.

In the above embodiment, when the first container node has a plurality of child nodes, the depth-first traversal may be performed by using the first container node as a starting point, so as to determine the number of times that each leaf node traverses to the first container node, and determine the mounting positions of the leaf nodes according to the number of times, thereby avoiding the re-traversal performed from the root node of the front-end node tree when the first container node has a plurality of child nodes, shortening the traversal time, and further accelerating the rendering speed.

In one embodiment, as shown in fig. 13, the method may further include the steps of:

s1302, when the first container node in the front-end node tree is changed into a container node containing non-typesetting information, determining the recovery position of the changed container node in the on-screen node tree according to the position of the changed container node in the front-end node tree.

In one embodiment, after rendering the upper screen node tree, the terminal displays front-end data corresponding to each section in the upper screen node tree. Because the attributes of the container nodes in the front-end node tree may change during the presentation process, that is, the container nodes are changed from originally only including the composition information to include the non-composition information.

As an example, as shown in fig. 14, a schematic diagram of a container node being changed in one embodiment is shown. FIG. 14(a) is a front-end node tree before a change occurs to a container node, in which the container node View4 originally includes only composition information. FIG. 14(b) is a front-end node tree after the change of the container node, in which the container node View4 includes not only composition information but also non-composition information. That is, the container node View4 changes from originally including only the layout information to including the layout information and the non-layout information.

In one embodiment, the terminal detects a container node change in the front-end node tree during presentation of the front-end data. When the container node in the front-end node tree is changed, namely the container node is changed from originally only including the typesetting information to including the typesetting information and the non-typesetting information, the terminal determines the changed container node and determines the position of the changed container node in the front-end node tree. And the terminal determines the recovery position of the changed container node in the on-screen tree according to the position of the changed container node in the front-end node tree. The method for determining the recovery position can be applied to a scene of directly mounting the changed container nodes to the upper screen node tree.

In one embodiment, the terminal creates a container node corresponding to the changed first container node through the second thread, and determines the recovery position of the created container node in the on-screen node tree according to the position of the changed container node in the front-end node tree. The method for determining the recovery position can be suitable for recreating the container node and mounting the created container node to the scene of the upper screen node tree.

And S1304, restoring the changed container nodes to the upper screen node tree according to the restoration positions.

In one embodiment, when the terminal creates a container node corresponding to the changed container node and determines the recovery position, the terminal recovers the created container node to the on-screen node tree according to the recovery position.

As an example, as shown in fig. 15, a schematic diagram of restoring an on-screen tree with changed container nodes in one embodiment is shown. Referring to fig. 14, the front-end node tree of fig. 14(a) results in the top-screen node tree shown in fig. 15(a) after optimized typesetting. When the front-end node tree of fig. 14(a) is changed to the front-end node tree shown in fig. 14(b), correspondingly, the on-screen node tree in fig. 15(a) is also changed to the on-screen node tree of fig. 15 (b).

In the above embodiment, when the container node in the front-end node tree is changed, the position of the changed container node in the on-screen node tree may be determined according to the position of the changed container node in the front-end node tree, so as to mount the changed container node to the corresponding position in the on-screen node tree.

In an embodiment, S1302 may specifically include: traversing the front-end node tree with depth first; when traversing to the traversal path where the changed container node is located and the father node of the changed container node is the third container node only comprising the typesetting information, determining the node mounted by the changed container node after deleting the third container node from the traversal path; and determining the position of the changed container node on the mounted node to obtain a recovery position.

After the third container node is deleted, the node mounted by the changed container node may also be referred to as an optimized position of the changed container node in the front-end node tree. And determining the position of the changed container node on the mounted node according to the optimized position, thereby obtaining a recovery position.

For example, as shown in fig. 14(b), the terminal performs a depth-first traversal on the front-end node tree, and when traversing to the subtree of View1-View2-View4-Image1, the parent node View2 of the container node View4 is obtained, and View2 is the third container node only including the layout information. The terminal determines the nodes of the View4 after deleting the View2 from the traversal path View1-View2-View4-Image 1. The View2 can be optimized during the optimization process, and the View4 is mounted on the View1 when the View2 is optimized, so that the node mounted by the View4 is the View 1. The terminal determines the recovery position of the View4 in the top-screen node tree according to the position of the View4 on the mounted node, so as to mount the View4 on the View1 of the top-screen node tree, as shown in FIG. 15 (b).

In one embodiment, the terminal detects attribute values of container nodes in the front-end node tree. Wherein the attribute values include layout information and non-layout information. And when the attribute value of the container node in the front-end node tree is changed, performing depth-first traversal on the front-end node tree.

In the above embodiment, the depth-first traversal is performed on the front-end node tree, so that the container node with the change can be quickly traversed. When traversing to the changed container node in the front-end node tree, determining the position of the changed container node on the mounted node by determining the optimized position of the changed container node in the front-end node tree, obtaining the recovery position, and providing position guidance for recovering the on-screen node tree. In addition, because the depth-first search method does not fully reserve nodes, and the expanded nodes are popped out and deleted from the database, the occupied controls are fewer, and when the number of nodes in the current end node tree is more, the problem of memory overflow can be effectively avoided.

In one embodiment, S1304 may specifically include: according to the recovery position, mounting the changed container node to a corresponding node in the upper screen node tree; determining a corresponding child node of the changed container node in the on-screen node tree based on the changed front-end node tree; and mounting the child nodes to the changed container nodes mounted in the upper screen node tree.

For example, as shown in fig. 15, the terminal mounts the changed container node View4 to the View1 node in the top-screen node tree according to the resume position. The terminal determines a corresponding child node Image1 of the changed container node View4 in the node tree on the upper screen based on the changed front-end node tree; and mounting the child node Image1 to a container node View4 in the upper screen node tree.

In one embodiment, the terminal obtains the restored on-screen node tree after mounting the child node to the changed container node mounted in the on-screen node tree. And rendering the recovered upper screen node tree by the terminal, and displaying a rendered result. Therefore, when the container node changes, the rendered result is displayed and changed accordingly.

For example, as shown in fig. 14, in the process of running the program, when the background color of the View node View4 changes from colorless in fig. 14(a) to background color in fig. 14(b), the corresponding top screen node tree needs to be restored, that is, the top screen node tree in fig. 15(a) needs to be restored to the top screen node tree in fig. 15(b), so as to render according to the restored top screen node tree.

In the above embodiment, the changed container node is mounted to the corresponding node in the node tree on the screen according to the recovery position, and the recovery of the changed container node is completed. And determining a child node corresponding to the changed container node in the screen node tree according to the changed front-end node tree, and mounting the child node to the changed container node mounted in the screen node tree, so that the child node belonging to the changed container node is mounted to the node per se, and the recovery of the screen node tree is realized.

In the traditional scheme, the nodes of the whole front-end node tree are reflected on the UI thread, so that the typesetting and method calling of the whole interface can be blocked on the UI thread. All operations and typesetting at the front end directly correspond to the upper part of the tree on the screen. Because the drawing of the terminal is 16ms one frame, if the amount of front-end messages is large or the interface is too complex, all typesetting and rendering operations cannot be completed within 16ms, the whole interface is stuck, and the whole interface has no response. According to the technical scheme, front-end messages are divided into two threads, a background thread is responsible for calculating complex typesetting, a UI (user interface) thread of a foreground receives typesetting results to create a screen-up node tree, and rendering and screen-up operations are performed according to the screen-up node tree.

The front-end node tree is synchronously copied to a terminal through JsBridge, then the terminal performs typesetting and hierarchical optimization on the front-end node tree in a background thread, then the typesetting and hierarchical optimization results are sent to a background UI thread, a screen-up node tree corresponding to a UI is established, and finally rendering and screen-up display operations are performed according to the screen-up node tree, so that the problems of blockage and hierarchical optimization are solved.

Specifically, before the terminal exposes the front-end data, the front-end constructs a simple interface in which various front-end data, such as pictures, texts, videos, and the like, can be exposed, and a front-end node tree corresponding to the interface is shown in fig. 3 (a). Various information of the nodes, such as typesetting information, non-typesetting information and the like, is stored in the front-end node tree, wherein the non-typesetting information comprises colors, action labels and the like. The front-end and the terminal then synchronize the tree of front-end nodes to the terminal in a jsBridge manner.

After the terminal obtains the front-end node tree, the operation corresponding to the front-end node tree can be reflected to the terminal, that is, the terminal obtains the attribute of the front-end node tree, where the front-end node tree is shown in fig. 4 (a). And the terminal typesets according to the obtained front-end node tree to obtain a typesetting result, generates a screen-up node tree for screen-up according to the typesetting result, and completes the construction of the screen-up node tree at this moment. The typesetting is time-consuming operation, and the terminal performs typesetting operation on the obtained front-end node tree through the background thread so as to avoid the influence of the typesetting operation on the UI thread. After the front-end node tree is typeset in the background thread, the background thread of the terminal sends the typesetting result to the UI thread, and when the UI thread of the foreground receives the typesetting result, the upper screen node tree for the upper screen display is created according to the typesetting result, as shown in fig. 4 (b).

As shown in fig. 4(a) and 4(b), there are some differences between the front-end node tree and the top-screen node tree in fig. 4 (a). Since the container node View4 in fig. 4(a) is a node only participating in composition, the terminal does not need to generate a control for the node only participating in composition, so that the hierarchical nesting of the front-end node tree can be reduced, and the rendering speed is increased.

Specifically, View2 to the left of the second row of the front-end node tree in FIG. 4(a), View2 was optimized prior to the screen-up, since it has no other information, and is used for typesetting only. In addition, after the View2 is optimized, the child nodes of the View2 are lifted one level up and hung directly on the parent node of the View 2. Because of the View3 to the right of the second row of the front-end node tree in FIG. 4(a), since View3 has non-layout information other than layout information, such as background color, the View3 is not only used for layout, but also for non-layout, such as adding background color to the View, the View3 will not be optimized.

Optimizing the front-end node tree, wherein the optimization algorithm is as follows:

(1) and traversing the front-end node tree in a depth-first traversal mode.

(2) And determining the position where the traversed node is mounted, namely on which container node View.

(3) And determining the position of the traversed node mounted in the container node View.

For example, as shown in fig. 6(a), the front-end node tree in the graph is the node tree used by the terminal for typesetting, and this node tree is now optimized for screen-up.

For example, two views, View2 and View4, on the left side of FIG. 6(a) need to be optimized, then the child nodes of both views 2 and View4 need to be lifted up. For Image1, the terminal performs depth-first traversal, traverses to Image1, and then searches to the upper layer, since the parent node View4 of Image1 is the node to be optimized. The terminal continues to search to the upper layer, and the parent node View2 of View4 is also the node needing optimization. Then go to the upper level lookup, since the parent node View1 of View2 is the root node, View1 cannot be optimized. Thus, Image1 was determined to be mounted on View 1.

For how to determine the location where the node is mounted, the corresponding algorithm is as follows:

firstly, the terminal finds a father node of a node, then performs depth-first traversal, and simultaneously records how many other nodes at the tail are traversed until the current node is traversed, and the number of the traversed nodes at this time is the position of the current node mounted in View.

For example, as shown in FIG. 7, Image1 determines which position Image1 is mounted on View1, and then determines which position Image1 is mounted on the View. Referring to FIG. 9, Image1 finds the parent View4 to the top level and then traverses depth first, traversing to Image1 itself for the first time, so that Image1 mounts a location on View of 0. Similarly, the optimization result of the Text1 in the middle of the third layer is mounted on the View1 and the position of the View is 1.

When the optimized View in the program running process is possibly added with color or some other non-typesetting, as shown in fig. 14, the View4 in fig. 14 is added with color, and the hierarchy needs to be restored, and the hierarchy restoration algorithm is as follows:

(1) and creating the View needing to be recovered.

(2) Finding container nodes and positions mounted by created View through hierarchical optimization algorithm

(3) And restoring the child nodes corresponding to the created View from the original mounted position of the upper screen node tree to the created View body, as shown in FIG. 15.

By adopting the scheme of the embodiment, the problem of interface blockage caused by frequent interaction between the front end and the terminal is solved, and the problem of low terminal drawing efficiency caused by too many levels of the front end node tree is solved.

FIG. 2 is a flow diagram of a rendering method in one embodiment. It should be understood that, although the steps in the flowchart of fig. 2 are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a portion of the steps in fig. 2 may include multiple sub-steps or multiple stages that are not necessarily performed at the same time, but may be performed at different times, and the order of performance of the sub-steps or stages is not necessarily sequential, but may be performed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

As shown in fig. 16, in one embodiment, there is provided a rendering apparatus, specifically including: a node tree obtaining module 1602, a container node determining module 1604, a typesetting result generating module 1606, a node tree generating module 1608 and a rendering module 1610; wherein:

a node tree obtaining module 1602, configured to obtain a front-end node tree;

a container node determining module 1604, configured to determine a first container node in the front-end node tree that only includes the composition information;

a typesetting result generation module 1606 used for generating a typesetting result; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree;

a node tree generating module 1608, configured to generate, according to the typesetting result, an upper screen node tree that conforms to the node tree structure;

a rendering module 1610 configured to perform rendering according to the on-screen node tree.

In one embodiment, the layout result generating module 1606 is further configured to generate a layout result representing a node tree structure of the front-end node tree when the first container node including only the layout information does not exist in the front-end node tree.

In one embodiment, the container node determining module 1604 is further configured to find a first container node that only includes the composition information along a path between a root node and a leaf node in the front-end node tree;

the typesetting result generation module 1606 is further configured to determine positions of nodes remaining after the first container node is deleted from the path; and generating a typesetting result according to the positions of the nodes in each path.

In one embodiment, the container node determination module 1604 is further configured to perform a depth-first traversal of the front-end node tree; when traversing to the leaf node in the front-end node tree, searching the first container node only including the typesetting information along the traversal path where the leaf node is located.

In one embodiment, the container node determination module 1604 is further for determining leaf nodes in the front-end node tree; searching a first container node only including the typesetting information and a second container node including the non-typesetting information along a path from the root node to the leaf node;

the layout result generating module 1606 is further configured to determine, when the second container node is a parent node of the first container node, a subtree of the first container node that only includes the layout information; and taking the second container node as a node for mounting the subtree.

In one embodiment, the typesetting result generation module 1606 is further configured to perform depth-first traversal from the first container node; determining the times of traversing to the leaf node and passing through the first container node; and determining the mounting positions of the leaf nodes according to the number of times.

In one embodiment, as shown in fig. 17, the apparatus further comprises: a recovery location determination module 1612 and a node recovery module 1614; wherein:

a recovery position determining module 1612, configured to determine a recovery position of the changed container node in the on-screen node tree according to a position of the changed container node in the front-end node tree when the first container node in the front-end node tree is changed to a container node including non-composition information;

and a node restoring module 1614, configured to restore the changed container nodes to the on-screen node tree according to the restoration position.

In one embodiment, the recovery location determination module 1612 is further configured to depth-first traverse the front-end node tree; when traversing to the traversal path where the changed container node is located and the father node of the changed container node is the third container node only comprising the typesetting information, determining the node mounted by the changed container node after deleting the third container node from the traversal path; and determining the position of the changed container node on the mounted node to obtain a recovery position.

In one embodiment, the node restore module 1614 is further configured to mount the changed container node to a corresponding node in the on-screen node tree according to the restore position; determining a corresponding child node of the changed container node in the on-screen node tree based on the changed front-end node tree; and mounting the child nodes to the changed container nodes mounted in the upper screen node tree.

FIG. 18 is a diagram illustrating an internal structure of a computer device in one embodiment. The computer device may specifically be the terminal 110 in fig. 1. As shown in fig. 18, the computer apparatus includes a processor, a memory, a network interface, an input device, and a display screen connected through a system bus. Wherein the memory includes a non-volatile storage medium and an internal memory. The non-volatile storage medium of the computer device stores an operating system and may also store a computer program that, when executed by the processor, causes the processor to implement the rendering method. The internal memory may also have stored therein a computer program that, when executed by the processor, causes the processor to perform the rendering method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.

Those skilled in the art will appreciate that the architecture shown in fig. 18 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.

In one embodiment, the rendering apparatus provided herein may be implemented in the form of a computer program that is executable on a computer device such as that shown in fig. 18. The memory of the computer device may store therein various program modules constituting the rendering apparatus, such as a node tree acquisition module 1602, a container node determination module 1604, a layout result generation module 1606, a node tree generation module 1608, and a rendering module 1610 shown in fig. 16. The program modules constitute computer programs that cause a processor to execute the steps in the rendering method according to the embodiments of the present application described in the present specification.

For example, the computer device shown in fig. 18 may perform S202 by the node tree acquisition module 1602 in the rendering apparatus shown in fig. 16. The computer device may perform S204 by the container node determination module 1604. The computer apparatus may perform S206 through the layout result generating module 1606. The computer device may perform S208 through the node tree generation module 1608. The computer device may perform S210 through the rendering module 1610.

In one embodiment, there is provided a computer device comprising a memory and a processor, the memory storing a computer program that, when executed by the processor, causes the processor to perform the steps of: acquiring a front-end node tree; determining a first container node only including the composition information in the front-end node tree; generating a typesetting result; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree; generating an upper screen node tree which accords with the node tree structure according to the typesetting result; and rendering according to the upper screen node tree.

In one embodiment, the computer program, when executed by the processor, causes the processor to further perform the steps of: and when the first container node only comprising the typesetting information does not exist in the front-end node tree, generating a typesetting result representing the node tree structure of the front-end node tree.

In one embodiment, the computer program, when executed by the processor, causes the processor to perform the steps of determining that only a first container node of the front-end node tree includes composition information: searching a first container node only comprising the typesetting information along a path between a root node and a leaf node in the front-end node tree;

when the computer program is executed by the processor to generate the typesetting result, the processor is enabled to specifically execute the following steps: determining the positions of nodes left after the first container node is deleted from the path; and generating a typesetting result according to the positions of the nodes in each path.

In one embodiment, the computer program, when being executed by the processor for the step of finding a first container node comprising only composition information along a path between a root node and a leaf node in the front-end node tree, causes the processor to specifically perform the steps of: traversing the front-end node tree with depth first; when traversing to the leaf node in the front-end node tree, searching the first container node only including the typesetting information along the traversal path where the leaf node is located.

In one embodiment, the computer program, when being executed by the processor for the step of finding a first container node comprising only composition information along a path between a root node and a leaf node in the front-end node tree, causes the processor to specifically perform the steps of: determining leaf nodes in a front-end node tree; searching a first container node only including the typesetting information and a second container node including the non-typesetting information along a path from the root node to the leaf node;

when the computer program is executed by the processor to determine the positions of nodes remaining after the first container node is deleted from the path, the processor is caused to specifically execute the steps of: when the second container node is a parent node of the first container node, determining a subtree of the first container node only including the layout information; and taking the second container node as a node for mounting the subtree.

In one embodiment, the computer program, when executed by the processor, causes the processor to perform the steps of determining the location of nodes remaining after deleting the first container node from the path, in particular: performing depth-first traversal from the first container node; determining the times of traversing to the leaf node and passing through the first container node; and determining the mounting positions of the leaf nodes according to the number of times.

In one embodiment, the computer program, when executed by the processor, causes the processor to further perform the steps of: when the first container node in the front-end node tree is changed into a container node containing non-typesetting information, determining the recovery position of the changed container node in the on-screen node tree according to the position of the changed container node in the front-end node tree; and restoring the changed container nodes to the upper screen node tree according to the restoration positions.

In one embodiment, the computer program, when executed by the processor, causes the processor to perform the steps of determining a recovery position of the modified container node in the on-screen node tree based on the position of the modified container node in the front-end node tree, in particular: traversing the front-end node tree with depth first; when traversing to the traversal path where the changed container node is located and the father node of the changed container node is the third container node only comprising the typesetting information, determining the node mounted by the changed container node after deleting the third container node from the traversal path; and determining the position of the changed container node on the mounted node to obtain a recovery position.

In one embodiment, when the computer program is executed by the processor to restore the changed container node to the on-screen node tree according to the restoration position, the processor is caused to specifically execute the following steps: according to the recovery position, mounting the changed container node to a corresponding node in the upper screen node tree; determining a corresponding child node of the changed container node in the on-screen node tree based on the changed front-end node tree; and mounting the child nodes to the changed container nodes mounted in the upper screen node tree.

In one embodiment, a computer readable storage medium is provided, storing a computer program that, when executed by a processor, causes the processor to perform the steps of: acquiring a front-end node tree; determining a first container node only including the composition information in the front-end node tree; generating a typesetting result; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree; generating an upper screen node tree which accords with the node tree structure according to the typesetting result; and rendering according to the upper screen node tree.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a non-volatile computer-readable storage medium, and can include the processes of the embodiments of the methods described above when the program is executed. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. Non-volatile memory can include read-only memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), Rambus Direct RAM (RDRAM), direct bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.

The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.

Claims

1. A rendering method, comprising:

acquiring a front-end node tree;

searching a first container node only comprising the typesetting information along a path between a root node and a leaf node in the front-end node tree;

determining positions of nodes remaining after the first container node is deleted from the path; generating a typesetting result according to the positions of the nodes in each path; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree;

and rendering according to the upper screen node tree.

2. The method according to claim 1, wherein the typesetting result is generated by a first thread, and the on-screen node tree is generated and rendered by a second thread; the first thread and the second thread are different.

3. The method of claim 1, further comprising:

and when the first container node only comprising the typesetting information does not exist in the front-end node tree, generating a typesetting result representing the node tree structure of the front-end node tree.

4. The method of claim 1, wherein the rendering according to the screen-up node tree comprises:

generating a control corresponding to a node in the screen node tree according to the screen node tree;

and rendering each node of the upper screen node tree according to the generated control.

5. The method of claim 1, wherein finding the first container node that includes only composition information along the path between the root node and the leaf node in the front-end node tree comprises:

performing depth-first traversal on the front-end node tree;

and when traversing to a leaf node in the front-end node tree, searching a first container node only comprising the typesetting information along a traversal path where the leaf node is located.

6. The method of claim 1, wherein finding the first container node that includes only composition information along the path between the root node and the leaf node in the front-end node tree comprises:

determining leaf nodes in the front-end node tree;

searching a first container node only comprising typesetting information and a second container node comprising non-typesetting information along a path from a root node to the leaf node;

the determining locations of nodes remaining after the first container node is deleted from the path comprises:

when the second container node is a parent node of the first container node, then

Determining a sub-tree of the first container node including only the layout information;

and taking the second container node as a node for mounting the subtree.

7. The method of claim 1, wherein determining the locations of nodes remaining after removing the first container node from the path further comprises:

performing a depth-first traversal from the first container node;

determining a number of times the first container node is traversed to the leaf node;

and determining the mounting position of the leaf node according to the number of times.

8. The method according to any one of claims 1 to 7, further comprising:

when the first container node in the front-end node tree is changed to a container node including non-composition information, then

Determining the recovery position of the changed container node in the screen node tree according to the position of the changed container node in the front-end node tree;

and restoring the changed container nodes to the upper screen node tree according to the restoration position.

9. The method of claim 8, wherein determining the recovery position of the changed container node in the on-screen node tree according to the position of the changed container node in the front-end node tree comprises:

performing depth-first traversal on the front-end node tree;

when the container node is traversed to the traversal path where the changed container node is located and the father node of the changed container node is the third container node only including the typesetting information, then

Determining nodes mounted by the changed container nodes after the third container nodes are deleted from the traversal path;

and determining the position of the changed container node on the mounted node to obtain a recovery position.

10. The method of claim 8, wherein restoring the changed container nodes to the on-screen node tree according to the restoration locations comprises:

according to the recovery position, mounting the changed container node to a corresponding node in the upper screen node tree;

determining a corresponding child node of the changed container node in the screen node tree based on the changed front-end node tree;

and mounting the child nodes to the changed container nodes mounted in the upper screen node tree.

11. A rendering apparatus, comprising:

the node tree acquisition module is used for acquiring a front-end node tree;

the container node determining module is used for searching a first container node only comprising the typesetting information along a path between a root node and a leaf node in the front-end node tree;

a typesetting result generation module for determining the positions of the nodes left after the first container node is deleted from the path; generating a typesetting result according to the positions of the nodes in each path; the typesetting result represents a node tree structure after the first container node is deleted from the front-end node tree;

12. The apparatus according to claim 11, wherein the layout result is generated by a first thread, and the on-screen node tree is generated and rendered by a second thread; the first thread and the second thread are different.

13. The apparatus according to claim 11, wherein the layout result generating module is further configured to generate the layout result representing the node tree structure of the front-end node tree when the first container node including only the layout information does not exist in the front-end node tree.

14. The apparatus of claim 11, wherein the rendering module is further configured to generate controls corresponding to nodes in the top screen node tree from the top screen node tree; and rendering each node of the upper screen node tree according to the generated control.

15. The apparatus of claim 11, wherein the container node determining module is further configured to perform a depth-first traversal of the front-end node tree;

16. The apparatus of claim 11, wherein the container node determining module is further configured to determine leaf nodes in the front-end node tree; searching a first container node only comprising typesetting information and a second container node comprising non-typesetting information along a path from a root node to the leaf node;

the layout result generating module is further configured to determine the subtree of the first container node that only includes the layout information when the second container node is the parent node of the first container node; and taking the second container node as a node for mounting the subtree.

17. The apparatus according to claim 11, wherein the typesetting result generating module is further configured to perform depth-first traversal from the first container node; determining a number of times the first container node is traversed to the leaf node; and determining the mounting position of the leaf node according to the number of times.

18. The apparatus of any one of claims 11 to 17, further comprising:

a recovery position determining module, configured to determine, when the first container node in the front-end node tree is changed to a container node including non-composition information, a recovery position of the changed container node in the screen-up node tree according to a position of the changed container node in the front-end node tree;

and the node recovery module is used for recovering the changed container nodes to the on-screen node tree according to the recovery position.

19. The apparatus of claim 18, wherein the recovery location determination module is further configured to perform a depth-first traversal of the front-end node tree; when traversing to a traversal path where the changed container node is located and the father node of the changed container node is a third container node only including typesetting information, determining a node mounted by the changed container node after deleting the third container node from the traversal path; and determining the position of the changed container node on the mounted node to obtain a recovery position.

20. The apparatus of claim 18, wherein the recovery location determining module is further configured to mount the changed container node to a corresponding node in the on-screen node tree according to the recovery location; determining a corresponding child node of the changed container node in the screen node tree based on the changed front-end node tree; and mounting the child nodes to the changed container nodes mounted in the upper screen node tree.

21. A storage medium storing a computer program which, when executed by a processor, causes the processor to carry out the steps of the method according to any one of claims 1 to 10.

22. A computer device comprising a memory and a processor, the memory storing a computer program that, when executed by the processor, causes the processor to perform the steps of the method according to any one of claims 1 to 10.