CN115905761A - Method for improving rendering performance of browser - Google Patents

Abstract

The invention discloses a method for improving rendering performance of a browser, which comprises the following steps: when a browser loads a page for the first time, after loading the DOM tree and the Render tree, storing the Render tree, and generating a new Render model by combining the model; when DOM operation and other actions which can trigger Layout are executed, the operations are prevented, a Render model is converted into a specific Render updating action and is stored in a queue, after all the operations are converted at the stage, the Render tree in the cache is modified and the difference is compared, an updating patch is generated and synchronized to the Render tree, and Layout is carried out once. The invention has the beneficial effects that: the loading speed of the first screen can be greatly improved, and the compatibility is stronger.

Description

Method for improving rendering performance of browser

Technical Field

The invention relates to the field of browser performance rendering, in particular to a method for improving browser rendering performance.

Background

The browser is responsible for loading and displaying the webpage and is a rendering engine, webKit, gecko and the like are commonly used, and the process of loading the webpage by the browser is as follows: and analyzing the HTML file, generating a DOM (Document Object Model), analyzing the style and combining the DOM tree, calculating layout information of each node of a Render tree, and drawing according to the Render tree and combining a UI layer of a browser.

And (4) adjusting layout, typesetting and redrawing, namely layout, typesetting and redrawing, when HTML, JS and CSS are loaded. Normally, the layout of the browser is lazy to load, the DOM cannot be updated actively, any modification operation on the DOM is placed in a temporary storage queue, and the layout is modified once according to the modification of the queue after the execution context of the current JS is completed. However, sometimes, it is desirable to obtain the latest DOM node information in JS (Java Script) at once, and the browser has to perform layout and redraw in advance, i.e. perform layout again, which is a main reason for DOM performance.

The following operations may advance execution of layout: acquiring DOM attribute nodes needing to be calculated through JS, adding and deleting the DOM nodes, resize the window size of a browser, changing font styles, activating CSS pseudo-classes, directly modifying DOM element styles through JS, changing the sizes and the like.

In the prior art, a frame with a virtual DOM is adopted to develop in a development stage, such as vue and exact frames, and the mode adopts a data-driven mode to modify the mode of operating the DOM into the mode of operating the virtual DOM (data). However, this solution requires loading a virtual DOM in addition to the DOM during loading, which results in additional performance consumption for initial loading and slow initial screen loading. But it cannot solve the problem of the project which has been developed and is not developed by using the frame, such as the HTML project developed by Jquery. Meanwhile, there are technical barriers for the projects developed in different languages, and the goal of layout optimization can be achieved only by maintenance of engineers who correspondingly master the language.

Disclosure of Invention

Aiming at the technical problems of multiple layout operations and slow first screen loading speed in the prior art, the method for improving the rendering performance of the browser is provided, and the method mainly aims at optimizing the layout, and comprises the following steps:

s1: when a browser loads a page for the first time, loading a DOM tree and a Render tree, and storing an original Render tree to generate a new Render model;

s2: monitoring modification operation on the DOM tree;

s3: when the modification operation can trigger the redrawing action of the webpage, the layout action is prevented;

s4: converting the current modification operation into an updating action of a Render tree by using a Render model, storing the updating action into a queue, and updating the Render model;

s5: continuing to monitor the subsequent modification operation of the DOM tree, judging whether the subsequent modification operation has the same attribute modification with the previous modification operation, if so, repeating the steps S3-S4, integrating the modifications with the same attribute, and entering the step S6; otherwise, directly entering step S6;

s6: and changing the original Render tree in a node replacement mode by using the updated Render model, and performing webpage redrawing layout operation once.

The beneficial effects provided by the invention are as follows:

1. the developed projects do not need to be modified, and the Render Model tree for each project can be generated only by expanding and introducing the monitoring operation Model on the basis. And when DOM operation or other operations of starting layout are carried out, the operations are stopped, converted into corresponding Render changes and stored in a queue, after all the operations are completed in the stage, a new Render tree is generated, and the layout is updated once after the comparison with the original Render.

2. The traditional scheme is very slow in first screen loading, and when the scheme is loaded for the first time, the Render information of the scheme is collected after the first loading is finished, so that the first screen loading is not influenced.

3. The compatibility is strong, the traditional scheme has technical barriers and high learning cost, and a project developed by using vue needs to be maintained by a technician who needs to master vue, so do other frameworks such as exact. According to the scheme, no matter js item or jquery item, the trigger layout related operation can be optimized as long as the trigger layout related operation is carried out on the js item or the jquery item.

