目 录CONTENT

文章目录

延迟加载JS-defer和async的区别

Hello!你好!我是村望~!
2022-08-09 / 0 评论 / 3 点赞 / 266 阅读 / 953 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

关于HTML文档的执行顺序

先贴一点代码

test.js

console.log('====================================');
console.log(document.getElementById('box'));
console.log('====================================');

index.html

<!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" />
		<script src="./test.js"></script>
		<title>Document</title>
	</head>

	<body>
		<div id="box">box</div>
	</body>
</html>

首先,浏览器在执行我们的HTML文档的时候都是一行一行去执行的,那么上面的代码js打印box会输出什么呢?
image-1660056942743
答案是 null,因为我们执行到那里的JS的时候,文档还没有加载完成!那么如果我们此时给我们的 script 标签加上async或者defer的话!再来看看!

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

OR

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

然后你就能发现,2个都可以完成我们期待的效果!
image-1660057123218

defer和async的区别

defer是等全部都HTML加载完成才会执行,async加载脚本执行是和HTML并行的

没有deferasync,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(js的加载执行和HTML解析执行同时进行)。

defer,加载后续文档元素的过程将和 script.js 的加载并行进行(同时解析,但没有执行),但是 script.js执行要在所有元素解析完成之后DOMContentLoaded 事件触发之前完成(整个HTML解析完成才会执行!)。 DOMContentLoaded_event

image-1660057476709

默认
image-1660088622913

async
image-1660088643045

defer
image-1660088652632

defer之间一定是按照顺序执行,async的执行是谁先加载完谁执行!

三个js

console.log('====================================');
console.log(0000);
console.log('====================================');
console.log('====================================');
console.log(1111);
console.log('====================================');
console.log('====================================');
console.log(2222);
console.log('====================================');

先测试async加载三个js

<!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" />
		<script src="./test.js" async></script>
		<script src="./test1.js" async></script>
		<script src="./test2.js" async></script>
		<title>Document</title>
	</head>

	<body>
		<div id="box">box</div>
	</body>
</html>

1-1660058072387
可以看到,有几次顺序会乱掉!
大家可以自己去试试defer!反正我的一都是按照顺序执行输出!

<!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" />
		<script src="./test.js" defer></script>
		<script src="./test1.js" defer></script>
		<script src="./test2.js" defer></script>
		<title>Document</title>
	</head>

	<body>
		<div id="box">box</div>
	</body>
</html>

3

评论区