Page resolution process:
After the browser requests the HTML document from the server, it begins to parse; as:
The browser compiles the html file into a structure similar to the following:
The browser will analyze the converted data structure from top to bottom: first open the download thread, and prioritize all resources for download;
At the same time, the main thread will parse the document, and the parsing process:
For HTML parsing, the result is DOM, if there is CSS, cssOM (CSS object model) is generated, and then the DOM and CSSOM are combined to produce a rendering tree, with the rendering tree, the style of all nodes is known, and then they can be calculated according to these nodes and styles in the browser the exact size and position, this is the layout stage; with the above information, you can draw the nodes to the browser; all the processes are shown in the following figure:
Since browsers use streaming layouts, calculations to Render Tree usually only need to be traversed once to complete, with the exception of tablets and their inner elements, which can require multiple calculations and usually take 3 times as long as equivalent elements, which is one of the reasons why you should avoid using a table layout;
Reflow reflow:
When part (or all) of the render tree needs to be rebuilt because of changes in the size, layout, or hiding of elements, this is called reflow; when reflowing, the browser invalidates the affected part of the render tree and reconstructs this part of the render tree; after the reflow is completed, the browser redraws the affected part into the screen, a process called repainting;
Repaint:
When some elements in the realer tree need to update properties, and these properties only affect the appearance of the element, not the layout, such as color, this is called repainting;
Optimization method: CSS optimization:
Use transformer instead of top;
Using visibility instead of display:none;
Avoid using table layouts;
Change the class at the lowest end of the DOM tree as much as possible;
Avoid setting multi-layer inline styles;
JavaScript Optimizations:
Avoid frequent manipulation of styles;
Avoid frequent manipulation of the DOM;
Avoid frequent reading of properties that can cause reflow and redrawing;
JavaScript can block the generation of the DOM, that is to say, when the browser parses the HTML document, if it encounters < script >, it will stop parsing the HTML document and go to process the script; if the script is inline, the browser will first execute the inline script, if it is an external link, then it will load the script first, and then execute; after processing the script, the browser will continue to parse the HTML document;
The codes .js app1.js and app2 are:
In addition, because JavaScript can query the style of any object, it means that JavaScript can only be executed after CSS parsing is completed, that is, AFTER CSSOM is generated;
Synchronous and asynchronous scripts:
Synchronization scripts can block the parsing of pages;
If it is a synchronization script (i.e. without async or defer), such as:
When the HTML document is parsed, if you encounter a (synchronous) script, stop parsing, load the script first, then execute, and continue parsing the HTML document after the execution is over, as shown in the following figure:
Asynchronous scripts:
HTML5 defines two methods for asynchronous scripting: defer and async;
Asynchronous scripts async and defer properties only work on external scripts, and they are automatically ignored when src is not present; they both tell the browser to continue working on the content on the page, and the document parsing process is not interrupted, so the script does not block the construction of the DOM tree and the rendering of the page;
Defer script, indicating that the script can be deferred until the document is fully parsed and displayed before execution; if the defer script is encountered during the HTML parsing process, the script is loaded in the background, and after the document parsing is over, the defer script is executed, as shown in the following figure:
defer and DOMContentLoaded:
The defer script does not affect the parsing of the HTML document and will not be executed until the HTML parsing is complete, while the DOMContentLoaded will only be triggered after the execution of the defer script is completed; if there is a CSSOM, the script must wait for the CSSOM build to complete, and after the execution is completed, the DOMContentLoaded event is triggered;
But there are two scenarios for the defer script:
One case is that when the HTML has not been parsed, the defer script has been loaded, then the defer script will wait for the HTML parsing to complete before executing, and the DOMContentLoaded event will be triggered after the defer script is executed, such as:
Another case is that when the HTML parsing is complete, the defer script has not yet been loaded, then the defer script continues to load, executes directly after the loading is completed, and triggers the DOMContentLoaded event after the execution is completed, such as:
async script, which means downloading the script immediately, but should not hinder other operations in the page; if a defer script is encountered during the HTML parsing process, the script is loaded in the background, and after the script load is completed, the document stops parsing, the script executes, and the document continues to parse after the execution ends; as shown in the following figure:
The execution of async after the download is completed will block the parsing of HTML;
async with DOMContentLoaded:
async's scripts will certainly be executed before the load event, and may be executed before or after DOMContentLoaded; async's scripts are not guaranteed to be executed in the order in which they are specified, so async is used on scripts that do not rely on other scripts at all;
There are also two cases for async scripts:
The first case: when the HTML has not been parsed, the async script has been loaded, then the HTML stops parsing, goes to execute the script, and the DOMContentLoaded event is triggered after the script is executed, such as:
The second case: after the HTML parsing is finished, the async script is loaded, and then the script is executed, then the DOMContentLoaded event will be triggered when the HTML parsing is complete and the async script has not been loaded, as shown in the figure:
Async and defe also have a difference in execution order: async scripts are prioritized to execute scripts that are loaded first, and their order in the page does not affect the order in which they are executed, while the defer scripts will be executed in the order in which they appear on the page;
DOMContentLoaded and load:
In the console's network, the blue line is the ContentLoaded time, the red line is the Load time, and correspondingly, in the bottom overview section, there is also a blue marker "DOMContenLoaded 1.2s" that describes the time when the DOMContentLoaded event was triggered, and the "Load: 3.60s" marked in red describes the specific time when the load event was triggered;
One of the means of page optimization is to put css at the head and JS files at the tail; the reason is that because the browser reads the HTML code line by line when generating the DOM tree, < the script > tag at the end will not affect the rendering of the preceding page;