<script> 标签
<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 元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。