深入學習JS執行--單線程的JS


一、介紹

隨着js不斷學習,你可能會慢慢的好奇,用了這么久的js,卻不知道這js在瀏覽器怎么被執行的,很尷尬。所以,我查閱很多資料來總結JS的執行過程,也分享出來,和大家一起學習。

本篇主要講單線程的JS
涉及的名詞:JS引擎,單線程,執行棧,執行上下文(execution context)

二、JS引擎

JS引擎是瀏覽器的重要組成部分,主要用於讀取並執行js。就是這家伙執行js的,但它不止於執行js。

各大瀏覽器的JS引擎:

瀏覽器 Js引擎
Chrome V8
Firefox SpiderMonkey
IE Chakra(查克拉)
Safari Nitro/JavaScript Core
Opera Carakan

雖然每個瀏覽器的JS引擎都不同,但他們執行js機制大致相同。

三、JS執行是單線程

單線程是指Js引擎執行Js時只分了一個線程給他執行,也就是執行js時是單線程的。

a.先了解線程

  • 有人可能會疑惑,線程是什么?

直接舉個例子吧,你打開一個瀏覽器(應用程序),那瀏覽器就是一個進程。打開瀏覽器后要做很多事情(各種分工):發送請求,接受請求,渲染頁面,執行js等等這些就是一個個線程。

我這里只是簡單的說一下,具體的大家可以找計算機操作系統資料深入學習。

b.為什么是單線程

  • 有可能有疑惑,為什么js執行要單線程,如果多線程不是可以執行得快一點嗎?

這個要回到Js歷史了,布蘭登·艾奇(Brendan Eich)老哥用10天創造js。當時js用來干嘛,簡單的瀏覽器交互,驗證,操作一下dom是吧。那把它設計成那么復雜干什么,而且如果多線程的話,操作dom會出現麻煩的事情,假設一個線程讀取DOM節點數據的同時,另一個線程把那個DOM節點刪了,呵呵。所以js一個線程就夠了,也就是一步一步順序運行下來。

c.證明一下單線程

單線程只能一步步執行下來,所以執行以下代碼會導致阻塞(有個while死循環),不會彈出hello

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

四、執行棧

實現js執行時的單線程,js引擎維護一個執行棧。(先進后出)

來個例子:運行這段代碼是執行棧是怎么做的。

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

執行棧代碼模擬

//執行棧
var exeStack = [];
//先壓如全局執行環境
exeStack.push('globalContext');
//遇到執行sayHello函數,ok,壓進去
exeStack.push('sayHello');
//執行sayHello函數發現,還有個getMessage函數,ok,壓進棧
exeStack.push('getMessage');
//執行完了getMessage函數,彈棧
exeStack.pop();
//繼續執行sayHello函數,又發現有console.log這個家伙,ok,你進棧
exeStack.push('console.log');
//執行了console后,輸出hello,console 彈棧
exeStack.pop();
//這時sayHello執行完,彈棧
exeStack.pop();
//最后整個代碼執行完,全局環境彈棧
exeStack.pop();

執行棧圖示:

這里主要是js在執行時的一個總體過程,但是你們可能會疑惑,壓進棧里面的一塊塊(抽象)東西到底包含的是什么?
我可以告訴你們是,執行上下文,global是指全局的的執行上下文,其他的是函數執行上下文,那到底這些上下文包含什么,我會在下一篇詳解。

五、小結

這篇主要是將js單線程是什么,並且怎么實現單線程的,先有個總體js執行過程的印象,下一篇會詳細寫js執行的細節,執行上下文。

本文出自博客園:http://www.cnblogs.com/Ry-yuan/
作者:Ry(淵源遠願)
歡迎訪問我的個人首頁:我的首頁
歡迎訪問我的github:https://github.com/Ry-yuan/demoFiles
歡迎轉載,轉載請標明出處,保留該字段。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM