异步和单线程宏任务微任务

异步和单线程

同步和异步的区别？

JS是单线程语言，只能同时做一件事。异步不会阻塞代码的运行，同步会阻塞代码的运行。

---

浏览器和nodejs已支持JS启动进程，如Web Worker

---

JS和DOM渲染共用同一个线程，因为JS可修改DOM结构

---

遇到等待（网络请求，定时任务）不能卡住，所以需要异步 异步通过callback形式调用

手写Promise加载一张图片？

function loadImg(src){
	return new Promise((resolve, reject)=>{
		const img = document.createElement('img)
		img.onload = ()=>{
			resolve(img)
		}
		
		img.onerror = ()=>{
			reject(new Error(`图片加载失败 ${src}`))
		}
		
		img.src = src
	})
}

// 使用
loadImg(imgUrl1).then(img1=>{
	console.log(img1.width);
	rerurn img1
}).then(img1=>{
	console.log(img1.height);
	return loadImg(imgUrl2);
}).then(img2=>{
	console.log(img2.width);
	return img2
}).then(img2=>{
	console.log(img2.height);
}).catch(err=>{
	console.error(err);
})

• 前端使用异步的场景有哪些（网络请求: 如ajax图片加载；定时任务：如setTimeout）

Promise解决了什么问题？(回调地狱 callback hell)

考点：JS异步

请描述event loop (事件循环/事件轮询)的机制，可画图。

异步是基于回调来实现。
event loop 是异步回调的实现原理。

// JS 如何执行

- 从前到后，一行一行执行
- 如果某一行执行报错，则停止下面代码的执行
- 先把同步代码执行完，再执行异步。

console.log(1);

setTimeout(()=>{
	console.log(2);
},1000)

console.log(3);


总结：
- 同步代码，一行一行放在 Call Stack 中执行
- 遇到异步，会先"记录"下，等待时机（定时，网络请求等）
- 时机到了，就移到callback queue中
- 如Call Stack 为空（同步代码执行完），当Call Stack空闲，执行当前的微任务(micro task queue),会尝试DOM渲染，Event Loop 开始工作
- 轮询查找 Callback Queue ， 如有则移到到 Call Stack 中执行
- 然后继续轮询查找（永动机一样）

什么是宏任务和微任务，两者有什么区别？

宏任务：setTimeout, setInterval, Ajax, DOM事件
微任务：Promise async/await

微任务执行时机比宏任务要早。

• event-loop 和DOM渲染的关系
  JS是单线程的，而且和DOM渲染共用一个线程
  JS执行的时候，得留出一些时机供DOM渲染

微任务：DOM渲染前触发，如Promise
宏任务：DOM渲染后触发，如setTimeout

Promise有哪些状态，如何变化？

• 三种状态（pending,resolved,rejected）
• 状态的表现和变化(pending=>resolved或pending=>rejected,状态一旦发生变化，不可逆)
• then和catch对状态的影响