<script defer src="./xxxx.js" type="text/javascript"></script>
通常情况下，我们把 CSS 资源的导入放在页面头部，这样能保证 样式 和 DOM，同时渲染，提升用户体验。JS资源的导入放在页面的底部，应为JS通常是用来操作 DOM 的，需要等 DOM 渲染结束，好获取 DOM。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="xxxx.css" />
</head>
<body>
</body>
<script src="./xxxx.js"></script>
</html>
必选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | MIME-type | 指示脚本的 MIME 类型。 |
type 可能的值：
- text/javascript
- text/ecmascript
- application/ecmascript
- application/javascript
- text/vbscript
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| async | async | 规定异步执行脚本（仅适用于外部脚本）。 |
| charset | charset | 规定在外部脚本文件中使用的字符编码。 |
| defer | defer | 规定是否对脚本执行进行延迟，直到页面加载为止。 |
| language | script | 不赞成使用。规定脚本语言。请使用 type 属性代替它。 |
| src | URL | 规定外部脚本文件的 URL。 |
| xml:space | preserve | 规定是否保留代码中的空白。 |
属性介绍
defer、async，常用的优化手段，这两个属性都使得 script 不会阻塞 DOM 的渲染。
页面加载的过程：文档解析（DOM 的渲染过程） -> 脚本加载 -> 脚本执行 -> DOMContentLoaded
defer
文档解析时，遇到设置了 defer 的脚本<script defer src="./xxxx.js" type="text/javascript"></script>，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析渲染完毕后。会等到所有的 defer 脚本加载完毕并按照顺序执行，执行完毕后会触发 DOMContentLoaded 事件。
使用场景：如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。
async
async 脚本<script async src="./xxxx.js" type="text/javascript"></script>，会在脚本加载完毕后立即执行。
由于是异步加载，加载的过程不会阻塞文档解析的过程（GUI渲染）。
但是加载完成后会立即执行，如果执行的时候GUI渲染还未完成，则会中断渲染，相应的JS执行完，GUI继续渲染。
也就是说 async 脚本的加载和执行可能比GUI渲染完成更早或者更晚。
async 脚本的加载过程不会影响GUI渲染，但是执行是可能会
async 的执行，并不会按着 script 在页面中的顺序来执行，而是谁先加载完谁执行。
async 脚本的加载不计入 DOMContentLoaded 事件统计。
使用场景：如果你的脚本并不关心页面中的 DOM 元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。