The main method of inserting JavaScript into HTML

Graph TD A[<script> element] --> B[async] A --> C[Charset] A --> D[defer] A --> E[language] A --> F[SRC] A --> graph TD A[<script> element] --> B[async] A --> C[charset] A --> D[defer] A --> E[language] A --> F[SRC] A --> G [the type attribute]

Charset and languase are ignored in most cases. Async Optional: Downloads the script immediately without interfering with other operations on the page. The optional expression defer downloading the script until the page has been downloaded and displayed. SRC Optional embedded external script code. Type Optionally indicates the content type (also known as MIME type) of the scripting language in which the code is written. Default text/javascript

2. SCR contains external code files. Javascript code contained within 

<script type="text/javascript">
    function hlwd(){
        alert('hellow word')
    }
</script>
Copy the code

The interpreter interprets the function definition and stores it in its own environment. The rest of the page is not loaded and displayed by the browser until all methods in javascript have executed. After the front-end framework creates the virtual Dom mount, the browser displays the Dom

Dom tree building example
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Width =device-width, initial-scale=1.0"> <title>Document</title> <! -- <script src="./js.js" async></script> --> <! Append undefine is reported if async or defer properties are not added here. This is because the DOM node was not obtained because js blocks. The body below has not built the DOM tree yet, so not getting the added properties is equivalent to adding the introduced code to the end Preloaded or downloaded by the browser's preloaded scanner --> </head> <body> <div>1111</div> <! - the Dom tree of the < body > < div > 1111 < / div > < / body > -- > < script defer > document. The getElementsByTagName (' body ') [0]. Append (' 3333 ') </script> <! - for blocking reason at this time of the Dom tree for the < body > < div > 1111 < / div > < / body > so the document. The getElementsByTagName (' body ') to the Dom tree for the above content so Append () now adds content to the Dom tree after 1111: <body> <div>1111</div> <div>3333</div> </body> --> <div>2222</div> <! - now the Dom tree for the < body > < div > 1111 < / div > < div > 3333 < / div > < div > 2222 < / div > < / body > -- > < / body > < / HTML >Copy the code
Summary copy

To insert JavaScript into an HTML page, use the

  1. When you include an external JavaScript file, you must set the SRC property to the URL pointing to the file. This file can be on the same server as the page that contains it, or it can be in any other domain. \
  2. all<script>Elements are parsed in the order in which they appear on the page. Without the defer and async properties, only before parsing is complete<script>After the code in the element, parsing begins<script>Element. \
  3. The browser will finish parsing first without using the defer attribute<script>Element, and then parse the rest of the content, so you should generally put<script>Elements are placed at the end of the page, after the main content,</body>Before the label. \
  4. Use the defer attribute to let the script execute after the document is fully rendered. Deferred scripts are always executed in the order in which they are specified. \
  5. The async property allows you to indicate that the current script does not have to wait for other scripts or block document rendering. There is no guarantee that asynchronous scripts will be executed in the order in which they appear on the page. \

In addition, use the