Page loading process
The DNS
- Browser DNS Cache
- Local host file cache
- The DNS server
- The root server
Communicates with the server
- TCP connection (three times handshake four times disconnection)
The data processing
- Response status code
- The content-type Type
Apply colours to a drawing
- Parsing the HTML generates a DOM tree
- Parsing CSS generates A CSSDOM
- Load or execute (async and defer)JavaScript scripts
- Generate render tree
- Render (redraw once)
What are async and defer for? What’s the difference?
- There are no marks
Loading the script and executing it immediately blocks HTML parsing.
- Defer tag
This Boolean property is set to inform the browser that the script will be executed after the document has been parsed and before the DOMContentLoaded (en-US) event is triggered.
- Async tag
- For normal scripts, if the async property is present, the normal script is requested in parallel and parsed and executed as soon as possible.
- For module scripts, if the async property is present, the script and all its dependencies are executed in the delay queue, so they are requested in parallel and parsed and executed as soon as possible.
- This property eliminates parsing blocking Javascript. Parsing blocked Javascript causes the browser to have to load and execute the script before parsing can continue.
Contentload and load
- The DOMContentLoaded event is fired after the initial HTML document has been fully loaded and parsed, without waiting for the stylesheet, image, and subframe to be fully loaded.
- The Load event is triggered when the entire page and all dependent resources such as stylesheets and images have finished loading.
