script标签

属性

async：表示立即下载脚本，但不阻止其他页面动作。下载完后立即执行。
charset：使用src指定的代码字符集。
crossorigin：配置相关请求的CORS（跨域资源共享）设置。
defer：表示立即下载脚本，但不阻止其他页面动作，等到文档完全被解析之后再执行。
integrity：允许比对接收到的资源和指定的加密签名已验证子资源完整性。
src：指定要执行的代码的外部文件。
type：指定代码块中脚本语言的内容类型，按照管理这个值始终是“text/javascript”。如果这个值为 module ，则代码会被当成ES6模块，而且只能有这个时候才能出现import 和 export。

使用script的方式

在网页中嵌入js代码

<script>
    console.log("atuotuo");
</script>

引入外部js文件
```
<script src="test.js">
</script>
```

标签位置

放在<head>标签内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="test1.js"></script>
</head>
<body>
    
</body>
</html>

问题：把js文件都放在head里，这就意味着必须把所有的js代码都下载、解析、执行完成后，才开始渲染页面。对于有些js需要执行很久的页面来说，会导致页面渲染的明显延迟。

放在<body>中元素内容后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="test1.js"></script>
</body>
</html>

页面会在处理js代码之前完全渲染页面。

推迟执行脚本

使用defer属性，在script内加入defer，表示脚本会被延迟到整个页面都解析完毕后再运行。当浏览器解析到带有defer属性的script标签是，会立即下载脚本，但是延迟执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="test1.js" defer></script>
</head>
<body>
</body>
</html>

异步加载脚本

使用async和defer脚本，这两个属性都可以异步加载脚本；使用async不能保证脚本的执行顺序，而且async在下载完成时，会立即执行脚本，会阻塞页面加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="test1.js" async></script>
	<script src="test2.js" async></script>
</head>
<body>
</body>
</html>

动态加载脚本

处理直接在页面中使用srcipt标签外，还可以使用DOM操作向页面中动态添加script元素，添加脚本。

let script = document.createElement("script");
script.src = "test1.js";
document.head.appendChild(script);

行内代码和外部文件

虽然直接在html可以直接嵌入js代码，但是通过实践来看，尽可能还是把js文件放在外部文件中。理由如下：

可维护性：对于开发则来说，如果代码量比较大，都写在html文件中，维护困难，而且不便于多人开发。
缓存：浏览器会根据特定的设置缓存所有外部链接的js文件，这就意味在页面加载一次之后，后面加载速度会变快。

noscript标签

当浏览器不支持脚本时，浏览器会显示noscript内的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="test1.js" async></script>
	<noscript>
    	<p>该浏览器不支持脚本内容，无法访问网页</p>
    </noscript>
</head>
<body>
</body>
</html>

常见面试题

1. 在script标签中defer和async属性的区别

script中没有这两个标签时，浏览器在渲染时遇到script标签时会停止渲染，来下载并执行js代码，等待js代码执行完毕后才会往下执行代码。
defer：延迟执行，js脚本下载和文档解析并发执行，但是等到文档解析完成时，才会执行js脚本。
async：异步加载，js脚本下载和文档解析并发执行，但是等到js下载完成后会立即执行js脚本，文件解析会暂停。

2.延迟脚本在JavaScript中有什么作用

默认情况下，在页面加载期间，遇到js代码，HTML的代码解析会暂停，直到js执行完成。

这样会导致页面加载时间过长。延迟脚本加载可以加快页面的加载速度。

3.延迟加载的方式

async
defer
将js脚本放在body内最后面。
动态加载，使用dom操作往页面中添加script元素。
使用定时器延迟加载。

4.直接在script标签写export为什么会报错？

现代浏览器可以支持用 script 标签引入模块或者脚本，如果要引入模块，必须给 script 标签添加 type=“module”。

html中的js