浏览器线程执行顺序，了解一下

最新推荐文章于 2023-07-17 19:15:49 发布

weixin_33774883

最新推荐文章于 2023-07-17 19:15:49 发布

阅读量481

点赞数

文章标签： javascript ui ViewUI

原文链接：https://juejin.im/post/5afaaa2ff265da0b886d9220

版权

浏览器是多进程的，一个进程中包含多个线程。js线程和ui线程互斥。浏览器的线程还有浏览器事件触发线程、定时触发器线程、异步HTTP请求线程。

执行顺序

js执行过程中，先执行栈中的代码，碰到DOM事件回调函数、异步http请求、setTimeout、setInterval放到事件队列里。等栈中的代码执行完，执行微任务队列里的回调函数。最后才执行队列里的代码。微任务和宏任务里的回调函数，都会拿到栈里去执行。

队列的放入顺序

异步http请求成功之后才会把回调函数放到队列里。

setTimeout，setInterval到时间之后才会把函数放进队列里。

队列里的执行顺序

栈代码先进后出

function a(){
	let a=1;
	b(1);
	function b(n){
		let nu=n;
		c(nu);
		function c(n){
			console.log(n);
		}
	}
}
a();
c占用b,b占用a复制代码

DOM事件回调函数、异步http请求、setTimeout、setInterval、setImmediate(node)属于宏任务。

(宏任务是先进先出)

console.log(1);
setTimeout(()=>{
	console.log(2);
},1000);
setTimeout(()=>{
	console.log(3);
},500);
//1,3,2复制代码

Promise.then VUE的 MessageChennel,MutationObserve属于微任务。

(栈里面的代码执行完成，马上执行微任务(taskqueue)里面的函数)

js先执行栈里的代码、微任务、宏任务。如果宏任务中有微任务，马上执行微任务，再执行宏任务，再检查微任务，反复执行。

console.log(1);

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

console.log(4);

setTimeout(()=>{
	console.log(3);
	new Promise((resolve,reject)=>{
		resolve('我是promise.then的方法');
	}).then(data=>{
		console.log(data);
	},err=>{
	})
},500);

//1,4,3,我是promise.then的方法,2复制代码