2.1 前言
本章主要介绍如何将 JavaScript 引入 HTML，使网页具有脚本的能力，并在不同的浏览器中正常渲染。
2.2 MIND
2.3 <script>元素
2.3.1 标签位置
过去，所有<script>元素都被放在页面的<head>标签内，这就意味着需要把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面，导致页面渲染的明显延迟。
为解决这个问题，现代 Web 应用程序通常将所有 JavaScript 引用放在<body>元素中的页面内容后面。
2.3.2 执行方式
2.3.2.1 推迟执行
<script> 元素属性 defer 使脚本被延迟到整个页面都解析完毕后再运行（立即下载，延迟执行），浏览器解析到结束的 </html>标签后按照顺序执行（页面解析之后，DOMContentLoaded 事件之前执行）。
2.3.2.2 异步执行
async 属性 与 defer 类似都是立即下载，不同的是 async 的脚本并不保证能按照它们出现的次序执行。异步脚本不应该在加载期间修改 DOM，异步脚本会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 之前或之后执行。
2.3.3 动态加载脚本
JavaScript 可以使用 DOM API 加载脚本，通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。默认异步加载，相当于添加了 async 属性，但并非所有浏览器支持 async 属性。因此可以将动态脚本的加载方式设置为同步加载。
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
但这种方式获取的资源对浏览器预加载器是不可见的，严重影响它们在资源获取队列中的优先级，可以在文档头部显式声明它们。
<link rel="preload" href="gibberish.js">
2.3.4 XHTML 中的变化
在 XHTML 中使用 JavaScript 必须指定 type 属性且值为 text/javascript。不同于如解析<script>拥有的特殊规则，XHTML 中如 a < b 语句中的小于号(<)会被解释成一个标签的开始。
避免 XHTML 中这种语法错误的方法有两种。第一种是把所有小于号(<)都替换成对应的 HTML 实体形式(<)；第二种方法是把所有代码都包含到一个 CDATA 块中，但在不支持 CDATA 块的非 XHTML 兼容浏览器中 CDATA 标记必须使用 JavaScript 注释来抵消。
2.4 <noscript>元素
通过 <noscript> 优雅降级解决早期浏览器不支持 JavaScript 的问题。
浏览器将显示包含在 <noscript>中的内容的两种方式：
- 浏览器不支持脚本
- 浏览器对脚本的支持被关闭
2.5 行内代码与外部文件
尽可能将 JavaScript 代码放在外部文件中有以下好处：
- 可维护性
- 缓存
- 适应未来
2.6 文档模式
IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。
文档模式分类：
- 混杂模式（quirks mode）：让 IE 像 IE5 一样（支持一些非标准的特性）
- 标准模式（standards mode）：让 IE 具有兼容标准的行为
- 准标准模式(almost standards mode)：这种模式下的浏览器支持很多标准的特性，但是没有标准规定得那么严格。主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显)
