JavaScript ＜script＞ 标签属性讲解

<script> 元素

将 JavaScript 插入 HTML 的主要方法是使用 <Script> 元素。

属性:

1. <script> 元素本身

// script 元素本身 在下载的时候会阻止其他页面的动作，比如下载资源或者等待其他脚本加载，只对外部脚本文件有效
<script src='script脚本位置.js'></script>

2. async：表示立即开始下载脚本，但不能阻止其他页面的动作，比如下载资源或者等待其他脚本加载，只对外部脚本文件有效。

<script async="async" src="index.js"></script>

// 可以简写为 ↓
// 加上 async 表示页面加载的时候立即下载 script 脚本，下载完成之后立即加载。
<script async src="index.js"></script>	

3. defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。

<script defer="defer" src="index.js"></script>

// 简写 ↓
// 加上 defer 表示页面加载时立即下载 scirpt 脚本，等待页面渲染完成之后再加载
<script defer src="index.js"></script>

4. <script type=“module”>：如果type属性为module，代码会被当作JavaScript模块

// module.js  ↓
export Hello {
    
    
	return 'Hello type="module"'	
} 

// index.js ↓
<script type="module">
	import {
    
     Hello  } from 'module.js'
	console.log(Hello) // Hello type="module"
</script>

<script> 元素分别加上 async、defer、type=“module” 下载与加载时机

绿色线表示HTML文本的解析、蓝线表示下载时机、红线表示加载时机

设置 async 时加载 JS 脚本是不固定位置的主要看什么时候下载完成

type=“module” 和 defer 一个效果 都是上来就下载 等到最后加载

5. crossorigin：配置相关请求的CORS（跨源资源共享）设置。默认不使用 CORS。

// 配置文件请求不必设置凭据标志
<script src="index.js"  crossorigin="anonymous"></script>

// 设置凭据标志，意味着出站请求会包含凭据
<script src="index.js"  crossorigin="anonymous"></script>

6. src 表示包含要执行的代码的外部文件

<script src="index.js"></script>

7. type：替代 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）

<script src="index.js" type="text/JavaScript"></script>

8. integrity：允许比对接受到的资源和指定的加密签名以验证子资源的完整性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改
9. charset ：使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
   10.nomodule：兼容不支持ES6的浏览器：主要是 IE11