2.1 <script> 元素

将 JavaScript 插入 HTML 的主要方法是使用 <script> 元素。
<script>元素有 8 个属性：async、charset、crossorigin、defer、intergrity、language、src、type
使用 <script> 的方式有两种：
- 通过它直接在网页中嵌入 JavaScript 代码
- 通过它在网页中包含外部 JavaScript 文件。
浏览器解析行内脚本的方式决定了它在看到字符串</script> 时，会将其当成结束的 </script> 标签。想避免这个问题，只需要转义字符“ \ “即可。
```
<script>
function sayScript() {
	console.log("<\/script>")
}
</script>
```

2.1.1 标签位置

`<script>`元素存在于 HTML 中有两种方式：

放在页面的 <head> 标签内；（不推荐）

这种做法主要目的是把外部的 CSS 和 JavaScript 文件都集中放在一起。这种做法，会导致需要把所有 JavaScript 代码都下载、解析和解释完毕后，才能开始渲染页面。这会导致页面渲染的明显延迟，浏览器窗口完全空白。
放在页面的 <body> 标签内。（推荐）

这种做法，页面会在处理 JavaScript 代码之前完全渲染页面。缩短了白屏时间，增强了用户体验感。

2.1.2 推迟执行脚本（defer）

defer 属性只对外部脚本文件才有效；
设置 defer 属性，脚本会被延迟到整个页面都解析完毕后再运行；
设置 defer 属性，告诉浏览器立即下载，但延迟执行；
多个设置 defer 属性的脚本按规范会按照顺序执行，但是在一些浏览器中可能不是这样；

2.1.3 异步执行脚本（async）

async 属性只对外部脚本文件才有效；
设置 async 属性，告诉浏览器立即下载，不必等脚本下载和执行完后再加载页面；不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。
多个设置 async 属性，不能保证按照他们出现的次序执行；
Web 开发实践不推荐使用这个方法。

2.1.4 动态加载脚本

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

let script = document.createElement('script');
script.src = 'index.js';
documnet.head.appendChild(script)

所有浏览器都支持 createElement() 方法，但不是所有浏览器都支持 async 属性。如果要统一动态脚本的加载行为，可以明确将其设置为同步加载；

let script = document.createElement('script');
script.src = 'index.js';
script.async = false;
documnet.head.appendChild(script)

2.1.5 XHTML 中的变化

与 HTML 不同，在 XHTML 中使用 JavaScript 必须指定 type 属性且值为 text/javascript，HTML 中则可以没有这个属性。

XHTML 模式会在页面的 MIME 类型被指定为“application/xhtml+xml”时触发。并不是所有浏览器都支持以这种方式送达的XHTML。

最佳做法是不指定 type 属性。

2.2 行内代码与外部文件

对于 JavaScript 代码的使用，推荐使用外部文件这种方法。

这种方法，可维护性强，便于开发人员管理 JavaScript文件，可以独立于HTML页面来编辑代码；缓存更好，浏览器会根据特定的设置缓存所有外部链接的 JavaScript，这意味着如果两个页面都用到同一个文件，则只需要下载一次。页面加载会更快。适应未来，放到外部文件中，无需考虑用 XHTML “注释黑科技”。

2.3 文档模式

混杂模式（不推荐！）

在所有浏览器中都以省略文档开头的 doctype 声明作为开关。浏览器之间差异非常大！
标准模式
准标准模式

2.4 `<noscript>` 元素

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

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

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

只有当其中任一条件被满足时，<noscript> 中的内容才会被渲染。

💙《JavaScript 高级程序与设计》 ｜HTML 中的 JavaScript