CN108874393A

CN108874393A - rendering method, device, storage medium and computer equipment

Info

Publication number: CN108874393A
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: 2018-11-23
Anticipated expiration: 2038-06-06
Also published as: CN108874393B

Abstract

This application involves a kind of rendering method, device, storage medium and computer equipment, the method includes：Obtain front end node tree；It determines in the front end node tree only including the first container node of composition information；Generate typesetting result；The typesetting result indicates the node tree structure by the first container node after deleting in the front end node tree；According to the typesetting as a result, generating the upper screen node tree for meeting the node tree structure；It is rendered according to the upper screen node tree.Scheme provided by the present application can solve the technical problem for causing rendering speed slow because generating a large amount of control in render process.

Description

Rendering method, device, storage medium and computer equipment

Technical field

This application involves Internet technical fields, more particularly to a kind of rendering method, device, storage medium and computer Equipment.

Background technique

With the continuous development of Internet technology, user can install at the terminal various browsers or it is other have webpage The application program of browsing function has text by what browser or other application programs with web page browsing function were shown Originally, front end datas, the user such as picture and video easily can browse and obtain interested content.

Before showing front end data, terminal renders front end data according to the internal relation of front end data, tradition Rendering scheme in, when receive server send front end data when, terminal utilize UI (User Interface, user interface) Thread, according to the internal relation of front end data to front end data according to terminal screen size carry out typesetting, and to typesetting after Front end data is rendered.However, will be generated in render process big when front end data amount is larger and internal relation is complicated The control of amount, thus the problem for causing rendering speed slow.

Summary of the invention

Based on this, it is necessary to be asked for the technology for causing rendering speed slow because generating a large amount of control in render process Topic provides a kind of method for exhibiting data, device, storage medium and computer equipment.

A kind of rendering method, including：

Obtain front end node tree；

It determines in the front end node tree only including the first container node of composition information；

Generate typesetting result；The typesetting result expression deletes the first container node from the front end node tree Node tree structure afterwards；

According to the typesetting as a result, generating the upper screen node tree for meeting the node tree structure；

It is rendered according to the upper screen node tree.

A kind of rendering device, including：

Node tree obtains module, for obtaining front end node tree；

Container node determining module, for determining in the front end node tree only including the first container section of composition information Point；

Typesetting result-generation module, for generating typesetting result；The typesetting result is indicated the first container node Node tree structure after being deleted in the front end node tree；

Node tree generation module, for meeting the upper screen node of the node tree structure as a result, generating according to the typesetting Tree；

Rendering module, for being rendered according to the upper screen node tree.

A kind of storage medium is stored with computer program, when the computer program is executed by processor, so that the place Manage the step of device executes above-mentioned rendering method

A kind of computer equipment, including memory and processor, the memory are stored with computer program, the calculating When machine program is executed by the processor, so that the step of processor executes above-mentioned rendering method.

Above-mentioned rendering method, device, storage medium and computer equipment obtain front end node tree, determine front end node tree In only include composition information the first container node, to find node that can be optimised.Generating indicates the first container Node shields node tree from the typesetting of front end node tree deletion as a result, generating according to typesetting result, can obtain to front end node The upper screen node tree of tree optimization, simplifies the structure of front end node tree.It is generated according to typesetting result and shields node tree, due to upper screen Node tree, when being rendered according to upper screen node tree, can be effectively shortened to the node tree after front end node tree optimization Render time improves the speed of rendering.

Detailed description of the invention

Fig. 1 is the applied environment figure of rendering method in one embodiment；

Fig. 2 is the flow diagram of rendering method in one embodiment；

Fig. 3 is the schematic diagram of relationship between front end node tree and interface in one embodiment；

Fig. 4 is the schematic diagram optimized in one embodiment to front end node tree；

Fig. 5 is and to generate according to determining position the step of typesetting result according to the position for determining node in one embodiment Rapid flow diagram；

Fig. 6 is to optimize to obtain the schematic diagram of upper screen node tree to front end node tree in one embodiment；

Fig. 7 in one embodiment determine the first container node child node institute carry position schematic diagram；

Fig. 8 is the schematic diagram that the step of only including the first container node of composition information is searched in one embodiment；

Fig. 9 is the position that its child node institute carry when container node is only includes composition information is determined in one embodiment Schematic diagram；

Figure 10 is that subtree is determined in one embodiment, and using second container node as the step of the node of carry subtree Schematic diagram；

Figure 11 is the position that its child node institute carry when container node is only includes composition information is determined in one embodiment The schematic diagram set；

Figure 12 in one embodiment determine the first container node subtree institute carry position schematic diagram；

Figure 13 is schematic diagram the step of shielding node tree on restoring in one embodiment；

Figure 14 is the schematic diagram that container node changes in one embodiment；

Figure 15 is the schematic diagram restored in one embodiment to the upper screen tree that container node changes；

Figure 16 is the structural block diagram of rendering device in one embodiment；

Figure 17 is the structural block diagram of rendering device in another embodiment；

Figure 18 is the structural block diagram of computer equipment in one embodiment.

Specific embodiment

It is with reference to the accompanying drawings and embodiments, right in order to which the objects, technical solutions and advantages of the application are more clearly understood The application is further elaborated.It should be appreciated that specific embodiment described herein is only used to explain the application, and It is not used in restriction the application.

Fig. 1 is the applied environment figure of rendering method in one embodiment.Referring to Fig.1, which is applied to rendering system System.The rendering system includes terminal 110 and server 120.Terminal 110 and server 120 pass through network connection.Terminal 110 has Body can be terminal console or mobile terminal, mobile terminal specifically can in mobile phone, tablet computer, laptop etc. at least It is a kind of.Server 120 can be realized with the server cluster of the either multiple server compositions of independent server.

As shown in Fig. 2, in one embodiment, providing a kind of rendering method.The present embodiment is mainly applied in this way Terminal 110 in above-mentioned Fig. 1 illustrates.Referring to Fig. 2, which specifically comprises the following steps：

S202 obtains front end node tree.

Wherein, front end can be website front end part, can be by the browser on the end PC or mobile terminal or has net The application program of page browsing function is supplied to the webpage of user's browsing.Application program with web page browsing function can be：Energy Browser kernel is enough called, and shows the file content that web page server provides, and user can be allowed to hand over above-mentioned file Mutual non-browser application program.The application program can be voice-enabled chat program, instant chat program, shopping program, microblogging At least one of program, company management's program.Optionally, the user interface in the application program is generated by application program , the web page browsing function in the application program is to call browser kernel to realize, and the browser kernel typically not belongs to The application program.Front end node tree can refer to the node tree of front end data, can be used for reflecting the inherence between front end data inside The arrangement position of the front end datas such as each image, text and video in relationship, and reflection webpage.Front end node tree may include but It is not limited to following element：The level of node, set membership and node tree.Node is the data element in front end node tree, each to save Point has corresponding attribute and data, and the attribute that node has may include container attribute and control property.The number that node has According to can be front end data, including data content corresponding with control property, such as image, text and video.Set membership is Subordinate relation in front end node tree between each node layer up and down.The level of node tree refers to that each node is located at front end node tree Level, if root node is in the first level of front end node tree, the child node of root node is in the second layer of front end node tree Grade, and so on.

