1 HTML 中的 JavaScript
1.1 <script>元素
1.1.1 <script>元素的8个属性
async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其
他脚本加载。只对外部脚本文件有效。
charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不
在乎它的值。
crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin=
"anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据
标志，意味着出站请求会包含凭据。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
在 IE7 及更早的版本中，对行内脚本也可以指定这个属性。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，
Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，
脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提
供恶意内容。
language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、“JavaScript 1.2”
或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
src：可选。表示包含要执行的代码的外部文件。
type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯
例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript"
都已经废弃了。JavaScript 文件的 MIME 类型通常是"application/x-javascript"，不过给
type 属性这个值有可能导致脚本被忽略。在非 IE 的浏览器中有效的其他值还有
“application/javascript"和"application/ecmascript”。如果这个值是 module，则代
码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。
1.1.1 <script>元素的使用方法
静态加载脚本（在网页中嵌入js代码）
要嵌入行内 JavaScript 代码，直接把代码放在<script>元素中就行：
<script>
function sayHi() {
console.log("Hi!");
}
</script>
# 浏览器解析行内脚本的方式决定了它在看到字符串</script>时，会将其当成结束的</script>
标签。想避免这个问题，只需要转义字符“\”
<script>
function sayScript() {
console.log("<\/script>");
}
</script>
PS：
按照惯例，外部 JavaScript 文件的扩展名是.js并不是必需的，服务器经常会根据文件扩展来确定响应的正确 MIME 类型。
在不使用defer和async属性时，浏览器会按顺序解释<script></script>对，详见1.1.2-1.2.3
在网页中嵌入js文件
当<script>元素都被放在页面的标签内，会导致把所有 JScript 代码都下载、解析和解释完成后才开始渲染页面，所以现代通常放在<body>后
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script src="example1.js">古代存放的位置</script>
</head>
<body>
<!-- 这里是页面内容 -->
<script src="example1.js">现代存放的位置</script>
<script src="example2.js"></script>
</body>
</html>
1.1.2 推迟执行脚本——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>
# 对于 XHTML 文档，指定 defer 属性时应该写成 defer="defer"
1.1.3 异步执行脚本——async 属性
与defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行，
给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改 DOM。异步脚本保证会在页面的 load 事件前执行，但可能会在 DOMContentLoaded（参见第 17 章）之
前或之后
1.1.4 动态加载脚本
因为 JavaScript 可以使用 DOM API，所以通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。
方法
执行时间：把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求
加载方式: 默认异步,==async，因为不是所有浏览器都支持 async 属性，如果有统一动态脚本的加载行为，可以设置为同步
# 只要创建一个 script 元素并将其添加到DOM 即可。
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
# 设置为同步
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：
<link rel="preload" href="gibberish.js">
更严格语法的XHTML中的使用
在 HTML 中，解析<script>元素会应用特殊规则。XHTML 中则没有这些规则。这意味着 a < b语句中的小于号（<）会被解释成一个标签的开始出现语法错误
避免方法1(影响阅读)
把所有小于号（<）都替换成对应的 HTML实体形式（<）
避免方法2(需要支持CDATA块的兼容XHTML的浏览器)
是把所有代码都包含到一个 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>
避免方法2(不支持CDATA块的不兼容XHTML的浏览器)
在不支持 CDATA 块的非 XHTML 兼容浏览器中则不行。为此，CDATA 标记必须使用 JavaScript 注释来抵消：
不行。为此，CDATA 标记必须使用 JavaScript 注释来抵消：
<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>
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
