First, defer and Async are two properties of the Script tag that control how JS is loaded, and both control how js is loaded asynchronously without blocking parsing and rendering of the DOM tree.

The differences are as follows:

  1. Defer, after DOM parsing is complete and before the DOMContentLoaded event is triggered, or in order if there are more than one
  2. Async is executed immediately after js is loaded. If there are more than one async, the execution order cannot be guaranteed. The async is executed before loaded event is triggered.

The page rendering process is as follows:

  1. The browser parses HTML text while downloading and builds a DOM tree.
  2. If external resources are parsed, they will be handed over to the network thread for downloading. If external CSS resources are parsed, parsing and building the DOM tree will not be blocked directly. If external JS resources are not deferred and async properties, parsing and building the DOM tree will be blocked until js is downloaded and executed.
  3. When an outbound JS is blocked, the browser will start a lightweight thread to continue scanning and, if there is an external link, download it in advance.
  4. If you encounter inline CSS, parse directly and build CSSOM. Parsing CSS does not block building the DOM tree
  5. If you encounter an inline JS, execute first and build the DOM later
  6. If CSS is not downloaded before JS execution, js execution will be blocked, thus blocking DOM tree construction
  7. CSSOM and DOM build the render tree
  8. Calculate the layout
  9. Layering and drawing

The rendering process is pipelined, not done in one step and then done in the next.