In one embodiment, terminal by JSBridge (JavaScript Bridge) by front end node tree before web End is synchronized to terminal, and the front end node tree transmitted is cached to terminal memory.Wherein, JSBridge, which can be, passes through JavaScript erects the bridge come, and one end is web front-end, and one end is local terminal.By JSBridge, terminal can be allowed The JavaScript code of web front-end can be called, and allows the code that web front-end can be primary with calling system.

In one embodiment, terminal obtain front end node tree after, in the memory of terminal each node it is in store and Front end data corresponding to node itself, color, movement label and composition information etc..Wherein, movement label is referred in user When clicking or touch the text, image or corresponding button of corresponding node, corresponding event can be generated, such as enters the original of picture Web page address, or another picture is switched to from a picture.

In one embodiment, terminal establishes the mapping relations between node tree mark and front end node tree.When to front end Node tree optimizes and rendering is, terminal obtains front end node tree corresponding with node tree mark from local memory.

S204 is determined in front end node tree only including the first container node of composition information.

Wherein, for webpage, typesetting, which can be, carries out display position and display to front end data to display in webpage The layout of size.Corresponding to node tree, typesetting can be arranges for each child node for being included to container node in node tree Cloth.Therefore, composition information can refer to that the child node for being included to container node carries out the information arranged in position and size etc.. Container node can refer to the node for accommodating node, such as can be View (view) node.For example, in container node View In, Image (image) node and Text (text) node can be stored.

As an example, as shown in figure 3, Fig. 3 shows and displayed data according to node tree in one embodiment Schematic diagram.As shown in Fig. 3 (a), three container nodes View1, View2 and View3, the son section that container node View1 is included Point is Image2, View2 and View3, and the child node that View2 is included is Text1 and Image1, the son section that View3 is included Point is Text2, then composition information is then to carry out the information of position typesetting and size typesetting to each node of container node.It is right It answers, when in current end node tree in the presence of only including the container node of composition information, changing container node can be optimised, and to excellent Resulting upper screen node tree is rendered after change, then, terminal can be shown shown in corresponding data content such as Fig. 3 (b).It needs Illustrate, View1 is view shown by the entire display screen of terminal in Root View namely Fig. 3 (b).

In one embodiment, terminal traverses front end node tree, each node in front end node tree is obtained, from traversal It is determined in each node in front end node tree only including the first container node of composition information.

In another embodiment, terminal traverses front end node tree, each node in front end node tree is obtained, from traversal Each node in determine front end node tree in extraction vessel node.It only includes typesetting that terminal is screened from the container node of extraction The first container node of information.

S206 generates typesetting result；Typesetting result indicates the node tree by container node after deleting in front end node tree Structure.

When front end data amount is larger and the internal relation of front end data is complex, the section of corresponding front end node tree Point quantity is more, and when rendering to front end node tree, terminal will generate corresponding control for each node, so that generate Control quantity is more, to influence the speed of rendering, display interface is caused the problem of Caton occur.In order to avoid there is asking for Caton Topic, can optimize the container node for being served only for typesetting, to avoid to be served only for the container node of typesetting and generating correspondence Control, with improve rendering speed.It should be noted that when root node is if it is only including the container node of composition information, The root node cannot optimize, and only the container node of non-root node just can be optimised.

Wherein, for container node, when container node is served only for carrying out typesetting to child node, which can be by Optimization reduces the dimension of front end node tree.Typesetting result can be the row for carrying out typesetting to front end data according to front end node tree Version node tree；Or it is also possible to the node tree structure after optimizing to the container node in front end node tree.

For example, since View2 only includes composition information, indicating that View2 can be optimised as shown in Fig. 3 (a).And it is right For the child node Text1 and Image1 of View2, since View2 can be optimised, be generated after View2 is optimised and shield section When point tree, the carry position of child node Text1 and Image1 will change, and such as become hanging on View2 from original carry It is loaded on View1.

In one embodiment, when the first container node only includes composition information, terminal is by the first container vertex ticks Optimize label.Wherein, the optimization label is for indicating that the first container node can be optimised, to reduce the dimension of front end node tree Degree.

In one embodiment, when the first container node only includes composition information, terminal obtains the first container node pair The child node answered.Since the first container node for only including composition information can be optimised, terminal determines that child node is held first The position of the optimised when institute carry of device node.Wherein, the position of institute's carry include the container node View of child node institute carry with And the position on container node View.It should be noted that the container node View of child node institute carry refer to include The second container node of non-composition information, the second container node are nodes that cannot be optimised.

In one embodiment, terminal generates row according to the position of the child node institute carry of the first container node and each node Version result.Alternatively, position of the terminal according to the child node institute carry of the first container node, and in addition to the first container node Each node generates typesetting result.

In one embodiment, raw when in current end node tree there is no only including the first container node of composition information At the typesetting result for the node tree structure for indicating front end node tree.

Specifically, when in current end node tree there is no only including the first container node of composition information, show preceding end segment Point tree in all container nodes in addition to include composition information, further include non-composition information, as in container node in addition to typesetting believe Breath, there are also colors and movement label etc..Wherein, the color in container is used for terminal in rendering node tree, in View node Color is added, to add background color in the corresponding views of webpage when upper screen.Movement label in container is for responding phase The trigger event answered can generate corresponding such as when user clicks or touch the text, image or corresponding button of corresponding node Event, such as enters the original web page address of picture, or is switched to another picture from a picture.

S208, according to typesetting as a result, generating the upper screen node tree for meeting node tree structure.

Wherein, upper screen node tree is to optimize resulting node tree to front end node tree, on number of nodes, upper screen section The number of nodes of point tree is less than the number of nodes of the front end node tree before optimization.

In one embodiment, terminal is generated to shield and be saved according to each node in typesetting result in addition to the first container node Point tree.The child node is mounted to upper screen according to the position of the child node institute carry of the first container node in typesetting result by terminal The corresponding position of node tree, to obtain the upper screen node tree for meeting node tree structure.

As an example, as shown in figure 4, to optimize to obtain upper screen node to front end node tree in one embodiment The schematic diagram of tree.As shown in Fig. 4 (a), since View2 only includes composition information, indicate that View2 can be optimised.And for For the child node Text1 and Image1 of View2, since View2 can be optimised, be generated after View2 is optimised and shield section When point tree, the carry position of child node Text1 and Image1 will change, and determine that child node Text1 and Image1 exist The position of institute's carry when View2 is optimised.As shown in Fig. 4 (b), according to View1, View3, Text1, Text2, Image1 and The carry position of Image2 and Text1 and the carry position of Image1 generate the upper screen node tree for meeting node tree structure.It is comprehensive Above it is found that Text1 and Image1 carry is on View2, as shown in Fig. 4 (a) in front end node tree.And in upper screen node tree In, View2 it is optimised fall, corresponding Text1 and Image1 carry is on View1, as shown in Fig. 4 (b).

S210 is rendered according to upper screen node tree.

