<address id="16111"></address>

<output id="16111"><video id="16111"></video></output>
<code id="16111"><ol id="16111"><td id="16111"></td></ol></code>
<output id="16111"><form id="16111"></form></output>
    1. <acronym id="16111"></acronym>
    2. <output id="16111"><legend id="16111"><blockquote id="16111"></blockquote></legend></output>
      <output id="16111"></output>
      <dd id="16111"></dd>
      <var id="16111"><ol id="16111"></ol></var>

      好程序員-千鋒教育旗下高端IT職業教育品牌

      400-811-9990
      我的賬戶
      好程序員

      專注高端IT職業培訓

      親愛的猿猿,歡迎!

      已有賬號,請

      如尚未注冊?

      [HTML5] 好程序員web前端培訓分享JS引擎的執行機制

      [復制鏈接]
      38 0
      葉子老師 發表于 前天 16:27 | 只看該作者 |閱讀模式 打印 上一主題 下一主題
        好程序員web前端培訓分享JS引擎的執行機制,一、JS是單線程語言。JSEventLoopJS的執行機制。深入了解JS的執行,就等于深入了解JS里的eventloop
        1、靈魂三問:JS為什么是單線程的?為什么需要異步?單線程又是如何實現異步的呢?
        技術的出現,都跟現實世界里的應用場景密切相關的。同樣的,我們就結合現實場景,來回答這三個問題。
        (1)JS為什么是單線程的?
        JS最初被設計用在瀏覽器中,那么想象一下,如果瀏覽器中的JS是多線程的。
        場景描述:
        那么現在有2個進程,process1process2,由于是多進程的JS,所以他們對同一個dom,同時進行操作。process1刪除了該dom,而process2編輯了該dom,同時下達2個矛盾的命令,瀏覽器究竟該如何執行呢?
        這樣想,JS為什么被設計成單線程應該就容易理解了吧。
        (2)JS為什么需要異步?
        如果JS中不存在異步,只能自上而下執行,如果上一行解析時間很長,那么下面的代碼就會被阻塞。對于用戶而言,阻塞就意味著"卡死",這樣就導致了很差的用戶體驗。
        所以,JS中存在異步執行。
        (3)JS單線程又是如何實現異步的呢?
        既然JS是單線程的,只能在一條線程上執行,又是如何實現的異步呢?
        是通過的事件循環(eventloop),理解了eventloop機制,就理解了JS的執行機制。
        2JS中的eventloop(1)
        例1,觀察它的執行順序
        console.log(1)setTimeout(function(){console.log(2)},0)console.log(3)
        運行結果是:132
        也就是說,setTimeout里的函數并沒有立即執行,而是延遲了一段時間,滿足一定條件后才去執行的,這類代碼,我們叫異步代碼。
        所以,這里我們首先知道了JS里的一種分類方式,就是將任務分為:同步任務和異步任務。
        按照這種分類方式:JS的執行機制是:
        首先判斷JS是同步還是異步,同步就進入主進程,異步就進入eventtable
        異步任務在eventtable中注冊函數,當滿足觸發條件后,被推入eventqueue
        同步任務進入主線程后一直執行,直到主線程空閑時,才會去eventqueue中查看是否有可執行的異步任務,如果有就推入主進程中
        以上三步循環執行,這就是eventloop
        所以上面的例子,你是否可以描述它的執行順序了呢?
        console.log(1)是同步任務,放入主線程里
        setTimeout()是異步任務,被放入eventtable0秒之后被推入eventqueue
        console.log(3是同步任務,放到主線程里
        當13在控制條被打印后,主線程去eventqueue(事件隊列)里查看是否有可執行的函數,執行setTimeout里的函數。
        3JS中的eventloop(2)
        所以,上面關于eventloop就是我對JS執行機制的理解,直到我遇到了下面這段代碼。
        例2
        setTimeout(function(){console.log('定時器開始啦')});
        newPromise(function(resolve){console.log('馬上執行for循環啦');
        for(vari=0;i<10000;i++){i==99&&resolve();
        }}).then(function(){console.log('執行then函數啦')});console.log('代碼執行結束');
        嘗試按照,上文我們剛學到的JS執行機制去分析:
        setTimeout是異步任務,被放到eventtable
        newPromise是同步任務,被放到主進程里,直接執行打印console.log('馬上執行for循環啦')
        .then里的函數是異步任務,被放到eventtable
        console.log('代碼執行結束')是同步代碼,被放到主進程里,直接執行
        所以,結果是:馬上執行for循環啦---代碼執行結束---定時器開始啦---執行then函數啦嗎?
        親自執行后,結果居然不是這樣,而是:馬上執行for循環啦---代碼執行結束---執行then函數啦---定時器開始啦
        那么,難道是異步任務的執行順序,不是前后順序,而是另有規定?事實上,按照異步和同步的劃分方式,并不準確。
        而準確的劃分方式是:
        macro-task(宏任務):包括整體代碼scriptsetTimeoutsetInterval
        micro-task(微任務)Promiseprocess.nextTick
        JS引擎的執行機制
        按照這種分類方式,JS的執行機制是:
        執行一個宏任務,過程中如果遇到微任務,就將其放到微任務的“事件隊列”里
        當前宏任務執行完成后,會查看微任務的“事件隊列”,并將里面全部的微任務依次執行完
        重復以上2步驟,結合eventloop(1)eventloop(2),就是更為準確的JS執行機制了
        嘗試按照剛學的執行機制,去分析例2
        首先執行script下的宏任務,遇到setTimeout,將其放到宏任務的“隊列”里
        遇到newPromise直接執行,打印"馬上執行for循環啦"
        遇到then方法,是微任務,將其放到微任務的“隊列”里。
        打印"代碼執行結束"
        本輪宏任務執行完畢,查看本輪的微任務,發現有一個then方法里的函數,打印"執行then函數啦"
        到此,本輪的eventloop全部完成。
        下一輪的循環里,先執行一個宏任務,發現宏任務的“隊列”里有一個setTimeout里的函數,執行打印"定時器開始啦"
        所以最后的執行順序是:馬上執行for循環啦---代碼執行結束---執行then函數啦---定時器開始啦
        4、談談setTimeout
        這段setTimeout代碼什么意思?我們一般說:3秒后,會執行setTimeout里的那個函數
        setTimeout(function(){console.log('執行了')},3000)
        但是這種說并不嚴謹,準確的解釋是:3秒后,setTimeout里的函數被會推入eventqueue,而eventqueue(事件隊列)里的任務,只有在主線程空閑時才會執行。
        所以只有滿足(1)3秒后(2)主線程空閑,同時滿足時,才會3秒后執行該函數
        如果主線程執行內容很多,執行時間超過3秒,比如執行了10秒,那么這個函數只能10秒后執行了。

      好程序員web前端培訓官網:http://www.s8781.com/html5_class.shtml

      精彩內容,一鍵分享給更多人!
      收藏
      收藏0
      轉播
      轉播
      分享
      淘帖0
      支持
      支持0
      反對
      反對0
      回復

      使用道具 舉報

      您需要登錄后才可以回帖

      本版積分規則

      關注我們
      好程序員
      千鋒好程序員

      北京校區(總部):北京市海淀區寶盛北里西區28號中關村智誠科創大廈

      深圳西部硅谷校區:深圳市寶安區寶安大道5010號深圳西部硅谷B座A區605-619

      杭州龍馳智慧谷校區:浙江省杭州市下沙經濟技術開發區元成路199號龍馳智慧谷B座7層

      鄭州校區:鄭州市二七區航海中路60號海為科技園C區10層、12層

      Copyright 2007-2019 北京千鋒互聯科技有限公司 .All Right

      京ICP備12003911號-5 京公安網11010802011455號

      請您保持通訊暢通1對1咨詢馬上開啟

      狠狠射网