Method for rendering and incrementally updating webpages

Abstract

The invention relates to a method for rendering and incrementally updating webpages. The method comprises the following steps: (1) expressing a document object model (DOM) of a webpage to be rendered by using a tree-form data structure, wherein the attribute of DOM nodes is expressed by the attribute of nodes of a virtual DOM and the sub-nodes of the DOM nodes are expressed by a sub-node linear list of the nodes of the virtual DOM; (2) if a corresponding DOM tree does not exist, recursively traversing the virtual DOM, creating the DOM nodes according to the nodes of the virtual DOM, creating the sub-nodes of the DOM nodes according to the sub-node linear list and adding the DOM sub-nodes into a parent node of the DOM sub-nodes; and (3) if the corresponding DOM tree exists, recursively traversing the virtual DOM and the DOM tree at the same time and operating the nodes at corresponding positions in the virtual DOM and the DOM tree. According to the method, the DOM upgrading algorithm is greatly simplified, so that the code amount is decreased and better performance is obtained. The codes have relatively good readability, so that the learning cost of the developers is low and the code amount is decreased.

Description

technical field [0001] The invention relates to a method for rendering and updating a web page, in particular to a method for rendering and updating a web page in a browser client, and belongs to the technical field of web page rendering. Background technique [0002] In the past ten years, a large number of web sites have adopted client-side web page rendering to replace some or even all server-side web page rendering, with the purpose of reducing or eliminating full page refreshes and providing a faster user experience. For example, a JavaScript script embedded in a web page (running in the browser client) can actively request data from the server through the XMLHttpRequest interface, and then render and update the document object model (DOM) of the web page according to the obtained data, thereby changing the content presented to the user. interface. Almost all web pages are implemented in (X)HTML language, so its document object model is HTMLDOM, which will be referred ...

AI Technical Summary

Problems solved by technology

The problem with this is (1) It increases the complexity of the server-side code and limits the flexibility of the client-side JavaScript code

(2) Non-standard HTML text fragments may cause rendering errors or even security vulnerabilities

(4) The HTML text fragment is a whole, which can only replace a large part of the page as a whole, and it is difficult to achieve partial update

But the problems with template engines are: (1) In order to improve flexibility, template strings usually have their own programming structures, such as branches, loops, scope rules, etc., which is equivalent to requiring developers to learn a new language, and this This language lacks the support of programming tools, and it is difficult to debug and debug, which increases the development cost; (2) the output of the template is usually a whole, which can only replace a large part of the page as a whole, and it is difficult to achieve partial update

However, some current implementations, including React, also have some problems: (1) Calculating the difference data between two virtual DOM trees is relatively complicated. On the one hand, it may cause performance problems, and on the other hand, it also leads to a large amount of code in the rendering routine , and this will cause the initial loading of the page to be slow; (2) the creation of virtual DOM requires the use of specific routines or domain-specific languages ​​(DomainSpecificLanguage, DSL, JSX for React), the problem of the former is that the readability of the code is not good, and increases the amount of code, the latter has a similar problem to client-side templating engines: a new language is created

Images