A method for fast positioning and differential rendering update based on diff algorithm

Abstract

The present invention belongs to the technical field of computer operating systems and software development, and in particular, to a method for realizing rapid positioning and differential rendering updates based on a diff algorithm for a front-end framework view layer and its use. This method adds a same unique identifier to all text nodes in the parsed and rendered text content and the corresponding overall tags generated by the text node after rendering and that can be recognized by the browser. When the text node or tag changes, the unique identifier is used to quickly locate the corresponding tag or text node that needs differential rendering updates, and differential rendering updates are performed on it to generate a new view interface. This method can quickly locate text nodes or tags that need differential rendering updates, and compared with the existing diff algorithm, the amount of calculation is greatly reduced, a large amount of memory usage is avoided, and the efficiency of positioning and rendering updates is greatly improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of computer operating systems and software development, and in particular to a method for realizing fast positioning and differential rendering update based on a diff algorithm for a front-end framework view layer and its use. Background Art

[0002] Usually, when rendering the Document Object Model (DOM, a standard programming interface for processing Extensible Markup Language recommended by the W3C organization, is the structural part of a web page. When a web page is loaded, the DOM is the source code of the real picture rendered by the text content. The structure of the DOM is an inverted tree structure with only one tree vertex), most users will encounter such a problem, that is, sometimes when we modify certain data, if it is rendered directly to the real DOM, it will cause the entire DOM tree to be redrawn and rearranged, resulting in a significant increase in rendering time, manpower and computing costs.

[0003] The emergence of the diff algorithm provides a possible solution to the above problems. The diff algorithm adopts the method of comparing the new and old nodes, and only updates the small block of DOM modified by the user instead of updating the entire DOM, so as not to cause the redrawing and rearrangement of the entire DOM tree. However, the current mainstream diff algorithms all perform differential rendering by recursively traversing and comparing the new and old texts or all node elements. During the operation, in order to maintain the stack structure and performance, the stack occupies a large amount of memory, thereby slowing down the rendering speed and greatly reducing the efficiency of differential rendering updates. Summary of the invention

[0004] In order to overcome the above-mentioned defects and shortcomings of the existing diff algorithm when performing DOM differential rendering and updating, the present invention proposes a solution.

[0005] the term:

[0006] Tags: Tags are text nodes that are parsed and traversed. The text node is a single tag, for example .

[0007] Overall tag: An overall tag refers to a nested structure of multiple tags generated after rendering the text nodes obtained through parsing. For example <button>< / button> .

[0008] First, the present invention provides a method for realizing fast positioning and differential rendering update based on diff algorithm. The method of the present invention adds a same unique identifier to all text nodes in the parsed and rendered text content and the corresponding overall tags generated by the text node after rendering and can be recognized by the browser. When the text node or tag changes, the unique identifier is used to quickly locate the corresponding tag or corresponding text node that needs differential rendering update, and differential rendering is performed on it to generate a new view interface.

[0009] Specifically, the method of the present invention comprises the following steps:

[0010] (1) Obtain the text content that needs to be parsed and rendered;

[0011] (2) Traverse the text content obtained in step (1);

[0012] (3) Render each traversed text node (cm) in step (2) into a tag (vm) that the browser can recognize;

[0013] (4) adding a unique identifier to each text node traversed in step (2) and the corresponding overall label generated after the text node is rendered in step (3);

[0014] (5) Change text nodes or tags;

[0015] (6) directly locating the label or text node corresponding to the text node or label changed in step (5) through the unique identifier;

[0016] (7) Perform differential rendering update on the label or text node located in step (6).

[0017] Furthermore, the text content described in step (1) of the above method is determined by the front-end framework language used. The template part is obtained in the vue framework language, and the render part is obtained in the react framework language. The function of the obtained text content is to render all or part of the structure of a specific web page.

[0018] Furthermore, the traversal of the text content obtained in step (1) in step (2) of the above method refers to visiting each text node in the DOM tree structure in the text content obtained in step (1) in turn.

