欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳細分析單線程JS執(zhí)行問題

 更新時間:2017年11月22日 08:44:41   投稿:laozhang  
給大家詳細講解一下單線程javascript的執(zhí)行問題,以及通過實例分析用法。

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

一、介紹

隨著js不斷學(xué)習(xí),你可能會慢慢的好奇,用了這么久的js,卻不知道這js在瀏覽器怎么被執(zhí)行的,很尷尬。所以,我查閱很多資料來總結(jié)JS的執(zhí)行過程,也分享出來,和大家一起學(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

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

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

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

a.先了解線程 有人可能會疑惑,線程是什么?

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

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

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

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

c.證明一下單線程

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

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

四、執(zhí)行棧

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

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

//運行代碼
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,壓進去
exeStack.push('sayHello');
//執(zhí)行sayHello函數(shù)發(fā)現(xiàn),還有個getMessage函數(shù),ok,壓進棧
exeStack.push('getMessage');
//執(zhí)行完了getMessage函數(shù),彈棧
exeStack.pop();
//繼續(xù)執(zhí)行sayHello函數(shù),又發(fā)現(xiàn)有console.log這個家伙,ok,你進棧
exeStack.push('console.log');
//執(zhí)行了console后,輸出hello,console 彈棧
exeStack.pop();
//這時sayHello執(zhí)行完,彈棧
exeStack.pop();
//最后整個代碼執(zhí)行完,全局環(huán)境彈棧
exeStack.pop();

執(zhí)行棧圖示:

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

五、小結(jié)

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

相關(guān)文章

  • lightBox 簡易的全屏透明遮罩解決方法

    lightBox 簡易的全屏透明遮罩解決方法

    現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了,絕大多數(shù)遮罩是通過計算頁面大小,然后覆蓋一個與頁面同等大小的層實現(xiàn),如騰訊qzone, wordpress后臺。
    2010-06-06
  • 簡單易懂的天氣插件(代碼分享)

    簡單易懂的天氣插件(代碼分享)

    本文主要分享了天氣插件的示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • js實現(xiàn)簡單選項卡功能

    js實現(xiàn)簡單選項卡功能

    這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡單的選項卡功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-08-08
  • js鼠標按鍵事件和鍵盤按鍵事件用法實例匯總

    js鼠標按鍵事件和鍵盤按鍵事件用法實例匯總

    這篇文章主要介紹了js鼠標按鍵事件和鍵盤按鍵事件用法,結(jié)合實例形式總結(jié)分析了JavaScript針對鼠標與鍵盤事件的常用操作技巧,需要的朋友可以參考下
    2016-10-10
  • Javascript中click與blur事件的順序詳析

    Javascript中click與blur事件的順序詳析

    這篇文章主要給大家介紹了關(guān)于Javascript中click與blur事件順序的相關(guān)資料,文中介紹的非常詳細,對大家學(xué)習(xí)或者使用Javascript中的click與blur事件具有一定的參考學(xué)習(xí)價值,需要的朋友可以下面來一起看看吧。
    2017-04-04
  • JS文件上傳神器bootstrap fileinput詳解

    JS文件上傳神器bootstrap fileinput詳解

    這篇文章主要介紹了JS文件上傳神器Bootstrap FileInput,樣式非常美觀,并且支持上傳文件預(yù)覽,ajax同步或異步上傳,拖曳文件上傳等炫酷的功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 詳解Bootstrap創(chuàng)建表單的三種格式(一)

    詳解Bootstrap創(chuàng)建表單的三種格式(一)

    在本章中,我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過一些簡單的 HTML 標簽和擴展的類即可創(chuàng)建出不同樣式的表單,對bootstrap 表單相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • 原生js實現(xiàn)日期選擇插件

    原生js實現(xiàn)日期選擇插件

    這篇文章主要為大家詳細介紹了原生js實現(xiàn)日期選擇插件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • javascript實用方法總結(jié)

    javascript實用方法總結(jié)

    本文這里給大家總結(jié)了一些常用的javascript方法,都是些短小精悍的小代碼,提高執(zhí)行效率,這里推薦給大家。
    2015-02-02
  • js實現(xiàn)的星星評分功能函數(shù)

    js實現(xiàn)的星星評分功能函數(shù)

    這篇文章主要介紹了js實現(xiàn)的星星評分功能函數(shù),涉及JavaScript響應(yīng)鼠標事件實現(xiàn)針對頁面元素的遍歷與樣式屬性的修改技巧,非常簡單實用的代碼,需要的朋友可以參考下
    2015-12-12

最新評論