1 使用script的方式

使用<script>的方式有两种：通过它直接在网页中嵌入JavaScript代码，以及通过它在网页中包含外部JavaScript文件。

1.1 网页中嵌入JavaScript代码

要嵌入行内JavaScript代码，直接把代码放在<script>元素中就行。

    <script>
        function sayHi(){
    
    
            console.log("Hi");
        }
    </script>

在使用行内JavaScript代码时，要注意代码中不能出现字符串<script>。比如，下面的代码会导致浏览器报错：

    <script>
        function sayScript(){
    
    
            console.log("</script>");
        }
    </script>

浏览器解析行内脚本的方式决定了它在看到字符串<script>时，会将其当成结束的<script>标签。想避免这个问题，只需要转义符""即可：

    <script>
        function sayScript(){
    
    
            console.log("<\/script>");
        }
    </script>

这样修改之后，代码就可以被浏览器完全解释，不会导致任何错误。

1.2 网页中包含外部JavaScript文件

要包含外部文件中的JavaScript，就必须使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件，比如：

<script src="example.js"></script>

这个例子在页面中加载了一个名为example.js的外部文件。文件本身只需包含要放在<script>的起始及结束标签中间的JavaScript代码。另外，使用了src属性的<script>元素不应该再在<script>和</script>标签中再包含其他JavaScript代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。
在引入外部文件后，浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面都用到同一文件，则该文件只需下载以此。这最终意味着页面加载更快。

2 标签位置

不管包含的是什么代码，浏览器都会按照<script>在页面中的顺序依次解释他们，前提是他们没有使用defer和async属性。第二个<script>元素的代码必须在第一个<script>元素的代码解释完毕才能开始解释，第三个则必须等第二个解释完，以此类推。

async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。

过去，所有<script>元素都被放在页面的<head>标签内，如下面的例子所示：

<!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>

这种做法的主要目的是把外部的CSS和JavaScript文件都集中放在一起。不过，把所有JavaScript文件都放在<head>里，也就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。为解决这个问题，现代Web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面，如：

<!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>

这样一来，页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

3 defer和async

3.1 defer

defer这个属性表示脚本在执行的时候不会改变页面的结构，也就是说脚本会被延迟到整个页面都解析完毕后再运行。因此在<script>元素上设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

<!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>

虽然<script>元素包含在页面<head>中，但他们会在浏览器解析到结束</html>标签后才会执行。HTML5规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在DOMContentLoaded事件之前执行。defer属性只对外部脚本文件才有效。

3.2 async

HTML5为<script>元素定义了async属性，async与defer类似，都适用于外部脚本，与defer不同的是，async的脚本并不能保证按照它们出现的次序执行，比如：

<!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>

在这个例子中，第二个脚本可能先于第一个脚本执行，因此重点在它们之间没有依赖关系，给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。异步脚本保证在页面的load事件前执行，但可能会在DOMContentLoaded之前或之后。

学习笔记1—＜script＞元素

目录