瀏覽器端Event loop簡介

alexnevsky 發(fā)布于2019-08-20 15:28 / 1419人閱讀

摘要：所以提出了標(biāo)準(zhǔn)，允許創(chuàng)建子線程，但是規(guī)定很嚴(yán)格，子線程要受到主線程控制，并且不能操作，這種折中方法使得更加靈活了。案例輸出的結(jié)果為案例這個的執(zhí)行結(jié)果都是一樣的，都會先執(zhí)行事件，因為要等主線程空了才會去查看子線程有沒有回調(diào)內(nèi)容。

了解過javascript的都知道其最大的特點就是單線程，也就是說同一時間只能干一件事情。那么為什么不能是多線程呢？原因很簡單，多線程太復(fù)雜了，假設(shè)javascript有2個線程，一個去添加dom，一個去刪除dom，那么瀏覽器就懵逼了，這到底要我選擇哪個？所以為了避免不必要的麻煩，javascript一開始就選擇了單線程。但是單線程也有問題，假設(shè)有個任務(wù)是要向服務(wù)器去請求一個文件，如果這個文件很大，那么就不能立即執(zhí)行下一語句(要等到文件回來)，這樣就造成了瀏覽器假死的現(xiàn)象。所以html5提出了web worker標(biāo)準(zhǔn)，允許javascript創(chuàng)建子線程，但是規(guī)定很嚴(yán)格，子線程要受到主線程控制，并且不能操作dom，這種折中方法使得javascript更加靈活了。

到目前為止javascript可以有子線程了，這時候再遇到像之前提到的如果一個io操作很費(fèi)時間，那么就可以把這個任務(wù)掛起來，等返回結(jié)果了再來執(zhí)行這個任務(wù)。于是所有的任務(wù)都變成了2種，一種是同步任務(wù)(從上到下一步一步執(zhí)行)，另外一種就是異步任務(wù)(等有結(jié)果了再執(zhí)行，即所謂的消息隊列)。這2種任務(wù)進(jìn)入到線程也不一樣，同步的從上到下依次直接進(jìn)入主線程形成執(zhí)行棧，異步的等有返回結(jié)果了，比如ajax請求成功了，就把成功的回調(diào)放到子線程里面去(失敗就把失敗的回調(diào)放到子線程里面去)。現(xiàn)在瀏覽器開始執(zhí)行主線程里面的執(zhí)行棧了，等主線程里面的執(zhí)行棧都執(zhí)行完畢了，主線程就會到子線程里面去看之前掛起到任務(wù)哪些有回調(diào)了，如果有回調(diào)了，那就把該回調(diào)內(nèi)容放到主線程里面去執(zhí)行，等執(zhí)行完畢了再去子線程看有沒有新的回調(diào)了(這里要注意的是主線程全部執(zhí)行完畢，才會去子線程去看)，主線程不斷的重復(fù)這個步驟，這就是所謂的Event loop，也就是javascript的運(yùn)行機(jī)制。比較特殊的是setTimeout，setinterval這2個方法，它們也會被放倒子線程里面去，比如我使用setTimeout(fn,3000),有時候不一定是3s之后會執(zhí)行fn這個事件，還要看主線程里面的任務(wù)是否完成。

案例1：

function f() {
  console.log("foo");
  setTimeout(g, 0);
  console.log("baz");
  h();
}

function g() {
  console.log("bar");
}

function h() {
  console.log("blix");
}

f();
輸出的結(jié)果為：foo 、baz 、 blix 、bar

案例2 ：

var req = new XMLHttpRequest();
req.open("GET", url);    
req.onload = function (){};    
req.onerror = function (){};    
req.send();
var req = new XMLHttpRequest();
req.open("GET", url);
req.send();
req.onload = function (){};    
req.onerror = function (){};

這2個的執(zhí)行結(jié)果都是一樣的，都會先執(zhí)行onload事件，因為javascript要等主線程空了才會去查看子線程有沒有回調(diào)內(nèi)容。

注意點：

異步的任務(wù)執(zhí)行的順序是不固定的，主要看返回的速度，假設(shè)a任務(wù)寫在b任務(wù)之前，但是a任務(wù)比較大，耗時比較長，而b任務(wù)耗時短，那么b任務(wù)有了回調(diào)先會進(jìn)入到子線程里面，這樣會被主線程先輪詢到，但是也有可能b任務(wù)網(wǎng)絡(luò)不好，a任務(wù)先返回了，那么a任務(wù)的回調(diào)先被注冊到子線程了，導(dǎo)致a先執(zhí)行了。