Web page loading process
Enter the resource address (input in the address bar, page jump, page load) to initiate a request
==> the browser finds whether there is a local cache available (search its own DNS cache-search the operating system's own DNS cache-read the local HOST file)
==>The browser initiates a resolution request to the DNS server
==> The domain name resolution server queries the IP address (check the cache first, the cache does not iteratively send the request query to the operator, and the query result is cached locally and then the result is returned layer by layer)
= => After the browser gets the IP address, it initiates a TCP request to complete the three-way handshake
==> The browser sends an HTTP request to ask for the web page creation port
==> The server listens to the request and returns the corresponding status and content
==> The browser gets it back Parse HTML into DOM tree after content; render tree structure; layout rendering tree, drawing rendering tree
After the browser gets the returned content, the detailed process of analyzing the webpage
==> The browser receives the HTML template file, and starts to parse the HTML from top to bottom and from left to right;
==> If it encounters a css file, the browser stops parsing the HTML at this time, and then requests the CSS file; server side Returning to the CSS file, the browser starts to parse the CSS. After the browser parses the CSS, it will continue to parse it
==> If the browser finds an img, it will send a request to the server. At this time, the browser will not wait until the picture is downloaded, but will continue to render the code behind;
==>The server returns the picture file, because the picture occupies a certain area and affects the page layout, so the browser needs to go back and re-render this Part of the code;
==> If you encounter a script file, stop all loading and parsing at this time, request the script file, and execute the script;
==> After loading all the HTML, CSS, and JS, the page appears on the screen
Note: Different browsers handle CSS and HTML in different ways. Some browsers wait for CSS to load before rendering and displaying HTML elements (white screen problems will occur). Some are to display the HTML elements first, and then wait for the CSS to load and then modify the style again (the FOUC unstyled content flickers will appear)