What happens when you type a web address into the browser’s address bar?

Page load

  1. The browser obtains the IP address of the domain name from the DNS server.
  2. Send an HTTP request;
  3. The server receives, processes, and returns HTTP requests;
  4. The browser gets the content and starts parsing and rendering the page;

Page rendering

The general process is as follows:

  • Process HTML tags and build DOM trees
  • Process CSS tags and build CSSOM trees
  • Merge DOM and CSSOM into a render tree
  • According to the layout of the render tree, calculate the geometric information of each node, and then draw each node on the screen

Parsing Html: After the client sends a request and gets the Html document from the server, all it needs to do is parsing the document. Because the HTML document is a character stream, the first thing to do is to parse its tags. For THE parsing of HTML, through the state machine, the character stream is changed into several types of nodes, including the start of tags, attributes, end of tags, comments and CDATA nodes. After parsing, a DOM tree is formed.

Ps: How to maintain the relationship between nodes?

Parsing CSS: The parsing process of CSS is very similar to that of HTML.

Merge into a Render tree: Combine the DOM tree and the CSSOM tree to form a Render tree. PS: Not a simple merge, the Render tree contains only the nodes to be displayed and the corresponding style information. A node with display: None will not be merged into the Render tree.

Layout and Rendering

After the Render tree is formed, the browser will layout it accordingly. The browser basically calculates the exact position (coordinates) and size of each node on the page.

Question 1: What should I do if I encounter JS?

Browsers parse, load, and execute scripts synchronously. When a JS tag is encountered, its contents are parsed and executed immediately. At this point, it blocks the parsing of the document, waiting for the script to finish parsing and then re-parsing the HTML. HTML5 offers defer and Async to improve the process;

Defer: indicates that the JS file is delayed, that is, the HTML parsing will not stop when the JS is loaded. After the document has been parsed and drfer-script has been loaded, the content in defer-script will be executed and the DOMContentLoaded event will be triggered. Defer does not block HTML parsing when it loads and the execution is deferred to the DOM parsing.

Async: indicates that js is introduced asynchronously. It can be downloaded while rendering and executed when the download is complete. If the js is already loaded, it will execute immediately, whether the HTML parsing phase or the document parsing phase is finished, that is, it will still block the load event.

Problem 2: Repaint and Reflow

Redraw: When an operation on the DOM results in a style change that does not affect its geometry (color change, etc.), the browser simply rerenders the current DOM node without rearranging or rendering it.

Backflow: When we modify or manipulate the DOM to change the geometry of the DOM, the browser needs to recalculate the geometry of the node, and the position and geometry of other elements may also change, causing the page to be redrawn.

Backflow always causes redrawing, and redrawing does not necessarily cause backflow.

Problem 2.1: Operation causing backflow:

  • DOM node addition and deletion;
  • Node size change;
  • Element measurement (to obtain various width and height), rolling, etc.
  • Window size changes;

Problem 3: DOMContentLoaded and load events

DOMContentLoaded: indicates the event triggered after the HTML has been downloaded and parsed, without waiting for CSS and IMG to load completely;

Loaded: The load event is triggered when the entire page and all dependent resources such as stylesheets and images have finished loading.