[0019] Furthermore, the tags that can be recognized by the browser in step (3) of the above method refer to the document object model that can be recognized by the browser.

[0020] Furthermore, the step (4) of the above method adds a unique identifier to each traversed text node in step (2) and the corresponding overall label generated after the text node is rendered in step (3), including:

[0021] (a) creating a unique identifier for each text node traversed in step (2), wherein the unique identifiers are not repeated;

[0022] (b) adding a unique identifier that is the same as the text node to the corresponding overall label generated after each traversed text node in step (2) is rendered in step (3);

[0023] (c) Each time a corresponding label is generated based on the rendering of a text node, a unique identifier of the text node is added to the label.

[0024] Secondly, the present invention also relates to the use of the above-mentioned method for realizing fast positioning and differential rendering update based on diff algorithm in front-end framework view processing technology.

[0025] In summary, the present invention provides a method for realizing fast positioning and differential rendering update based on the diff algorithm, and the method has the following functional characteristics:

[0026] (1) This method can quickly locate text nodes or labels that need to be updated by differential rendering, effectively solving the problems of high memory usage and low rendering efficiency of existing diff algorithms when performing differential rendering updates.

[0027] (2) This method can be applied to a program that actively parses the text structure part (HTML) to render the DOM and then generate a static view interface.

[0028] (3) In this method, the DOM used as the rendering object generates a node object tree by itself, so the text node or tag that needs to be rendered and updated can be quickly located through the defined private unique identifier.

[0029] (4) Compared with the existing diff algorithm, this method greatly reduces the amount of calculation, avoids a large amount of memory usage, and greatly improves the efficiency of positioning and rendering updates. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments recorded in the present invention, not all embodiments. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0031] Figure 1 It is a schematic diagram of the implementation process of the method of the present invention.

[0032] Figure 2 It is a schematic diagram of the DOM tree structure in the method of the present invention.

[0033] Figure 3 It is a schematic diagram of the final presentation form of controlModel (cm) and viewModel (vm) in the method of the present invention.

[0034] Figure 4 This is an application example of the method of the present invention.

[0035] Figure 5 The figure is a comparison diagram of the implementation process of the method of the present invention and the existing diff algorithm. DETAILED DESCRIPTION

[0036] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. The present invention can also be implemented or applied through other different specific implementation methods. The details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention.

[0037] At the same time, it should be understood that the protection scope of the present invention is not limited to the specific embodiments described below; it should also be understood that the terms used in the embodiments of the present invention are for describing specific embodiments rather than for limiting the protection scope of the present invention.

[0038] Embodiment 1: A method for realizing fast positioning and differential rendering update based on diff algorithm for the front-end framework view layer (see Figure 1-5 )

[0039] This method adds a same unique identifier to all text nodes in the parsed and rendered text content and the corresponding overall tags generated by the text node after rendering and can be recognized by the browser. When the text node or tag changes, the unique identifier is used to quickly locate the corresponding tag or corresponding text node that needs differential rendering update, and differential rendering is performed on it to generate a new view interface.

[0040] Specifically, the method comprises the following steps:

[0041] (1) Obtain the text content that needs to be parsed and rendered;

[0042] The obtained text content is determined by the specific front-end framework language used. In the vue framework language, the template part is obtained, and in the react framework language, the render part is obtained. The function of the obtained text content is to render all or part of the structure of a specific web page.

[0043] (2) Traverse the text content obtained in step (1);

[0044] Traversing text content means visiting each text node in the DOM tree (or graph) in the text content in turn along the specified search route. We define the alias of each obtained text node as controlModel, abbreviated as cm.

[0045] (3) Render each traversed text node in step (2) into a tag that the browser can recognize;

[0046] The tags that the browser can recognize refer to the document object model (DOM) that the browser can recognize. We define its alias as viewModel, abbreviated as vm.