In one embodiment, terminal renders the node in upper screen node tree according to upper screen node tree.Specifically Ground, terminal render the node in upper screen node tree by OpenGL or Direct3D.It should be noted that upper screen node Node in tree has corresponding front end data, is rendered i.e. the node in upper screen node tree according to page layout format pair Corresponding front end data is rendered.

For example, as shown in figure 3, terminal carries out this node of Image1 for the node Image1 in upper screen node tree Rendering can refer to：It is rendered according to the image data that the layout of Image1 is included to the node.It can be obtained after rendering pair The image for showing on a terminal screen answered.

In one embodiment, according to upper screen node tree, control corresponding with the node in upper screen node tree is generated, according to Control generated renders each node of upper screen node tree.Wherein, the quantity for generating control can be with upper screen node tree Number of nodes it is identical.Container node quantity in upper screen node tree is less than the container node quantity in front end node tree, corresponding life At the quantity of control also reduce, be conducive to the speed for improving rendering.

In above-described embodiment, front end node tree is obtained, is determined in front end node tree only including the first container of composition information Node, to find node that can be optimised.Generating indicates the first container node from the typesetting of front end node tree deletion Shield node tree as a result, generating according to typesetting result, the upper screen node tree to front end node tree optimization can be obtained, before simplifying The structure of end node tree.It is generated according to typesetting result and shields node tree, since upper screen node tree is to after front end node tree optimization Node tree can effectively shorten render time when being rendered according to upper screen node tree, improve the speed of rendering.

In one embodiment, typesetting result is generated by first thread, and upper screen node tree is generated simultaneously by the second thread It is rendered；First thread and the second thread difference.

Wherein, first thread can be background thread, such as non-UI thread.Second thread can be foreground thread, such as foreground UI thread.

In one embodiment, terminal determines only include the first of composition information in front end node tree by first thread Container node generates typesetting as a result, typesetting result indicates the node tree by the first container node after deleting in front end node tree Structure.Terminal generates the upper screen node tree for meeting node tree structure according to typesetting result, according to upper screen node by the second thread Tree is rendered.

Specifically, terminal is by the non-UI thread on backstage, determines in front end node tree only the first appearance including composition information Device node generates typesetting result.Terminal passes through the UI thread on foreground, and the upper screen for meeting node tree structure is generated according to typesetting result Node tree is rendered according to upper screen node tree.

In above-described embodiment, gives first thread to handle time-consuming typesetting operation, avoid because of front end node tree The speed of rendering is influenced when structure is complicated and corresponding front end data amount is larger.Second thread special disposal Rendering operations, and Typesetting operation is not handled, influence of the typesetting operation to the second thread is avoided, to reduce the calculation amount of the second thread, in turn Improve rendering speed.

In one embodiment, as shown in figure 5, S204 can specifically include：

S502, the path along front end node tree between root node and leaf node, searching only includes the first of composition information Container node.

Wherein, root node is alternatively referred to as the tree root of front end node tree, and root node does not have father node.In front end node tree In, have and only one root node.Leaf node refers to that the node of front end node tree least significant end, leaf node do not have son section Point.

In one embodiment, when determining the root node of front end node tree, terminal is since root node, along child node Direction successively traversed, searched during traversal only include composition information the first container node.

In one embodiment, when determining the root node of front end node tree, terminal is since root node, according to preceding end segment The level of point tree is traversed from high to lower, and the first container node only including composition information is searched during traversal.Tool The step of body, terminal traversed from high to lower according to the level of node tree, can specifically include：Terminal is according to front end node The level of tree is successively traversed toward N+1 level from the first level.Wherein, N is the positive integer more than or equal to 1.

S206 can specifically include following two step：

S504 determines the position of the remaining node after deleting the first container node in path.

In one embodiment, when finding only includes the first container node of composition information, indicate to find the One container node can be optimised, at this point, terminal is determined when the position of the first container node residue node when optimised.

As an example, as shown in fig. 6, Fig. 6 is shown in one embodiment optimizes to obtain to front end node tree The schematic diagram of upper screen node tree.As shown in Fig. 6 (a), terminal is carried out since root node View1 according to the arrow direction in figure Traversal gets container node only including composition information according to the result of traversal.Wherein, the two nodes of View2 and View4 Only to include composition information, indicate that the two nodes of View2 and View4 can be optimised, when the two sections of View2 and View4 When point is optimised, the position of Image1 will change.Therefore, terminal determines Image1 in View2 and View4 optimised The position of institute's carry, the i.e. position of View2 and View4 institute carry are the child node position of View1 node.And the position of other nodes It sets and does not change.As shown in Fig. 6 (b), terminal is according to the positions of other nodes and node in addition to View2 and View4 Generate the upper screen node tree optimized to front end node tree.It is found that the quilt in Fig. 6 (b) of the View2 and View4 in Fig. 6 (a) Optimization, make the number of nodes in front end node tree tail off namely the dimension of front end node tree reduction.

In one embodiment, when searching only includes the first container node of composition information, the first container node is indicated Can be optimised, at this point, terminal is determined when the position of child node institute's carry after optimised of the first container node.Wherein, The position of its node does not change, and terminal is not necessarily to the section in addition to the child node of the first container node and the first container node It clicks through line position and sets determination, to reduce calculation amount.

S506 generates typesetting result according to the position of each path interior joint.

In one embodiment, according to each path, the position of each node and each node in addition to the first container generates row to terminal Version result.Wherein, typesetting result can be used for instructing to generate the information of each node typesetting of screen node tree.

As an example, as shown in fig. 7, for the child node institute carry of determination the first container node in one embodiment The schematic diagram of position determines Image1 and Text1 in View2 and View4 optimised in Fig. 7, and the position of institute's carry will It changes, needs to redefine the position of Image1 and Text1 institute carry after View2 and View4 optimised, at this time so as to root It is other according to the position of the Image1 and Text1 institute carry redefined, and in addition to View2, View4, Image1 and Text1 The position of node and node generate typesetting as a result, the typesetting result is for instructing each node institute carry when shielding node tree in generation Position.

In above-described embodiment, path along front end node tree between root node and leaf node can rapidly be found It only include the first container node of composition information.Determine the position of the remaining node after deleting the first container node in path, Generate typesetting according to the position of each path interior joint as a result, the typesetting result be to the typesetting of front end node tree optimization as a result, with Just terminal generates according to typesetting result and obtains upper screen node tree to front end node tree optimization, and then simplifies the knot of front end node tree Structure.

In one embodiment, as shown in figure 8, S502 can specifically include：

S802 carries out the traversal of depth-first to front end node tree.

In one embodiment, terminal traverses front end node tree according to the mode of depth-first traversal, with traversal The leaf node of subtree into front end node tree.It should be noted that executing step when traversing the leaf node in subtree S804。

