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

1,905 阅读1分钟

浏览器是多进程的,一个进程中包含多个线程。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