快捷導(dǎo)航

詳細(xì)分析單線程JS執(zhí)行問(wèn)題

更新時(shí)間：2017年11月22日 08:44:41 投稿：laozhang

給大家詳細(xì)講解一下單線程javascript的執(zhí)行問(wèn)題，以及通過(guò)實(shí)例分析用法。

大家在學(xué)習(xí)javascript的時(shí)候很多朋友在執(zhí)行問(wèn)題上有疑惑，小編通過(guò)本篇文章給大家詳細(xì)的分析介紹了JS的執(zhí)行問(wèn)題，希望能夠幫助到你理解。

一、介紹

隨著js不斷學(xué)習(xí)，你可能會(huì)慢慢的好奇，用了這么久的js，卻不知道這js在瀏覽器怎么被執(zhí)行的，很尷尬。所以，我查閱很多資料來(lái)總結(jié)JS的執(zhí)行過(guò)程，也分享出來(lái)，和大家一起學(xué)習(xí)。

本篇主要講單線程的JS
涉及的名詞：JS引擎，單線程，執(zhí)行棧，執(zhí)行上下文（execution context）

二、JS引擎

JS引擎是瀏覽器的重要組成部分，主要用于讀取并執(zhí)行js。就是這家伙執(zhí)行js的，但它不止于執(zhí)行js。

各大瀏覽器的JS引擎：

瀏覽器

Js引擎

Chrome V8 Firefox SpiderMonkey IE Chakra（查克拉） Safari Nitro/JavaScript Core Opera Carakan

雖然每個(gè)瀏覽器的JS引擎都不同，但他們執(zhí)行js機(jī)制大致相同。

三、JS執(zhí)行是單線程

單線程是指Js引擎執(zhí)行Js時(shí)只分了一個(gè)線程給他執(zhí)行，也就是執(zhí)行js時(shí)是單線程的。

a.先了解線程有人可能會(huì)疑惑，線程是什么？

直接舉個(gè)例子吧，你打開(kāi)一個(gè)瀏覽器(應(yīng)用程序)，那瀏覽器就是一個(gè)進(jìn)程。打開(kāi)瀏覽器后要做很多事情(各種分工)：發(fā)送請(qǐng)求，接受請(qǐng)求，渲染頁(yè)面，執(zhí)行js等等這些就是一個(gè)個(gè)線程。

我這里只是簡(jiǎn)單的說(shuō)一下，具體的大家可以找計(jì)算機(jī)操作系統(tǒng)資料深入學(xué)習(xí)。

b.為什么是單線程有可能有疑惑，為什么js執(zhí)行要單線程，如果多線程不是可以執(zhí)行得快一點(diǎn)嗎？

這個(gè)要回到Js歷史了，布蘭登·艾奇(Brendan Eich)老哥用10天創(chuàng)造js。當(dāng)時(shí)js用來(lái)干嘛，簡(jiǎn)單的瀏覽器交互，驗(yàn)證，操作一下dom是吧。那把它設(shè)計(jì)成那么復(fù)雜干什么，而且如果多線程的話，操作dom會(huì)出現(xiàn)麻煩的事情，假設(shè)一個(gè)線程讀取DOM節(jié)點(diǎn)數(shù)據(jù)的同時(shí)，另一個(gè)線程把那個(gè)DOM節(jié)點(diǎn)刪了，呵呵。所以js一個(gè)線程就夠了，也就是一步一步順序運(yùn)行下來(lái)。

c.證明一下單線程

單線程只能一步步執(zhí)行下來(lái)，所以執(zhí)行以下代碼會(huì)導(dǎo)致阻塞（有個(gè)while死循環(huán)），不會(huì)彈出hello

while(1){}
alert('hello');

四、執(zhí)行棧

實(shí)現(xiàn)js執(zhí)行時(shí)的單線程，js引擎維護(hù)一個(gè)執(zhí)行棧。（先進(jìn)后出）

來(lái)個(gè)例子：運(yùn)行這段代碼是執(zhí)行棧是怎么做的。

//運(yùn)行代碼
sayHello();
function sayHello(){
var message = getMessage();
console.log(message);
}
function getMessage(){
return 'hello';
}

執(zhí)行棧代碼模擬

//執(zhí)行棧
var exeStack = [];
//先壓如全局執(zhí)行環(huán)境
exeStack.push('globalContext');
//遇到執(zhí)行sayHello函數(shù)，ok，壓進(jìn)去
exeStack.push('sayHello');
//執(zhí)行sayHello函數(shù)發(fā)現(xiàn)，還有個(gè)getMessage函數(shù)，ok，壓進(jìn)棧
exeStack.push('getMessage');
//執(zhí)行完了getMessage函數(shù)，彈棧
exeStack.pop();
//繼續(xù)執(zhí)行sayHello函數(shù)，又發(fā)現(xiàn)有console.log這個(gè)家伙，ok，你進(jìn)棧
exeStack.push('console.log');
//執(zhí)行了console后，輸出hello，console 彈棧
exeStack.pop();
//這時(shí)sayHello執(zhí)行完，彈棧
exeStack.pop();
//最后整個(gè)代碼執(zhí)行完，全局環(huán)境彈棧
exeStack.pop();

執(zhí)行棧圖示：

這里主要是js在執(zhí)行時(shí)的一個(gè)總體過(guò)程，但是你們可能會(huì)疑惑，壓進(jìn)棧里面的一塊塊（抽象）東西到底包含的是什么？
我可以告訴你們是，執(zhí)行上下文，global是指全局的的執(zhí)行上下文，其他的是函數(shù)執(zhí)行上下文，那到底這些上下文包含什么，我會(huì)在下一篇詳解。

五、小結(jié)

這篇主要是將js單線程是什么，并且怎么實(shí)現(xiàn)單線程的，先有個(gè)總體js執(zhí)行過(guò)程的印象，下一篇會(huì)詳細(xì)寫(xiě)js執(zhí)行的細(xì)節(jié)，執(zhí)行上下文。

您可能感興趣的文章: