Detail script tag in HTML (with code)

This article brings the content is about the details of the HTML script tag (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Script element

The main way to use the "javascript" language in an HTML page is to use the script element, where the code inside the script element executes from top to bottom.

When multiple script elements are introduced, the browser parses the script element in its order in the page, and when the previous parsing is complete, the contents of the next SCRIPT element

Two ways to use Javascript in HTML

The first method: use JavaScript directly within the tag <script>    console.log (' first method of Use '); </script>//the second method: referencing an external file <script Src= "Example.js" ></script>

The properties of the script element

The script element compares several commonly used properties

• SRC: optional, for referencing external JavaScript files

• Type: Optional, write code to use scripting language types (also MIME type), default value is Text/javascript

• Async: Optional, asynchronous load script, valid only for external script files

• Defer: Optional, deferred script loading, executed after the document is fully parsed, valid only for external script files

The location of the script element in HTML

Because the "javascript" language is a single-threaded language, only one task can be performed at the same time, so the next task can be performed only after the last task is completed, resulting in different results for the script element in the HTML position.

All script elements are placed in the

This practice means that we have to wait for all JavaScript code to finish before we can start to show the content of the page, and if the page has a lot of JavaScript code, this method will cause us to see the page loading is very slow, the user experience is very poor, so to optimize it? It's actually very simple.

<! DOCTYPE html>
All script elements are placed behind the page content

Optimization of the above mentioned page load slow problem, only need to put the Javascript code we use to the content of the page, so that the page will load the content and then reality, then to execute the Javascript code, so that the user will not wait for a long time to display the content of the page.

<! DOCTYPE html>
Delayed loading of scripts

How the script performs lazy loading, which takes advantage of the defer property of the script element, when the element uses the defer attribute, the script is deferred until the entire page parsing is complete.

Code//console.log (' example1 ') in Example1.js,//console.log (' content '), code in document.getElementById Console.log (' example2 ');//console.log (document.getElementById (' content ')); <! DOCTYPE html>
You will send the console will print the following results when you do not join the Defer property

Example1nullexample2null
When you add the defer attribute to an element, the result changes and you can see that the Javascript code executes after the content of the P element is loaded.

Example1<div id= "Content" > the contents of this page </div>example2<div id= "Content" > the contents of this page </div>
Asynchronous loading of scripts

The asynchronous loading of scripts, which uses the script element to the Async property, is similar to the Defer property, which modifies the load behavior of the script element, but the Async property does not affect the other loading of the page, does not block document rendering, and the script with the async attribute does not guarantee that they will execute Order, which differs from the defer attribute.

In other words, Example2.js code might be executed before the code in Example1.js, so when using the async attribute, avoid two JS interdependencies.

<! DOCTYPE html>
NoScript elements

The problem with early browsers is that when browsers don't support JavaScript, how to display page content, the solution is to create a noscript element that can display content in browsers that do not support JavaScript and will only Content in Javascript is not displayed in the browser.

<!    DOCTYPE html>