[note] JavaScript advanced programming-using JavaScript in HTML

First, <script> elements

The main way to insert JavaScript like an HTML page is to use the <script> element. HTML4.0.1 defines the following 6 properties for <script>.

• Async: Optional. Indicates that the script should be downloaded immediately, but should not interfere with other actions on the page, such as downloading additional resources or waiting for other scripts to load. Valid only for external scripts.
• CharSet: Optional. Represents the character set of the code specified by the SRC attribute.
• Defer: Optional. Indicates that the script can be deferred until the document is fully parsed and displayed before execution. Valid only for external scripts.
• SRC: Optional. Represents the external file that contains the code to execute.
• Type: Optional. Represents the content type (also known as the MIME type) of the scripting language in which the code is written.

The <script> element with the SRC attribute should not contain additional JavaScript code between its <script> and </script> tags. If embedded code is included, only the external script file is downloaded and executed, and the embedded code is ignored.

Add: The difference between defer and async:

1) <script src= "Script.js" ></script>

Without defer or async, the browser immediately loads and executes the specified script, "immediately" before rendering the document element under the script tag, i.e. not waiting for subsequent loaded document elements to be loaded and executed as read.

2) <script src= "Script.js" ></script>

With async, the process of loading and rendering subsequent document elements will be performed in parallel with the loading and execution of script.js (async).

3) <script src= "Script.js" ></script>

With defer, the process of loading subsequent document elements will be parallel (asynchronous) to the script.js load, but the execution of the script.js is done before the domcontentloaded event fires after all element parsing is complete.

Then, from the perspective of use, it is best practice to first drop all scripts before </body>, because this is the only optimization option for older browsers, which guarantees that all other elements of non-scripting can be loaded and parsed as quickly as possible.

Second, <noscript> elements

The <noscript> element was created to solve the problem of how the page degrades smoothly when the browser does not support JavaScript. The contents of the <noscript> element are displayed in the following cases:

• The browser does not support scripting;
• The browser supports scripting, but the script is disabled.

[Notes] JavaScript advanced programming-using JavaScript in HTML