Drawings

FIG. 1 is a schematic flow diagram of the process of the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, embodiments of the present invention will be further described with reference to the accompanying drawings.

Before explaining the present solution, the related concepts are explained in a unified way as follows.

(1) DOM tree: the DOM (Document Object Model), which is a Document Object Model, is a standard interface specification made by the W3C, and is a standard API for processing HTML and XML files. The DOM provides an access model to an entire document as a tree structure, with each node of the tree representing an HTML tag or text item within a tag. The DOM tree structure accurately describes the interrelationship between the tags in the HTML document. The process of converting an HTML or XML document into a DOM tree is called parsing. The HTML document is converted into a DOM tree after being analyzed, so that the HTML document can be processed through the operation of the DOM tree. The DOM model not only describes the structure of the document, but also defines the behavior of the node object, and the nodes and the content of the DOM tree can be conveniently accessed, modified, added and deleted by using the method and the attribute of the object;

(2) Render tree: further obtaining a DOM tree, wherein nodes of the DOM tree can be divided into visual nodes and non-visual nodes; such structural label nodes as div, p, etc. are called visualization nodes; nodes such as script, meta, and the like which cannot be displayed on a page are called non-visual nodes; the Render tree is a tree generated by combining the visual nodes and the CSS style sheet;

(3) The process of rendering the UI by the browser comprises the following steps:

the browser acquires an HTML file, and then analyzes the file to form a DOM tree;

meanwhile, CSS analysis is carried out to generate Style Rules;

then synthesizing the DOM Tree and Style Rules into a Render Tree;

the elements are laid out in the page and then layout is drawn.

Referring to FIG. 1, FIG. 1 is a schematic flow chart of a method according to the present invention; a method for improving the rendering performance of a browser comprises the following steps:

s1: when a browser loads a page for the first time, loading a DOM tree and a Render tree, and storing an original Render tree to generate a new Render model;

as an example, the contents of an HTML document such as a loaded page are as follows (this application provides some source code for illustration and facilitates illustration):

<divid＝"ele1"style＝"width:50px；height:50px">1</div>

<div id＝"ele2"style＝"width:50px；height:50px">2</div>

<div id＝"ele3"style＝"width:50px；height:50px">3</div>

three document partitions are defined, namely ele1, ele2 and ele3, and the preliminary style of the three document partitions is 50 pixels wide and 50 pixels high;

s2: monitoring modification operation on the DOM tree;

in the application, the DOM change is monitored by a MutationObserver method; the MutationObserver is a web interface provided by a modern browser and used for detecting DOM changes, and can be used for monitoring addition or deletion of nodes, attribute changes, or content changes of text nodes.

The following is listening to a portion of the operation source code of the DOM tree for reference:

stopping monitoring:

mutationObserver.disconnect()；

s3: when the modification operation can trigger the redrawing action of the webpage, the layout action is prevented;

it should be noted that the following modification operation may advance execution of layout:

(1) Acquiring DOM attribute nodes needing to be calculated through JS;

(2) Adding and deleting DOM nodes;

(3) The window size of resize browser;

(4) Changing the font style;

(5) Activating a CSS pseudo class, directly modifying the DOM element style through JS and changing the size;

(6) Others may result in executing the layout form ahead of time;

the foregoing is by way of example only and is not exhaustive;

when the traditional scheme is used, the corresponding JS part code is as follows:

(1)

const ele1＝document.getElementById('ele1')

const ele2＝document.getElementById('ele2')

const ele3＝document.getElementById('ele3')

(2)

//layout

var h1＝ele1.clientHeight；

console.log("file:index.html～line 28～h1",h1)

(3)

//Recalculate Style

ele1.style.height＝(h1*2)+'px'；

(4)

//layout

var h2＝ele2.clientHeight；

(5)

//Recalculate Style

ele2.style.height＝(h2*2)+'px'；

(6)

//layout

var h3＝ele3.clientHeight；

(7)

//Recalculate Style

ele3.style.height＝(h3*2)+'px'；

in the above code segment, the (1) th section means: defining a constant ele1 for accessing a (partition) element ele1 in the HTML; similarly, ele2 and ele3 are used to access (partition) elements ele2 and ele3 in the HTML, respectively;

among the above code segments, the term (2) means: performing initial layout, drawing a paragraph h1, setting the height of the h1 as the height of a partition element ele1, and outputting corresponding information in a console program;

among the above code segments, the term (3) means: changing the style again, and changing the height of the partition element ele1;