As an example, as shown in figure 9, being to be determined in one embodiment when container node is only including composition information The schematic diagram of the position of its child node institute carry.It is that depth-first is carried out to front end node tree in one embodiment such as Fig. 9 (a) The schematic diagram of each upper layer father node of traversal and lookup leaf node.It is excellent according to depth as shown in the solid arrow in Fig. 9 (a) The path first traversed is traversed since father node View1 toward child node, when traversing leaf node Image1, is executed S804.As shown in Fig. 9 (b), by determining that the leaf node traversed will be hung when optimizing typesetting in one embodiment The schematic diagram of the position of load is further elaborated Fig. 9 (b) in subsequent embodiment.

In one embodiment, terminal can also traverse front end node tree in the way of breadth first traversal, When traversing the leaf node of subtree in front end node tree, step S804 is executed.

S804, when traversing the leaf node into front end node tree, along traverse path where leaf node, lookup is only wrapped Include the first container node of composition information.

Wherein, traverse path can be in the way of depth-first traversal to the subtree progress time in front end node tree It goes through.During to sub- traversal of tree, it is possible that following two scene：

Scene 1, the container node in subtree in each non-root node are the first container node for only including composition information.

In one embodiment, when traversing the leaf node into front end node tree, terminal is along traverse path, from leaf Node starts to search the first container node only including composition information toward each father node.

For example, when traversing Image1, being followed the steps below as shown in Fig. 9 (a)：S1 searches the father node of Image1 View4.When View4 is only includes the first container node of composition information, into S2, that is, the father node of View4 is continued to search View2.When View2 is only includes the first container node of composition information, into S3, the father node of View2 is continued to search View1.Since View1 is root node that cannot be optimised, to obtain the first container node View2 only including composition information And View4.In turn, as shown in Fig. 9 (b), for terminal when determining that View2 and View4 can be optimised, terminal can basis View2 or View1 determine Image1 when being optimized to front end node tree will carry position.If being determined according to View2 Image1 when being optimized to front end node tree will carry position when, then the position of carry is the position of View2.If According to View2 determine Image1 when being optimized to front end node tree will carry position when, then the position of the carry is It is carry on View1, becomes the child node of View1.It should be noted that for the node Image1 first traversed, it is preferential to hang It is loaded in the left side of View1；And the Text1 for then traversing, carry Image1 location right, such as circle of dotted line in Fig. 9 (b) Shown in Image1 the and Text1 node of circle.Wherein, for the node of same level, Far Left indicates that position is forward.

In addition, it should be noted that, View2 and the View4 expression of dashed circle can be optimised in Fig. 9 (b).

In above-described embodiment, depth-first traversal is carried out to front end node tree, can rapidly traverse the leaf of each subtree Child node.When traversing the leaf node into front end node tree, along traverse path where leaf node, searching only includes typesetting The first container node of information, so as to quickly find can be optimised container node, be conducive to shorten to front end Node tree optimizes the time of typesetting, and then accelerates the speed of rendering.Further, since depth-first search does not retain all Node, the node extended is popped up from database leaves out, therefore occupancy control is less, the number of nodes in current end node tree When more, the problem of memory overflows can be effectively avoided.

In one embodiment, as shown in Figure 10, S502 can specifically include：

Scene 2, the container node in subtree in each non-root node have the only the first container node including composition information and Second container node including non-composition information.

S1002 determines the leaf node in front end node tree.

In one embodiment, terminal traverses front end node tree, determines front end node tree according to the result of traversal In leaf node.The step of terminal traverses front end node tree can specifically include：Terminal is according to depth-first traversal Mode or breadth first traversal mode, front end node tree is traversed since root node.

It as an example, as shown in figure 11, is to be determined in one embodiment when container node is only including composition information When its child node institute carry position schematic diagram.It is excellent to front end node tree progress depth in one embodiment such as Figure 11 (a) The schematic diagram of each upper layer father node of leaf node is first traversed and searches, solid arrow is the path according to depth-first traversal, It is traversed since father node View1 toward child node, when traversing Image1, executes S1004.As shown in Figure 11 (b), it is Determined in one embodiment traversed leaf node when optimizing typesetting will carry position schematic diagram, it is subsequent Figure 11 (b) is further elaborated in embodiment.

S1004 searches the first container node and packet only including composition information along the path from root node to leaf node Include the second container node of non-composition information.

Wherein, the path of root node to leaf node refers to：In the way of depth-first traversal, traversed from root node To the path of leaf node.

In one embodiment, terminal is searched toward root node direction along the path of traversal, is found since leaf node Container node between leaf node and root node.Wherein, the container node between leaf node and root node includes typesetting letter The first container node of breath and second container node including non-composition information.

For example, as Figure 11 (a) is followed the steps below when traversing Image1：S1 searches the father node of Image1 View4.When View4 is only includes the first container node of composition information, into S2, that is, the father node of View4 is continued to search View2.When View2 be include the second container node of non-composition information when, due to the second container node of non-composition information View2 is node that cannot be optimised, to obtain the only the first container node View2 including composition information and including non-typesetting The second container node View4 of information.In turn, as shown in Figure 11 (b), terminal is determining that View4 can be optimised, and View2 is not Can it is optimised when, terminal can be determined according to View4 Image1 when being optimized to front end node tree will carry position, That is the position of carry is carry on View2, becomes the child node of View2.It should be noted that for the node first traversed Image1, preferential carry is on the left side of View2；And the Text1 for then traversing, the location right in Image1, such as Fig. 9 (b) in shown in dashed circle Image1 and solid line circle Text1 node.Wherein, for the node of same level, Far Left indicates position Before resting against.

It should be noted that the View4 expression of dashed circle can be optimised in Fig. 9 (b).

S504 can specifically include：

S1006, when second container node is the father node of the first container node, it is determined that only the including composition information The subtree of one container node.

Wherein, the subtree of the first container node refers to：It is formed using the child node of the first container node as root node Subtree.

Specifically, when second container node is the father node of the first container node and the first container node has child node When with grandchild node, it is determined that the only subtree of the first container node including composition information.

In one embodiment, when second container node is the father node of the first container node, terminal obtain this first The child node of container node establishes a stalk tree by root node of acquired child node.

As an example, as shown in figure 12, for the subtree institute carry of determination the first container node in one embodiment The schematic diagram of position.The subtree of the first container node View4 be dotted portion node tree, the subtree include View5 and Two nodes of Image1.

S1008, using second container node as the node of carry subtree.

In one embodiment, terminal determines subtree in the first container section according to second container node that can not be optimised The position of point institute's carry when optimised.Wherein, the first container node position of institute's carry when optimised is second container The child node position of node, also i.e. by subtree carry on second container node.

In above-described embodiment, when traversing leaf node into front end node tree, along leaf node place traverse path, The only the first container node comprising composition information and the second container node comprising non-composition information are searched, so as to quick Find can be optimised container node and can not be optimised container node, be conducive to shorten to front end node tree into The time of row Makeup Optimization, and then accelerate the speed of rendering.

In one embodiment, S504 can specifically include：The traversal of depth-first is carried out from the first container node；Really The first container degree of node is undergone when fixed traversal to leaf node；The carry position of leaf node is determined according to number experienced It sets.

