Basically, the frequency of all surface meridians is summarized

I. Why is the script tag placed at the bottom of the body tag? [defer async]

When the browser renders HTML, it performs from top to bottom. When it encounters a JS file, it will stop rendering the current page and download the JS file instead. If the script tag is placed in the head, the first screen time will be prolonged if the file is too large, affecting the user experience. Solutions:

  1. Place the script tag at the bottom of the body
  2. Convert the JS file to an asynchronous download via the defer\async property

The difference between defer\async is that the JS file can be downloaded asynchronously. The difference between defer and async is that it has to wait for the entire document to be rendered before executing, while async will pause the HTML parsing and proceed to js execution after downloading

A picture is worth a thousand words:

That is to say, the processing of the download is the same as that of the download, mainly because the execution time is different. The async execution still blocks the HTML parsing, and defer is arranged to execute at the end. In addition, if both properties are set at the same time, async prevails.

The difference between SRC and href

Href is a hypertext reference that points to the location of the resource and establishes an association with the target file. Href does not block the processing of the document (this is the official recommendation to use link instead of @import). SRC blocks the processing of the document

Some other important conclusions:

  • The

  • This

    The tag that precedes this

  • Inline

  • The tag does not block DOM parsing;

  • The tag blocks DOM rendering;

  • The tag also blocks subsequent ones

DOCTYPE tags

The purpose of this declaration is to prevent browsers from switching to what we call “weird mode” when rendering documents. “To ensure that the browser renders according to the best relevant specifications, rather than using a non-conforming rendering mode. Doctype is declared at the beginning of the document and tells the browser how to render the page. There are two modes, strict mode and hybrid mode. Strict mode typesetting and JS mode of operation are run to the highest standards supported by the browser.

Promiscuous mode, backward compatibility, emulates older browsers and prevents browsers from not being compatible with pages.