[0047] The relationship between controlModel and viewModel is one-to-many (for example: controlModel is a custom tag <aui-button>< / aui-button> , the parsed viewModel is <button> < / button> , whose root node is button), each time the viewModel root node is generated according to the controlModel, the unique identifier of the controlModel is stored, and the controlModel and the corresponding viewModel can be quickly located through the unique identifier.

[0048] (4) adding a unique identifier to each traversed text node in step (2) and the corresponding overall label generated after the text node is rendered in step (3); including:

[0049] (a) creating a unique identifier for each text node traversed in step (2), wherein the unique identifiers are not repeated;

[0050] (b) adding a unique identifier that is the same as the text node to the corresponding overall label generated after each traversed text node in step (2) is rendered in step (3);

[0051] (c) Each time a corresponding label is generated based on the rendering of a text node, a unique identifier of the text node is added to the label.

[0052] (5) Change text nodes or tags;

[0053] (6) directly locating the label or text node corresponding to the text node or label changed in step (5) through the unique identifier;

[0054] (7) performing differential rendering update on the label or text node located in step (6);

[0055] At this point, no matter changing cm to update vm, or changing vm to update cm, you can use the unique identifier to directly locate and then partially update, without using the mainstream diff algorithm to traverse and locate multiple times (for example, changing cm to update vm, the original diff needs to recursively traverse upward according to the modified cm until the root node stops, so as to determine its own hierarchical relationship, and then deduce to the corresponding vm node according to the hierarchical relationship for update operation, multiple traversals are very performance-consuming), thereby greatly improving the efficiency of differential rendering updates.

[0056] The above description is only an embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, replacement, etc. made within the spirit and principle of the present invention should be included in the scope of protection of the claims of the present invention.

Claims

1. A method for fast positioning and differential rendering update based on diff algorithm, characterized in that: The method adds a same unique identifier to all text nodes in the parsed and rendered text content and the corresponding overall tags generated by the text nodes after rendering and can be recognized by the browser. When the text nodes or tags are changed, the unique identifier is used to quickly locate the corresponding tags or corresponding text nodes that need differential rendering updates, and differential rendering updates are performed on them to generate a new view interface. The method comprises the following steps: (1) Obtain the text content that needs to be parsed and rendered; (2) Traverse the text content obtained in step (1); (3) Render each traversed text node in step (2) into a tag that the browser can recognize; (4) Add a unique identifier to each text node traversed in step (2) and the corresponding overall label generated after the text node is rendered in step (3), including: (a) creating a unique identifier for each text node traversed in step (2), wherein the unique identifiers are not repeated; (b) adding a unique identifier that is the same as the text node to the corresponding overall label generated after each traversed text node in step (2) is rendered in step (3); (c) Each time a corresponding label is generated based on the rendering of a text node, a unique identifier of the text node is added to the label; (5) Change text nodes or tags; (6) directly locating the label or text node corresponding to the text node or label changed in step (5) through the unique identifier; (7) Perform differential rendering update on the label or text node located in step (6).

2. The method for realizing fast positioning and differential rendering update based on diff algorithm according to claim 1, characterized in that: The text content described in step (1) is determined by the specific front-end framework language used. In the vue framework language, the template part is obtained, and in the react framework language, the render part is obtained. The function of the obtained text content is to render all or part of the structure of a specific web page.

3. The method for realizing fast positioning and differential rendering update based on diff algorithm according to claim 1, characterized in that: The traversal of the text content obtained in step (1) in step (2) refers to visiting each text node in the DOM tree structure in the text content obtained in step (1) in turn.

4. The method for realizing fast positioning and differential rendering update based on diff algorithm according to claim 1, characterized in that: The tags that the browser can recognize in step (3) refer to the document object model that the browser can recognize.

5. Use of the method for realizing fast positioning and differential rendering update based on the diff algorithm according to any one of claims 1 to 4 in front-end framework view processing technology.

Images