Choose to figure out the four main steps of the web rendering process before recording optimized content:

1. Parse HTML to generate a DOM tree -The rendering engine first parses the HTML document and generates a DOM tree
2. Building the Render tree-Next, whether it is inline, external or embedded CSS The style will be parsed to generate a CSSOM tree, and another tree for rendering is generated based on the DOM tree and CSSOM tree-Render tree,
3. Layout Render tree-Then Perform layout processing on each node of the render tree and determine its display position on the screen
4. Draw the Render tree-Finally traverse the render tree and use the UI back-end layer to map each node Draw it out

The above steps are a gradual process. In order to improve the user experience, the rendering engine tries to display the results to the end user as quickly as possible. It does not wait until all HTML has been parsed before creating and laying out the render tree. It will display the received partial content first while obtaining the content of the document from the network layer.

Optimization ideas:

　　 In order to ensure the fastest display of the content on the first screen, resources need to be split, so what granularity should be Don’t split, different pages and different scenarios have different strategies. In order to achieve progressive page rendering

Optimize content:

1.html file content organization:

　　1.html file is stripped of css code and non-essential js code, try not to merge them together, after all, mixing of multiple codes will give you the management page code band Come a great burden. Moreover, the content of the html file will affect the loading speed of the html page.

　　2.html file to load css file

　　　　 only download files related to the first screen page layout, other css files and other css files are secretly downloaded or used after the game is launched Download again on the eve. Because the DOM tree generation process may be blocked by the loading execution of CSS during rendering The required files (such as the vconsole plug-in), other js files and other js files are secretly downloaded after the game is started or downloaded on the eve of use. Because the DOM tree generation process during rendering may also be blocked by the loading and execution of JS

　　　　 If the server supports merge requests, merge js and css requests. To improve performance. Because there is a certain limit on the number of requests under the same domain name, requests for the browser to download static files exceeding the limit will be blocked

Compress js, css, pictures

p>