similarly, in the above code segment, the sections (4) and (5) mean: performing a second layout to change the height of the partition element ele 2; the terms (6) and (7) mean: performing a third layout to change the height of the partition element ele3;

that is, in the process of the conventional scheme, the style of one element is changed, for example, the code in section (2) is changed, h1 is changed, and then the clientHeight attribute of another element is read, the current DOM is marked as dirty due to the previous modification, and in order to ensure that this attribute can be accurately obtained, the browser makes a layout for each other relevant element. That is, one modify operation, a total of three layout operations are performed.

In the present application, for example, the modification operation is as above, the height of the partition elements ele1, ele2, ele3 is modified, and the layout operation is not performed or is blocked; it should be noted that the layout prevention operation prevents the element from triggering the layout by separating the element from the document stream; because the layout operation is triggered by the modification described above; preventing layout, for example, setting div style to 'display: none', namely not triggering layout;

s4: converting the current modification operation into an updating action of a Render tree by using a Render model, storing the updating action into a queue, and updating the Render model;

s5: continuing to monitor the subsequent modification operation of the DOM tree, judging whether the subsequent modification operation has the same attribute modification with the previous modification operation, if so, repeating the steps S3-S4, integrating the modifications with the same attribute, and entering the step S6; otherwise, directly entering step S6;

it is assumed in the present application that no subsequent modification operation is performed, or that the subsequent modification operation is still a high modification of the partition elements ele1, ele2, ele3; the last step is entered directly.

As an example, the modified JS code is as follows:

const ele1＝document.getElementById('ele1')

const ele2＝document.getElementById('ele2')

const ele3＝document.getElementById('ele3')

ele1.style.height＝(h1*2)+'px'；

ele2.style.height＝(h2*2)+'px'；

ele3.style.height＝(h3*2)+'px'；

s6: and changing the original Render tree in a node replacement mode by using the updated Render model, and performing webpage redrawing layout operation once.

The operation of node replacement is explained as follows:

a backup is created for the modified node and the copy is then manipulated, and once the manipulation is completed, the old node is replaced with the new node.

var oldNode＝document.getElementById('ele1')；

var clone＝oldNode.cloneNode(true)；

el(clone,data)；

oldNode.parentNode.replaceChild(clone,old)；

As an example, the original HTML page content essence is converted into:

<divid＝"ele1"style＝"width:50px；height:100px">1</div>

<div id＝"ele2"style＝"width:50px；height:100px">2</div>

<div id＝"ele3"style＝"width:50px；height:100px">3</div>

at this time, the transformation of all elements can be completed simultaneously by directly performing layout once.

That is, by the method of the application, all the node attributes are changed at one time, and finally, the redrawing operation can be completed only by one time of layout, so that the number of times of layout is reduced as a whole.

The beneficial effects of the invention are: compared with the prior art, the method has the advantages that the first screen loading speed can be greatly increased, the compatibility is stronger, the front-end projects which are not developed by using frames such as vue are compatible, and the performance of the developed projects is improved without reconstruction. The method is high in universality, and the layout can be optimized by using the method as long as the HTML project developed by JS language is adopted. The maintenance cost is low, and technicians who master languages such as vue do not need to optimize. The frames of vue, act and the like do not prohibit the dom operation, and the situation of multiple layout is reduced or avoided only by an appointed mode, so that hidden danger exists.

The above description is only for the purpose of illustrating the preferred embodiments of the present invention and should not be taken as limiting the scope of the present invention, which is intended to cover any modifications, equivalents, improvements, etc. within the spirit and scope of the present invention.

Claims (1)

1. A method for improving rendering performance of a browser is characterized by comprising the following steps: the method comprises the following steps:

s1: when a browser loads a page for the first time, loading a DOM tree and a Render tree, and storing an original Render tree to generate a new Render model;

s2: monitoring modification operation on the DOM tree;

s3: when the webpage redrawing layout action is triggered by the modification operation, the layout action is prevented;

s4: converting the current modification operation into an updating action of a Render tree by using a Render model, storing the updating action into a queue, and updating the Render model;

s5: continuing to monitor the subsequent modification operation of the DOM tree, judging whether the subsequent modification operation has the same attribute modification as the previous modification operation, if so, repeating the steps S3-S4, integrating the modifications with the same attribute, and entering the step S6; otherwise, directly entering step S6;

s6: and changing the original Render tree in a node replacement mode by using the updated Render model, and performing webpage redrawing layout operation once.

Images