HTML 中的 JavaScript
背景
- 在 JavaScript 发展早起早期，网景公司的工作人员希望在将 JavaScript 引入 HTML 页面的同时，不会导致页面在其他浏览器中渲染出问题。经过讨论，他们达成了向网页中引入通用脚本能力的共识，并且形成了后来的 HTML 规范。
script 标签
- 将 JavaScript 插入 HTML 的主要方法是使用 script 元素。
- 这个元素是由网景公司创造出来，并最早在 Netscape Navigator 2 中实现的。后来，这个元素被正式加入到 HTML 规范。
- script 元素有下列 8 个属性。
- src：可选。表示包含要执行的代码的外部文件。
- type：可选。代替 language 属性，表示代码块中脚本语言的内容类型（也称 MIME 类型）。
- JavaScript 文件的 MIME 类型通常是 "application/x-javascript"，不过给 type 属性这个值有可能导致脚本被忽略。
- 在非 IE 的浏览器中有效的其他值还有 "application/javascript" 和 "application/ecmascript"。
- 如果这个值是 module，则代码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。
- defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。
- 只对外部脚本文件有效。
- 设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。
- async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。
- 只对外部脚本文件有效。
- 从改变脚本处理方式上看，async 属性与 defer 类似，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。
- 不过，与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行。
- 添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改 DOM。
- integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错， 脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
- charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
- crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
- crossorigin = "anonymous" 配置文件请求不必设置凭据标志。
- crossorigin = "use-credentials" 设置凭据标志，意味着出站请求会包含凭据。
- 使用 script 的方式有两种：
- 通过它直接在网页中嵌入 JavaScript 代码
- 通过它在网页中引入外部 JavaScript 文件
- 包含在 script 内的代码会被从上到下解释执行，在 script 元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示
- 与解释行内 JavaScript 一样，通过 src 属性引入外部 JavaScript 文件并进行解释时，页面也会阻塞，阻塞时间也包含下载文件的时间
- 按照惯例，外部 JavaScript 文件的扩展名是.js。
- 但这不是必需的，因为浏览器不会检查所包含 JavaScript 文件的扩展名。
- 这就为使用服务器端脚本语言动态生成 JavaScript 代码，或者在浏览器中将 JavaScript 扩展语言（如 TypeScript，或 React 的 JSX）转译为 JavaScript 提供了可能性。
- 不过要注意，服务器经常会根据文件扩展来确定响应的正确 MIME 类型。如果不打算使用.js 扩展名，一定要确保服务器能返回正确的 MIME 类型。
- 除了 script 标签，还有其他方式可以加载脚本。
- 只要创建一个 script 元素，设置其 src 属性，并将其添加到DOM 即可。
- 默认情况下，以这种方式创建的 script 元素是以异步方式加载外部 js 文件的，相当于添加了 async 属性。但是可以设置其为同步加载：
script.async = false;
- 以这种方式获取的资源对浏览器预加载器是不可见的，这会严重影响它们在资源获取队列中的优先级。且这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：
<link rel="preload" href="gibberish.js">
行内代码与外部文件
- 虽然可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。推荐使用外部文件的理由如下。
- 可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护。
- 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
- 适应未来。
noscript 元素
- 针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案。最终，noscript 元素出现，被用于给不支持或者禁用 JavaScript 的浏览器提供替代内容。
- noscript 元素可以包含任何可以出现在 body 中的 HTML 元素，script 元素除外。在满足下列两种情况的任意一种时，浏览器将显示包含在 noscript 中的内容：
- 例子如下：
小结
- 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
- 所有 script 元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在 script 元素中的代码必须严格按次序解释。
- 对不推迟执行的脚本，浏览器必须解释完位于 script 元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把 script 元素放到页面末尾，介于主内容之后及 body 标签之前。
- 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。根据浏览器内核不同，实际执行情况可能有所不同。
- 可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
- 通过使用 noscript 元素，可以指定在浏览器不支持或者禁用脚本时显示的内容。如果浏览器支持并启用脚本，则 noscript 元素中的任何内容都不会被渲染。