Wherein, according to the mode of depth-first traversal, its father node, continuation time will be returned when traversing a leaf node Go through other leaf nodes of the father node.Therefore, experience the first container degree of node refers to when traversal to leaf node：Time When going through each leaf node, by the first container degree of node.It should be noted that having N number of for some the first container node Child node, then, traversal the first container node n times can be completed into the traversal to N number of child node.For example, it is assumed that the root of subtree Node is View, and there are three the child nodes of root node View, respectively Image, Text and Video, and terminal is according to depth-first The mode of traversal traverses Image, second of traversal Text for the first time, and third time traverses Video, by being traversed three times by subtree In child node traversed.

In one embodiment, when the first container node has child node and do not have grandchild node, terminal is with first Container node is starting point, and the traversal of depth-first is carried out to the child node of the first container node.Terminal calculating traverses each leaf The first container degree of node is undergone when node, and each leaf node is determined according to the number of each leaf node in traversal subtree.

It, can be by being to the first container node when the first container node has multiple child nodes in above-described embodiment Starting point carries out depth-first traversal, so that it is determined that traversal to each leaf node is experience the first container degree of node, according to this Number determines the carry position of leaf node, so as to avoid when the first container node has multiple child nodes from front end node The root node of tree re-starts traversal, shortens the time of traversal, and then accelerates the speed of rendering.

In one embodiment, as shown in figure 13, this method may also comprise the following steps:：

S1302, the first container node in current end node tree is changed to when including the container node of non-composition information, then According to position of the container node after change in front end node tree, the container node after determining change is in upper screen node tree Restore position.

In one embodiment, after terminal shields node tree in rendering, in displaying shield node tree in respectively save it is corresponding before End data.Since during displaying, the attribute of the container node in front end node tree may change, i.e. container node It is changed to include non-composition information by only including composition information originally.

As an example, as shown in figure 14, the schematic diagram changed for container node in one embodiment.Figure 14 (a) front end node tree before changing occurs for container node, container node View4 by only including composition information originally in figure.Figure 14 (b) be the front end node tree after container node changes, and container node View4 is by not only including composition information in figure, also Including non-composition information.That is, container node View4 from only including that composition information becomes including composition information and non-originally Composition information.

In one embodiment, terminal detects the container node in front end node tree during showing front end data Situation of change.When changing in current end node tree there are container node, i.e., container node by only including composition information originally Become including composition information and non-composition information, terminal determines the container node changed, and determines container section after the change Position of the point in front end node tree.Terminal determines change according to position of the container node in front end node tree after the change Recovery position of the container node in Shang Pingshu afterwards.Wherein, the above-mentioned determining method for restoring position is applicable to directly change The scene of the supreme screen node tree of container node carry afterwards.

In one embodiment, terminal passes through the second thread creation container section corresponding with the first container node after change Point determines created container node in upper screen node tree according to position of the container node after change in front end node tree In recovery position.Wherein, the above-mentioned determining method for restoring position is applicable to re-create container node, by the container of creation The scene of the supreme screen node tree of node carry.

Container node after change is restored to upper screen node tree according to position is restored by S1304.

In one embodiment, terminal is creating container node corresponding with the container node after change and is determining recovery When position, the container node created is restored to upper screen node tree according to position is restored.

As an example, as shown in figure 15, the upper screen tree progress to be changed in one embodiment to container node The schematic diagram of recovery.In conjunction with shown in Figure 14, the front end node tree of Figure 14 (a) obtains as shown in Figure 15 (a) after Makeup Optimization Upper screen node tree.When the front end node tree of Figure 14 (a) is changed to front end node tree shown in Figure 14 (b), corresponding, Figure 15 (a) the upper screen node tree in also becomes the upper screen node tree of Figure 15 (b) accordingly.

In above-described embodiment, when the container node in current end node tree changes, occur according in front end node tree The position of the container node of change can determine position of the container node changed in upper screen node tree, will send out The corresponding position that the container node more that changes is mounted in screen node tree.

In one embodiment, S1302 can specifically include：The traversal of depth-first is carried out to front end node tree；When time The father node of traverse path where going through the container node to change and the container node after change is only including composition information When third container node, it is determined that after deleting third container node in traverse path, container node institute carry after change Node；Position of the container node on the node of institute's carry after determining change, be restored position.

Wherein, after deleting third container node, after the node of the container node institute carry after change is referred to as change Optimization position of the container node in front end node tree.Determine the container node after change in institute's carry according to the optimization position Node on position, thus the position that is restored.

For example, terminal carries out the traversal of depth-first to front end node tree as shown in Figure 14 (b), when traversal to View1- When this stalk tree of View2-View4-Image1, the father node View2, View2 for obtaining container node View4 are only to believe including typesetting The third container node of breath.Terminal is determining after deleting View2 in traverse path View1-View2-View4-Image1, The node of View4 institute carry.Wherein, since during optimizing, View2 can be optimised, when View2 is optimised View4 will be mounted on View1, and therefore, the node of View4 institute carry is View1.Terminal is according to View4 in institute's carry Position on node determines recovery position of the View4 in upper screen node tree, so as to by View4 carry in upper screen node tree On View1, as shown in Figure 15 (b).

In one embodiment, terminal detects the attribute value of container node in front end node tree.Wherein, attribute value includes row Version information and non-composition information.When the attribute value of container node changes in current end node tree, front end node tree is carried out The traversal of depth-first.

In above-described embodiment, depth-first traversal is carried out to front end node tree, can rapidly traverse and to change Container node.When the container node that traversal is changed into front end node tree, by determining the container node of change preceding Optimization position in end node tree, to determine position of the container node after change on the node of institute's carry, be restored position It sets, provides position guidance for the recovery of upper screen node tree.Further, since depth-first search does not retain node all, expand The node opened up is popped up from database leaves out, therefore occupancy control is less, when the number of nodes in current end node tree is more, The problem of memory overflows can be effectively avoided.

In one embodiment, S1304 can specifically include：According to position is restored, by the container node carry after change To the respective nodes in upper screen node tree；Based on the front end node tree after change, the container node after determining change is in upper screen section Corresponding child node in point tree；Child node is mounted to the container node in upper screen node tree after the change of institute's carry.

For example, as shown in figure 15, the container node View4 after change is mounted to upper screen section according to position is restored by terminal View1 node in point tree.Terminal is based on the front end node tree after change, and the container node View4 after determining change is in upper screen Corresponding child node Image1 in node tree；Child node Image1 is mounted on the container node View4 in upper screen node tree.

In one embodiment, child node is mounted to the container node in upper screen node tree after the change of institute's carry by terminal Later, the upper screen node tree after being restored.Terminal renders the upper screen node tree after recovery, the knot after showing rendering Fruit.It is achieved thereby that the result after showing rendering also changes therewith when container node changes.

For example, as shown in figure 14, during running program, when the background color of view node View4 is by Figure 14 (a) It is colourless become in Figure 14 (b) have powerful connections color when, corresponding upper screen node tree need to be restored, i.e., by Figure 15's (a) Upper screen node tree reverts to the upper screen node tree of Figure 15 (b), to be rendered according to the upper screen node tree after recovery.

