詳細(xì)分析單線程JS執(zhí)行問(wèn)題
大家在學(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í)行上下文。
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08js鼠標(biāo)按鍵事件和鍵盤(pán)按鍵事件用法實(shí)例匯總
這篇文章主要介紹了js鼠標(biāo)按鍵事件和鍵盤(pán)按鍵事件用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)鼠標(biāo)與鍵盤(pán)事件的常用操作技巧,需要的朋友可以參考下2016-10-10詳解Bootstrap創(chuàng)建表單的三種格式(一)
在本章中,我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類(lèi)即可創(chuàng)建出不同樣式的表單,對(duì)bootstrap 表單相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01js實(shí)現(xiàn)的星星評(píng)分功能函數(shù)
這篇文章主要介紹了js實(shí)現(xiàn)的星星評(píng)分功能函數(shù),涉及JavaScript響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁(yè)面元素的遍歷與樣式屬性的修改技巧,非常簡(jiǎn)單實(shí)用的代碼,需要的朋友可以參考下2015-12-12