[JavaScript知识库]【JavaScript】《整体代码script》为何是一个宏任务

JavaScript是一门单线程的语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务。

有很多小伙伴不明白【整体代码script】为何是一个宏任务，为了让大家更好理解这里举个栗子…

例子①

<!-- 脚本 1 -->
<script>
	// 同步
	console.log('start1')
	// 异步宏
	setTimeout(() => console.log('timer1'), 0)
	new Promise((resolve, reject) => {
		// 同步
		console.log('p1')
		resolve()
	}).then(() => {
		// 异步微
		console.log('then1')
	})
	// 同步
	console.log('end1')
</script>

<!-- 脚本 2 -->
<script>
	// 同步
	console.log('start2')
	// 异步宏
	setTimeout(() => console.log('timer2'), 0)
	new Promise((resolve, reject) => {
		// 同步
		console.log('p2')
		resolve()
	}).then(() => {
		// 异步微
		console.log('then2')
	})
	// 同步
	console.log('end2')
</script>

结果：

例子②

setTimeout(() => {
	// 同步
	console.log('start1')
	// 异步宏
	setTimeout(() => console.log('timer1'), 0)
	new Promise((resolve, reject) => {
		// 同步
		console.log('p1')
		resolve()
	}).then(() => {
		// 异步微
		console.log('then1')
	})
	// 同步
	console.log('end1')
}, 0)

setTimeout(() => {
	// 同步
	console.log('start2')
	// 异步宏
	setTimeout(() => console.log('timer2'), 0)
	new Promise((resolve, reject) => {
		// 同步
		console.log('p2')
		resolve()
	}).then(() => {
		// 异步微
		console.log('then2')
	})
	// 同步
	console.log('end2')
}, 0)

结果：

综上，两个结果是一样的，所以证实了 <script></script> 整体跟 setTimeout 一样是宏任务。

执行顺序是：
??排前面的 script 先执行，执行其内部的【同】，再执行其【微】，接着就轮到下一个大的宏，也就是执行下一个 script，【同】、【微】。。。顺序执行完后，再从头开始，看第一个 script 是否有需要执行的【宏】，再去下一个 script 中找 【宏】，等大家宏结束后，进入下一轮循环。