What happens when you enter the URL from the browser until the page loads? This is a very classic interview question, you can learn the basic knowledge of a web front-end engineer. As a front end with a very deep posture, I have asked many people during interviews and have also been asked by many people. Now sort it out.
Put the elephant in the refrigerator in the following steps:
1. DNS resolution (what do you say? Do not understand, translate it!)
2. TCP link (3 times handshake confirmation, security check.)
3. The client sends an HTTP request (arrange the articles with clear structure, request line, request header, and request body)
4. The server accepts the request and returns a response message (hi, customer, reply to you, status code, response header, response message)
5. Browser parsing and rendering page (DOM tree parsing (html), CSSOM tree parsing, generating Render rendering tree, Layout layout, drawing)
6. End the connection
It was found that in the fifth step of closing the elephant in the refrigerator, it is very time-consuming. Optimize it and set it:
1. DOM (html) optimization (static resources use CDN cache; reduce the dom level, do not nest too deeply; image compression, merge.)
2. CSS optimization (more refined public styles; selector specification naming; try to avoid inline styles;)
3. JS optimization (JS files are loaded at the bottom of the page; merge JS files to reduce http requests; delay loading defer; asynchronous loading async; dynamically create script tag loading;)