# < script >元素
# 属性
- async：（异步执行脚本）可选。立即下载脚本，但不阻止其他页面动作。只对外部文件有效。
- crossorigin: 可选。默认不使用。
- crossorigin="anonymous"配置文件请求不必设置凭据标志
- crossorigin="use-credentials",设置凭据标志，出站请求会包含凭据
- defer: （推迟执行脚本）可选。脚本可延迟到文档完全被解析和显示后再执行。只对外部文件有效。
- integrity: 可选。允许比对加密签名以验证子资源完整性。用于CDN不会提供恶意内容。
- src: 可选。外部代码文件。
- type: 可选。表脚本语言内容类型（MIME类型）
- 默认"text/javascript"
- JS 文件的 MIME 类型通常是 "application/x-javascript"
- 如果值是 module, 则代码会被当成 ES6 模块，此时代码中可出现 import 和 export 关键字
# 使用方式
- 网页嵌入 JS 代码
- 代码从上到下解释
- 代码计算完成之前，页面其余内容不会被加载或显示
- 使用行内代码时，代码中不能出现字符串</ script >
- 包含外部 JS 文件
- src 属性中指定 URL 指向 JS 代码文件
- 下载和执行都会阻塞页面
- 使用 src 属性的标签内的代码会被忽略
- 可以包含来自外部域的 JS 文件（JSONP应用）
# 标签位置
- 放在 < body > 元素中的页面内容后面，避免放在 < head > 中产生浏览器窗口空白期
# 动态加载脚本
- 以异步方式加载，相当于添加了 async 属性
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
- 部分浏览器不支持 async 属性，如果要统一加载行为，需要明确设置为同步
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
- 以上方式对于浏览器预加载器不可见，会影响其在资源获取队列中的优先级，影响性能。可以在文档头部提前声明。
<link rel="preload" href="gibberish.js">
# XHTML 中的变化
XHTML(Extensible HyperText Markup Language) 是将 HTML 作为 XML 的应用重新包装的结果
XHTML 中使用 JS 必须指定 type 属性为 text/javascript
XHTML 中需要对特殊符号替换成对应 HTML 实体形式(如 '<' 换成 '<')
- 也可以使用 CDATA 块（在不支持CDATA的浏览器中可以对其进行注释）
<script type="text/javascript">
//<![CDATA[
function compare(a,b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
//]]>
</script>
# 行内代码与外部文件
- 推荐使用外部文件
- 可维护性
- 缓存
- 适应未来
# 文档模式
- 混杂模式（quirks mode）
- 混杂模式在所有浏览器中都以省略文档开头的 doctype 声明作为开关。
- 标准模式（standards mode）
# < noscript> 元素
< noscript> 元素可以包含任何可以出现在 < body> 中的 HTML 元素， < script> 除外。 适用情况：
- 浏览器不支持脚本
- 浏览器对脚本的支持被关闭
