table of Contents
1 The way to use script
There are two ways to use <script>: directly embed JavaScript code in the web page through it, and use it to include external JavaScript files in the web page.
1.1 Embedding JavaScript code in web pages
To embed inline JavaScript code, put the code directly in the <script> element.
<script>
function sayHi(){
console.log("Hi");
}
</script>
When using inline JavaScript code, pay attention to the string <script> not appearing in the code. For example, the following code will cause the browser to report an error:
<script>
function sayScript(){
console.log("</script>");
}
</script>
The way the browser parses the inline script determines that when it sees the string <script>, it will treat it as an ending <script> tag. To avoid this problem, you only need the escape character "":
<script>
function sayScript(){
console.log("<\/script>");
}
</script>
After such modification, the code can be fully interpreted by the browser without causing any errors.
1.2 The web page contains external JavaScript files
To include JavaScript in external files, you must use the src attribute. The value of this property is a URL pointing to a file containing JavaScript code, such as:
<script src="example.js"></script>
This example loads an external file named example.js on the page. The file itself only needs to include the JavaScript code to be placed between the start and end tags of <script>. In addition, the <script> element that uses the src attribute should no longer contain other JavaScript code in the <script> and </script> tags. If both are provided, the browser will only download and execute the script file, ignoring the inline code.
After importing external files, the browser will cache all externally linked JavaScript files according to specific settings, which means that if the same file is used in both pages, the file only needs to be downloaded. This ultimately means that the page loads faster.
2 Label position
No matter what code is included, the browser will interpret them in the order of <script> on the page, provided that they do not use the defer and async attributes. The code of the second <script> element must be explained before the code of the first <script> element is explained, the third must wait until the second is explained, and so on.
async: optional. Indicates that the script should be downloaded immediately, but other page actions cannot be prevented, such as downloading resources or waiting for other scripts to load. Only valid for external script files.
defer: Optional. Indicates that the script can be delayed until the document is completely parsed and displayed. Only valid for external script files.
In the past, all <script> elements were placed in the <head> tag of the page, as shown in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="example1.js"></script>
<script src="example2.js"></script>
</head>
<body>
</body>
</html>
The main purpose of this approach is to put the external CSS and JavaScript files together. However, putting all JavaScript files in the <head> means that all JavaScript codes must be downloaded, parsed and interpreted before the page can be rendered (the page is parsed in the browser to the start tag of the <body> To start rendering). For pages that require a lot of JavaScript, this can cause a significant delay in page rendering, during which the browser window is completely blank. To solve this problem, modern web applications usually place all JavaScript references behind the page content in the <body> element, such as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这里是页面内容 -->
<script src="example1.js"></script>
<script src="example2.js"></script>
</body>
</html>
In this way, the page will completely render the page before processing the JavaScript code. Users will feel that the page loads faster because the browser takes less time to display a blank page.
3 defer和async
3.1 defer
The defer attribute indicates that the script will not change the structure of the page when it is executed, which means that the script will be delayed until the entire page is parsed before running. Therefore, setting the defer attribute on the <script> element is equivalent to telling the browser to download immediately, but delay execution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="example1.js"></script>
<script defer src="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
Although the <script> elements are contained in the <head> of the page, they will not be executed until the browser parses to the end of the </html> tag. The HTML5 specification requires that scripts should be executed in the order in which they appear, so the first postponed script will be executed before the second postponed script, and both will be executed before the DOMContentLoaded event. The defer attribute is only valid for external script files.
3.2 async
HTML5 defines the async attribute for the <script> element. Async is similar to defer and is applicable to external scripts. Unlike defer, async scripts cannot be guaranteed to be executed in the order in which they appear , such as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
In this example, the second script may be executed before the first script, so the key point is that there is no dependency between them. The purpose of adding the async attribute to the script is to tell the browser that it does not have to wait for the script to be downloaded and executed before loading Page, you don’t have to wait until the asynchronous script is downloaded and executed before loading other scripts. Asynchronous scripts are guaranteed to be executed before the load event of the page, but may be before or after DOMContentLoaded.