Research on script tags in HTML_html/css_WEB-ITnose

Script's blocking feature

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. - MDN

the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed. In fact, most browsers use a single process for both user interface ( UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input. - Nicholas C. Zakas "High Performance JavaScript 》

The meaning of the two quotes quoted above is roughly that when the browser parses the DOM document, it will download and execute it immediately once it encounters the script tag (without defer and async attributes). The browser's parsing of the document will stop until the script code is executed. On the one hand, this blocking behavior occurs because the browser's UI rendering, interactive behavior, etc. are single-threaded operations. On the other hand, the code in the script may affect the parsing of subsequent documents, such as the following code:

html<script type="text/javascript">  document.write("The date is " + (new Date()).toDateString());</script>

This blocking feature will seriously affect the user experience. Here are several optimization solutions:

• Try to put the script at the back of the document to reduce the blocking of the document. It is best to put in front of