In above-described embodiment, according to position is restored, the container node after change is mounted to corresponding in upper screen node tree Node completes the recovery to the container node after change.The container section after change is determined according to the front end node tree after change Point corresponding child node in upper screen node tree, is mounted to the container section in upper screen node tree after the change of institute's carry for child node Point realizes and the child node for belonging to the container node after changing is mounted on node itself, to realize screen node tree Recovery.

In traditional scheme, the node of the whole node tree in front end is all reflected to above UI thread, entire interface is made Typesetting and method call can be all stuck on UI thread.All operations in front end and typesetting have all directly corresponded on the tree of upper screen Face.It, will in 16ms if the amount of front end message is very big or interface is too complicated since the drafting of terminal is all mono- frame of 16ms Be unable to complete all typesetting and Rendering operations, then entire interface will Caton, cause entire interface without response.This technology side Case is allocated in front end message inside two threads, and background thread is responsible for the calculating of complicated typesetting, and the UI thread on foreground receives Shield node tree on to the creation of typesetting result, rendering is carried out according to upper screen node tree and upper screen operates.

Front end node tree is synchronized portion to terminal by JsBridge, then terminal is in background thread to front end node tree It carries out typesetting and does Hierarchical Optimization, then the result of typesetting and Hierarchical Optimization is sent to the UI thread on backstage, it is corresponding to establish UI Upper screen node tree, finally go to carry out rendering according to upper screen node tree and operation that upper screen is shown, to solve Caton and layer The problem of grade optimization.

Specifically, for terminal before showing front end data, front end constructs a simple interface, can show in the interface Various front end datas, such as picture, text and video, front end node tree corresponding with interface such as Fig. 3 (a).In front end node tree In in store node various information, such as composition information and non-composition information, wherein non-composition information includes color and dynamic Make label etc..Then front end node tree is synchronized to terminal by jsBridge mode by front end and terminal.

After terminal obtains front end node tree, the corresponding operation of front end node tree can reflect that terminal, i.e. terminal obtain Obtain the attribute of front end node tree, wherein shown in front end node tree such as Fig. 4 (a).Terminal is carried out according to front end node tree obtained Typesetting obtains typesetting as a result, generating the upper screen node tree for being used for upper screen according to typesetting result, completes the structure for shielding node tree at this time It builds.Typesetting is one than relatively time-consuming operation, and terminal carries out the behaviour of typesetting to front end node tree obtained by background thread Make, operates the influence to UI thread to avoid typesetting.After background thread typesetting, the background thread of terminal will arrange front end node tree Version result is sent to UI thread, when the UI thread on foreground receives typesetting result, is shown according to the creation of typesetting result for upper screen Upper screen node tree, as shown in Fig. 4 (b).

Shown in Fig. 4 (a) and Fig. 4 (b), there are some differences between the front end node tree and upper screen node tree in Fig. 4 (a) Not.Since the container node View4 in Fig. 4 (a) is the node for being only involved in typesetting, terminal is not necessarily to be the node life for being only involved in typesetting At control, therefore the level that can reduce front end node tree is nested, the rendering speed of quickening.

Specifically, the View2 on the second row of front end node tree left side in Fig. 4 (a), due to any other no information, only It is for typesetting, so falling View2 optimization before upper screen.In addition, after View2 optimization is fallen, the child node of View2 is past One layer is above mentioned, on the father node for directly hanging over View2.Due to the View3 on the right of the second row of front end node tree in Fig. 4 (a), by There is the non-composition information in addition to composition information, such as background color in View3, so View3 is not only served only for typesetting, also Can be used for non-typesetting, for example view adds background color, therefore, View3 will not it is optimised fall.

Optimization to front end node tree, the optimization algorithm being related to are as described below：

(1) by way of depth-first traversal, front end node tree is traversed.

(2) position of the node institute carry of traversal is determined, i.e., carry is on which container node View.

(3) determine the node carry of traversal in the position of container node View.

For example, the front end node tree in figure is the node tree that terminal is used for typesetting, now to this section as shown in Fig. 6 (a) Point tree optimizes, to carry out upper screen.

For example, two View, View2 and the View4 needs on the left of Fig. 6 (a) optimize, then View2 and View4 Child node requires up to mention.For Image1, terminal carries out the mode of depth-first traversal, traverses Image1, then past Upper layer is searched, since the father node View4 of Image1 is the node for needing to optimize.Terminal continues to search toward upper layer, the father of View4 Node View2 is also the node for needing to optimize.Then it is searched again toward upper layer, since the father node View1 of View2 is root node, Therefore View1 cannot be optimised.So that it is determined that Image1 carry is on View1.

For how to determine the position of node institute carry, corresponding algorithm is as described below：

Firstly, terminal finds the father node of node, depth-first traversal is then carried out, while recording how many ends of traversal Other nodes of tail, until traversing current node itself, the node number traversed this when is exactly that current node is hung It is loaded in the position of View.

For example, Image1 carry need to be further determined that at this as shown in fig. 7, Image1 determines carry when on View1 Which position on View1.With reference to Fig. 9, Image1 finds father node View4 toward upper layer, then depth-first traversal, for the first time Image1 itself is just traversed, therefore, the position on Image1 carry View is 0.Similarly, Text1 among third layer Optimum results, as carry are 1 on View1, and in the position of View.

When View optimised in program operation process is possible to be added to color or some other non-typesetting, such as Shown in Figure 14, the View4 in Figure 14 is added to color, needs to restore level at this time, and level recovery algorithms are as described below：

(1) creation needs the View restored.

(2) container node and the position of the View institute carry of creation are found by Hierarchical Optimization algorithm

(3) child node corresponding to the View creation is restored to creation from the position of the upper original carry of screen node tree With View, as shown in figure 15.

By using the scheme of above-described embodiment, solves and frequently interact between front end and terminal and cause interface Caton Problem, and solve the problems, such as that terminal is drawn inefficient caused by the level of front end node tree is too many.

Fig. 2 is the flow diagram of rendering method in one embodiment.Although in the flow chart that should be understood that Fig. 2 Each step successively shown according to the instruction of arrow, but these steps be not the inevitable sequence according to arrow instruction successively It executes.Unless expressly state otherwise herein, there is no stringent sequences to limit for the execution of these steps, these steps can be with Other sequences execute.Moreover, at least part step in Fig. 2 may include multiple sub-steps or multiple stages, these Sub-step or stage are not necessarily to execute completion in synchronization, but can execute at different times, these sub-steps Suddenly perhaps the stage execution sequence be also not necessarily successively carry out but can be with the sub-step of other steps or other steps Either at least part in stage executes in turn or alternately.

As shown in figure 16, in one embodiment, a kind of rendering device is provided, which specifically includes：Node Tree obtains module 1602, container node determining module 1604, typesetting result-generation module 1606,1608 and of node tree generation module Rendering module 1610；Wherein：

Node tree obtains module 1602, for obtaining front end node tree；

Container node determining module 1604, for determining in front end node tree only including the first container section of composition information Point；

Typesetting result-generation module 1606, for generating typesetting result；Typesetting result is indicated the first container node in the past Node tree structure after being deleted in end node tree；

Node tree generation module 1608, for meeting the upper screen node tree of node tree structure as a result, generating according to typesetting；

