JavaScript 基础（一）：HTML 中的 JavaScript-一一网

1、`<script>`元素

1.1 `<script>`元素的属性

<script>元素有下列 8 个属性：

src：可选。表示包含要执行的代码的外部文件。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。如果设置了 src 特性，script 标签的内部代码将会被忽略。
async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。一个页面有多个defer，按出现的顺序执行。在 DOMContentLoaded 事件之前执行。
language：废弃。最初用于表示代码块中的脚本语言（如 “JavaScript” 、”JavaScript 1.2″ 或 “VBScript”）。大多数浏览器都会忽略这个属性，不应该再使用它。
type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯例，这个值始终都是"text/javascript"。如果这个值是 type = "module"，则代码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。
crossorigin：可选。配置相关请求的CORS（跨源资源共享） 设置。默认不使用CORS。
- crossorigin="anonymous" 配置文件请求不必设置凭据标志。
- crossorigin="use-credentials" 设置凭据标志，意味着出站请求会包含凭据。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名 不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。

1.1.1 默认执行顺序

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

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Example HTML Page</title> 
        <script src="example1.js"></script> 
        <script src="example2.js"></script> 
    </head> 
    <body> 
        <!-- 这里是页面内容 --> 
    </body> 
</html> 
复制代码

这种做法的主要目的是把外部的 CSS 和 JavaScript 文件都集中放到一起。但是在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。对于需要很多 JavaScript 的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。

为解决这个问题，现代 Web 应用程序通常将所有 JavaScript 引用放在<body>元素中的最后，如下面的例子所示：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Example HTML Page</title> 
    </head> 
    <body> 
        <!-- 这里是页面内容 --> 
        <script src="example1.js"></script> 
        <script src="example2.js"></script> 
    </body> 
</html> 
复制代码

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

1.1.2 `defer` 延迟执行脚本

<script>元素有一个叫 defer 的属性。这个属性表示脚本会被延迟到整个页面都解析完毕后再运行。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Example HTML Page</title> 
        <script defer src="example1.js"></script> 
        <script defer src="example2.js"></script> 
    </head> 
    <body> 
        <!-- 这里是页面内容 --> 
    </body> 
</html> 
复制代码

虽然这个例子中的<script>元素包含在页面的<head>中，但它们会在浏览器解析到结束的</html>标签后才会执行。

HTML5 规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在 DOMContentLoaded 事件之前执行。不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在 DOMContentLoaded 事件之前执行，因此最好只包含一个这样的脚本。

对 defer 属性的支持是从 IE4、Firefox 3.5、Safari 5 和 Chrome 7 开始的。其他所有浏览器则会忽略这个属性，按照通常的做法来处理脚本。考虑到这一点，还是把要推迟执行的脚本放在页面底部比较好。

注意对于 XHTML 文档，指定 defer 属性时应该写成 defer="defer"。

1.1.3 `async` 异步执行脚本

HTML5 为<script>元素定义了 async 属性。从改变脚本处理方式上看，async 属性与 defer 类似。当然，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行，比如：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Example HTML Page</title> 
        <script async src="example1.js"></script> 
        <script async src="example2.js"></script> 
    </head> 
    <body> 
        <!-- 这里是页面内容 --> 
    </body> 
</html> 
复制代码

在这个例子中，第二个脚本可能先于第一个脚本执行。给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。

异步脚本保证会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 前或之后。

注意对于 XHTML 文档，指定 async 属性时应该写成 async="async"。

1.2 动态加载脚本

通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。只要创建一个 script 元素并将其添加到 DOM 即可。

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
document.head.appendChild(script); 
复制代码

当然，在把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求。默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了 async 属性。

不过这样做可能会有问题，因为所有浏览器都支持 createElement() 方法，但不是所有浏览器都支持 async 属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
script.async = false; 
document.head.appendChild(script);
复制代码

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。

要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：<link rel="preload" href="https://juejin.cn/post/gibberish.js">

2、行内代码与外部文件

虽然可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。推荐使用外部文件的理由如下。

可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护。
缓存。浏览器会根据特定的设置（下载）缓存所有外部链接的 JavaScript 文件，之后，其他页面想要相同的脚本就会从缓存中获取。这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
适应未来。通过把 JavaScript 放到外部文件中，就不必考虑行内<script> 代码不能用于 XHTML ，必须通过一些注释或<script type="text/javascript"><![CDATA[ ... ]]></script>代码块来解决问题。

3、`<noscript>`元素

<noscript>元素，给不支持 JavaScript 的浏览器提供替代内容。

<noscript>元素可以包含任何可以出现在<body>中的 HTML 元素，<script>除外。

在下列两种情况下，浏览器将显示包含在<noscript>中的内容：

浏览器不支持脚本；
浏览器对脚本的支持被关闭。

任何一个条件被满足，包含在<noscript>中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Example HTML Page</title> 
        <script defer="defer" src="example1.js"></script> 
        <script defer="defer" src="example2.js"></script> 
    </head> 
    
    <body> 
        <noscript> 
            <p>This page requires a JavaScript-enabled browser.</p> 
        </noscript> 
    </body> 
</html> 
复制代码

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。

4、总结

<script>元素的属性：
- type：type = "module"，代码会被当成 ES6 模块，只有这时候代码中才能出现 import 和 export 关键字。
- async：异步加载脚本，不阻止其他页面动作。但不能保证按照它们在页面中出现的次序执行。只对外部脚本文件有效。
- defer：把脚本推迟到文档渲染完毕后再执行（在 DOMContentLoaded 事件之前执行）。多个defer，按出现的顺序执行（原则上是这样）。只对外部脚本文件有效。
所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
过去，所有<script>元素都被放在页面的<head>标签内，对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。对于需要很多 JavaScript 的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。
使用 <noscript> 元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。