瀏覽器執行緒執行順序，瞭解一下

context發表於2018-05-16
瀏覽器執行緒

瀏覽器是多程式的，一個程式中包含多個執行緒。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複製程式碼



相關文章