Rendering module 1610, for being rendered according to upper screen node tree.

In one embodiment, it only includes row that typesetting result-generation module 1606, which is also used to be not present in current end node tree, When the first container node of version information, the typesetting result for indicating the node tree structure of front end node tree is generated.

In one embodiment, container node determining module 1604 is also used to root node and leaf section along front end node tree The first container node only including composition information is searched in path between point；

Typesetting result-generation module 1606 is also used to determine the remaining node after deleting the first container node in path Position；Typesetting result is generated according to the position of each path interior joint.

In one embodiment, container node determining module 1604 is also used to carry out front end node tree time of depth-first It goes through；When traversing the leaf node into front end node tree, along traverse path where leaf node, searching only includes composition information The first container node.

In one embodiment, container node determining module 1604 is also used to determine the leaf node in front end node tree； Along the path from root node to leaf node, the only the first container node including composition information is searched and including non-composition information Second container node；

Typesetting result-generation module 1606 is also used to when second container node is the father node of the first container node, then really The subtree of the fixed only the first container node including composition information；Using second container node as the node of carry subtree.

In one embodiment, typesetting result-generation module 1606 is also used to the carry out depth-first from the first container node Traversal；The first container degree of node is undergone when determining traversal to leaf node；Leaf section is determined according to number experienced The carry position of point.

In one embodiment, as shown in figure 17, which further includes：Restore position determination module 1612 and node restores Module 1614；Wherein：

Restore position determination module 1612, is changed to include non-typesetting for the first container node in current end node tree When the container node of information, then the position according to the container node after change in front end node tree, determines the container after changing Recovery position of the node in upper screen node tree；

Node recovery module 1614, for the container node after change to be restored to upper screen node tree according to recovery position.

In one embodiment, restore time that position determination module 1612 is also used to carry out front end node tree depth-first It goes through；Being when the father node for traversing the container node to container node place traverse path after change and after changing only includes row When the third container node of version information, it is determined that the container node after deleting third container node in traverse path, after change The node of institute's carry；Position of the container node on the node of institute's carry after determining change, be restored position.

In one embodiment, node recovery module 1614 is also used to according to position is restored, by the container node after change The respective nodes being mounted in screen node tree；Based on the front end node tree after change, the container node after determining change is upper Shield corresponding child node in node tree；Child node is mounted to the container node in upper screen node tree after the change of institute's carry.

Figure 18 shows the internal structure chart of computer equipment in one embodiment.The computer equipment specifically can be figure Terminal 110 in 1.As shown in figure 18, it includes the place connected by system bus which, which includes the computer equipment, Manage device, memory, network interface, input unit and display screen.Wherein, memory includes non-volatile memory medium and interior storage Device.The non-volatile memory medium of the computer equipment is stored with operating system, can also be stored with computer program, the computer When program is executed by processor, processor may make to realize rendering method.Computer program can also be stored in the built-in storage, When the computer program is executed by processor, processor may make to execute rendering method.The display screen of computer equipment can be Liquid crystal display or electric ink display screen, the input unit of computer equipment can be the touch layer covered on display screen, Be also possible to the key being arranged on computer equipment shell, trace ball or Trackpad, can also be external keyboard, Trackpad or Mouse etc..

It will be understood by those skilled in the art that structure shown in Figure 18, only part relevant to application scheme The block diagram of structure, does not constitute the restriction for the computer equipment being applied thereon to application scheme, and specific computer is set Standby may include perhaps combining certain components or with different component layouts than more or fewer components as shown in the figure.

In one embodiment, rendering device provided by the present application can be implemented as a kind of form of computer program, meter Calculation machine program can be run in computer equipment as shown in figure 18.It can be stored in the memory of computer equipment and form the rendering Each program module of device, for example, node tree shown in Figure 16 obtains module 1602, container node determining module 1604, row Version result-generation module 1606, node tree generation module 1608 and rendering module 1610.The computer that each program module is constituted Program makes processor execute the step in the rendering method of each embodiment of the application described in this specification.

For example, computer equipment shown in Figure 18 can obtain mould by the node tree in rendering device as shown in figure 16 Block 1602 executes S202.Computer equipment can execute S204 by container node determining module 1604.Computer equipment can pass through Typesetting result-generation module 1606 executes S206.Computer equipment can execute S208 by node tree generation module 1608.It calculates Machine equipment can execute S210 by rendering module 1610.

In one embodiment, a kind of computer equipment, including memory and processor are provided, memory is stored with meter Calculation machine program, when computer program is executed by processor, so that processor executes following steps：Obtain front end node tree；It determines It only include the first container node of composition information in front end node tree；Generate typesetting result；Typesetting result is indicated the first container Node tree structure of the node after being deleted in front end node tree；According to typesetting as a result, generating the upper screen section for meeting node tree structure Point tree；It is rendered according to upper screen node tree.

In one embodiment, when computer program is executed by processor, so that processor also executes following steps：Currently When in end node tree there is no only including the first container node of composition information, the node tree structure for indicating front end node tree is generated Typesetting result.

In one embodiment, it only includes composition information in determining front end node tree that computer program, which is executed by processor, When the step of the first container node, so that processing implement body executes following steps：Root node and leaf section along front end node tree The first container node only including composition information is searched in path between point；

When computer program is executed by processor the step for generating typesetting result, so that processing implement body executes following step Suddenly：Determine the position of the remaining node after deleting the first container node in path；It is generated according to the position of each path interior joint Typesetting result.

In one embodiment, computer program is executed by processor along front end node tree between root node and leaf node Path, lookup is when only including the steps that the first container node of composition information, so that processing implement body execution following steps：It is right The traversal of front end node tree progress depth-first；When traversing the leaf node into front end node tree, where leaf node Traverse path searches the first container node only including composition information.

In one embodiment, computer program is executed by processor along front end node tree between root node and leaf node Path, lookup is when only including the steps that the first container node of composition information, so that processing implement body execution following steps：Really Determine the leaf node in front end node tree；Along the path from root node to leaf node, searching only includes the first of composition information Container node and second container node including non-composition information；

Computer program is executed by processor the position for determining the remaining node after deleting the first container node in path Step when so that processing implement body execute following steps：When second container node is the father node of the first container node, then Determine the subtree of the only the first container node including composition information；Using second container node as the node of carry subtree.

In one embodiment, computer program, which is executed by processor, determines the institute after deleting the first container node in path When the step of the position of remaining node, so that processing implement body executes following steps：It is excellent that depth is carried out from the first container node First traversal；The first container degree of node is undergone when determining traversal to leaf node；Leaf is determined according to number experienced The carry position of node.

In one embodiment, when computer program is executed by processor, so that processor also executes following steps：Currently The first container node in end node tree is changed to when including the container node of non-composition information, then according to the container section after change Position of the point in front end node tree, recovery position of the container node in upper screen node tree after determining change；According to recovery Container node after change is restored to upper screen node tree by position.

