什么是script元素
将JavaScript插入HTML的主要方法是使用<script>元素。
script元素的8个属性
-
src：可选。指定要加载的外部JS文件。 -
type：可选。表示代码块中脚本语言的内容类型（也称MIME类型，在浏览器中，通常是text/javascript；如果加载或包含ES6模块代码，module） -
language：废弃。用于表示代码块中的脚本语言。 -
crossorigin：可选。配置相关请求的CORS（跨院资源共享）设置。
如果是跨域请求，crossorigin="anonymous"表示请求不用设置凭据标志（比如cookie）；crossorigin="use-credential"表示设置凭据标志，意味着出站请求会包含凭证。<script>、<link>、<img>、<audio>、<video>均可使用，它们本身不受同源策略限制；origin包含三部分：protocol协议、domain域名、port端口，只有全部匹配才叫同源 -
integrity：可选。允许对比接受到的资源和指定的加密签名已验证子资源的完整性。如果接收到的资源的前面与这个属性指定的资源不匹配，页面会报错，脚本不会执行。可以用于确保内容分发网络不会提供恶意内容 。 -
chartset：可选。使用src属性指定的代码字符集。（少用）
涉及脚本加载时期的两个属性：
-
async：可选，只对外部脚本有效。表示立即开始下载脚本，然后中断文档解析并立即执行脚本。不必等脚本下载和执行完后再加载页面，也不必等到该异步脚本下载和执行后再加载其他脚本。 -
defer：可选，只对外部脚本有效。表示立即开始下载但在文档解析和显示完成后执行脚本。
使用script元素
在标签内直接嵌入
<script>
function sayHi(){
console.log('Hi!')
}
</script>
在
<script>元素中的代码被计算完成后，页面的其余内容才会被加载和显示。注意：使用行内JavaScript代码时，不能出现字符串</script>。这是因为浏览器解析行内脚本时，看到</script>会将其当成结束的</script>标签，这个时候需要用到转义字符“”即可：
<!-- 错误 -->
<script>
function sayHi(){
console.log('</script>')
}
</script>
<!-- 正确 -->
<script>
function sayHi(){
console.log('</script>')
}
</script>
引用外部文件
<script src="example.js"></script>
引用外部文件有如下好处：可维护；可缓存，浏览器会根据特定的设置缓存所有外部链接的JavaScript文件。
注意，浏览器不会检查文件的扩展名（比如JavaScript文件的
.js）。所以，你可以通过服务器端脚本语言动态生成JavaScript代码；或者在浏览器中将JavaScript扩展语言（如typeScript或JSX）转移为JavaScript。服务器经常会根据文件扩展名来确定响应的正确MIME类型，如果不打算使用.js扩展名，一定要确保服务器能返回正确的MIME类型。
使用src属性的<script>不应该再在元素里面包含其他JavaScript代码，如果两者都提供，则浏览器会忽略行内代码。
标签位置
过去，我们把<script>放在页面的<head>标签内，这意味着必须把所有JavaScript代码都下载、解析和解释完成后才能渲染页面，导致页面渲染延迟。为了解决这个问题，我们通常把<script>放在<body>标签中页面内容的后面
动态加载脚本
JavaScript可以使用DOM API向DOM中动态添加<script>元素，只需创建一个<script>元素并将其添加到DOM即可：
let script=document.createElement('script');
script.src='szd.js';
document.head.appendChild(script);
默认情况下，以这种方式创建的<script>元素是异步加载的。然而不是所有浏览器都支持async属性，因此可以明确将其设置为同步加载：
let script=document.createElement('script');
script.src='szd.js';
script.async=false;//指明同步
document.head.appendChild(script);
然而以这种方式获取的资源对浏览器的预加载器是不可见的，这会影响他们在资源获取队列中的优先级。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明：
<link ref="preload" href="szd.js">
文档模式
-
混杂模式（quirks mode）：通过省略文档开头的doctype声明作为开启
-
标准模式（standards mode）：
<!-- HTML 4.01 Strict --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.did"> <!-- HTML5 --> <!DOCTYPE html> -
准标准模式（almost standards mode）：通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）触发
<!-- HTML 4.01 Transitional --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.did"> <!-- HTML 4.01 Frameset --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.did">混杂模式和标准模式的主要区别体现在通过CSS渲染的内容方面，也对JavaScript也有一点关联影响，称为副作用；准标准模式的主要区别在于如何对待图片元素周围的空白
noscript元素
对于浏览器不支持JavaScript的问题，可以通过<noscript>元素进行优雅降级。<noscript>元素可以包含任何可以在<body>出现的HTML元素，<script>除外。一旦浏览器不支持脚本或者对脚本的支持被关闭，<noscript>中的内容就会被渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="example.js"></script>
</head>
<body>
<noscript>
<p>请使用支持JavaScript脚本的浏览器运行此页面</p>
</noscript>
</body>
</html>
小结
- 通过
src属性设置文件的URL来引用外部文件，它可以跟页面在同一台服务器，也可以位于不同的域。 - 在不使用defer和async的属性的情况下，所有
script元素会按照它们在页面出现的持续被解析，里面的代码也会严格按照次序解析。 - 通常把
script元素放到页面末尾，介于内容之后及/body之前。 - 使用
noscript元素可以指定在浏览器不支持脚本时显示的内容。