In one embodiment, computer program is executed by processor according to the container node after change in front end node tree In position, determine change after container node in upper screen node tree recovery position step when so that processing implement body Execute following steps：The traversal of depth-first is carried out to front end node tree；The traversal where traversal to container node after change When the father node of container node behind path and change is only includes the third container node of composition information, it is determined that from traversal After deleting third container node in path, the node of the container node institute carry after change；Container node after determining change exists Position on the node of institute's carry, be restored position.

In one embodiment, computer program is executed by processor according to position is restored that the container node after change is extensive When the multiple step to upper screen node tree, so that processing implement body executes following steps：According to position is restored, by the container after change Node is mounted to the respective nodes in screen node tree；Container node based on the front end node tree after change, after determining change The corresponding child node in upper screen node tree；Child node is mounted to the container section in upper screen node tree after the change of institute's carry Point.

In one embodiment, a kind of computer readable storage medium is provided, computer program, computer journey are stored with When sequence is executed by processor, so that processor executes following steps：Obtain front end node tree；It determines in front end node tree and only includes The first container node of composition information；Generate typesetting result；Typesetting result is indicated the first container node from front end node tree Node tree structure after deletion；According to typesetting as a result, generating the upper screen node tree for meeting node tree structure；According to upper screen node tree It is rendered.

Those of ordinary skill in the art will appreciate that realizing all or part of the process in above-described embodiment method, being can be with Relevant hardware is instructed to complete by computer program, the program can be stored in a non-volatile computer and can be read In storage medium, the program is when being executed, it may include such as the process of the embodiment of above-mentioned each method.Wherein, provided herein Each embodiment used in any reference to memory, storage, database or other media, may each comprise non-volatile And/or volatile memory.Nonvolatile memory may include that read-only memory (ROM), programming ROM (PROM), electricity can be compiled Journey ROM (EPROM), electrically erasable ROM (EEPROM) or flash memory.Volatile memory may include random access memory (RAM) or external cache.By way of illustration and not limitation, RAM is available in many forms, such as static state RAM (SRAM), dynamic ram (DRAM), synchronous dram (SDRAM), double data rate sdram (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronization link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) directly RAM (RDRAM), straight Connect memory bus dynamic ram (DRDRAM) and memory bus dynamic ram (RDRAM) etc..

Each technical characteristic of above embodiments can be combined arbitrarily, for simplicity of description, not to above-described embodiment In each technical characteristic it is all possible combination be all described, as long as however, the combination of these technical characteristics be not present lance Shield all should be considered as described in this specification.

The several embodiments of the application above described embodiment only expresses, the description thereof is more specific and detailed, but simultaneously The limitation to the application the scope of the patents therefore cannot be interpreted as.It should be pointed out that for those of ordinary skill in the art For, without departing from the concept of this application, various modifications and improvements can be made, these belong to the guarantor of the application Protect range.Therefore, the scope of protection shall be subject to the appended claims for the application patent.

Claims

1. a kind of rendering method, including：

Obtain front end node tree；

Generate typesetting result；The typesetting result is indicated the first container node after deleting in the front end node tree Node tree structure；

It is rendered according to the upper screen node tree.

2. the method according to claim 1, wherein the typesetting result by first thread generate, it is described on Screen node tree is generated and is rendered by the second thread；The first thread is different with second thread.

3. the method according to claim 1, wherein the method also includes：

When in the front end node tree there is no only including the first container node of composition information, generating indicates the preceding end segment The typesetting result of the node tree structure of point tree.

4. the method according to claim 1, wherein only including that typesetting is believed in the determination front end node tree The first container node of breath includes：

The first container section only including composition information is searched in path along the front end node tree between root node and leaf node Point；

The generation typesetting result includes：

Determine the position of the remaining node after deleting the first container node in the path；

Typesetting result is generated according to the position of each path interior joint.

5. according to the method described in claim 4, it is characterized in that, root node and the leaf section along the front end node tree Path between point, searching the only the first container node including composition information includes：

The traversal of depth-first is carried out to the front end node tree；

When traversing the leaf node into the front end node tree, along traverse path where the leaf node, lookup is only wrapped Include the first container node of composition information.

6. according to the method described in claim 4, it is characterized in that, root node and the leaf section along the front end node tree Path between point, searching the only the first container node including composition information includes：

Determine the leaf node in the front end node tree；

The only the first container node including composition information is searched and including non-row from root node to the path of the leaf node in edge The second container node of version information；

Determination position of remaining node after deleting the first container node in the path includes：

When the second container node is the father node of the first container node, then

Determine the subtree of the only the first container node including composition information；

Using the second container node as the node of subtree described in carry.

7. according to the method described in claim 4, it is characterized in that, the first container is deleted in the determination from the path The position of remaining node further includes after node：

The traversal of depth-first is carried out from the first container node；

The first container degree of node is undergone when determining traversal to the leaf node；

The carry position of the leaf node is determined according to number experienced.

8. method according to any one of claims 1 to 7, which is characterized in that the method also includes：

When the first container node in the front end node tree is changed to include the container node of non-composition information, then

According to position of the container node after change in the front end node tree, the container node after determining change is on described Shield the recovery position in node tree；

The container node after change is restored to the upper screen node tree according to the recovery position.

9. according to the method described in claim 8, it is characterized in that, the container node according to after change is in the preceding end segment Position in point tree, recovery position of the container node in the upper screen node tree after determining change, including：

The traversal of depth-first is carried out to the front end node tree；

Being when the father node for traversing the container node to container node place traverse path after change and after changing only includes row When the third container node of version information, then

Determine the section of the container node institute carry after the change after deleting the third container node in the traverse path Point；

Position of the container node on the node of institute's carry after determining the change, be restored position.

10. according to the method described in claim 8, it is characterized in that, it is described according to the recovery position by the container after change Node is restored to the upper screen node tree：

According to the recovery position, the container node after change is mounted to the respective nodes in the upper screen node tree；

Based on the front end node tree after change, the corresponding sub- section in the upper screen node tree of the container node after changing is determined Point；

The child node is mounted to the container node in the upper screen node tree after the change of institute's carry.

11. a kind of rendering device, including：

Node tree obtains module, for obtaining front end node tree；

Container node determining module, for determining in the front end node tree only including the first container node of composition information；

Typesetting result-generation module, for generating typesetting result；The typesetting result is indicated the first container node from institute State the node tree structure after deleting in front end node tree；

Node tree generation module, for meeting the upper screen node tree of the node tree structure as a result, generating according to the typesetting；

Rendering module, for being rendered according to the upper screen node tree.

12. device according to claim 11, which is characterized in that the typesetting result is generated by first thread, described Upper screen node tree is generated and is rendered by the second thread；The first thread is different with second thread.

13. device according to claim 11, which is characterized in that typesetting result-generation module is also used to when the preceding end segment When in point tree there is no only including the first container node of composition information, the node tree structure for indicating the front end node tree is generated Typesetting result.

14. a kind of storage medium is stored with computer program, when the computer program is executed by processor, so that the place Device is managed to execute such as the step of any one of claims 1 to 9 the method.

15. a kind of computer equipment, including memory and processor, the memory is stored with computer program, the calculating When machine program is executed by the processor, so that the processor executes the step such as any one of claims 1 to 9 the method Suddenly.