【知識梳理】4.2JS運行機制

cgh1999520 發布于2019-08-22 15:57 / 3405人閱讀

摘要：任務隊列分同步任務異步任務，異步任務要掛起，同步任務全部執行完再執行異步任務。執行棧執行的是同步任務。什么時候開啟異步任務和事件的，先注冊函數體，觸發時放入異步任務隊列，再執行點擊某一按鈕瀏覽器卡死中的。

1.對比同步和異步

使用異步的場景：

定時任務：setTimeout、setInterval

網絡請求：ajax請求、動態加載

事件綁定

//同步
  console.log(100);
  alert(200);//同步會造成阻塞
  console.log(300);

//異步
  console.log(100);
    setTimeout(function(){
        console.log(200);
    },1000);
  console.log(300);

//加載示例
console.log("start");
var img = document.createElement("img");
img.onload = function(){
    console.log("loaded");
}
img.src = "/xxx.png";
console.log("end");

2.同步任務和異步任務的優先順序

JS是單線程的，即在同一時間只能做一件事。從上到下執行。

任務隊列：分同步任務、異步任務（setTimeout()、setInterval()，異步任務要掛起，同步任務全部執行完再執行異步任務）。

Event Loop：同步任務放在運行棧里邊全部執行，遇到異步任務先掛起，等到時間到了的時候（即使是0，瀏覽器最小的是4毫秒），Timer模塊會把他放到異步隊列中，當js引擎發現運行棧里邊的同步任務全部執行完后，再去讀異步任務隊列，發現里邊有東西后，讀出來放到運行棧中執行，此時setTimeout函數體就變成了運行棧中的同步任務，執行完后，棧空了，再去監聽異步隊列中有沒有，如果有，再去執行。這個循環過程就叫做event loop。

1.執行棧執行的是同步任務。

2.什么時候向異步隊列中取任務。

3.什么時候往異步隊列中放任務。

什么時候開啟異步任務？

setTimeout和setInterval；

DOM事件（js的addEventListener，先注冊函數體，觸發時放入異步任務隊列，再執行；eg:點擊某一按鈕瀏覽器卡死）；

es6中的Promise。

     // 1.打印出順序為1、3、2
    console.log(1);
    setTimeout(function(){//setTimeout異步任務要掛起，同步任務全部執行完再執行異步任務
        console.log(2);
    },0);//4毫秒延遲
    console.log(3);

    // 2.只輸出a,while(true)是同步任務，一直在執行
    console.log("a");
    while(true){

    }
    console.log("b");

    // 3.只輸出A,同步任務全部執行完再執行異步任務
    console.log("A");
    setTimeout(function(){
        console.log("B");
    },0);
    while(1){
        
    }

3.異步任務（隊列）的放入時間和執行時間

    
    // 輸出四個4,for循環是個同步任務
    for(var i=0;i<4;i++){
        setTimeout(function(){//到1s時，Timer模塊才將其放入異步任務隊列中(放入時間)，等待事件循環執行（執行時間）
            console.log(i);
        },1000);
    }

4.一道面試題

//1.setTimeout()異步任務

for(var i=0;i<5;i++){
    setTimeout(function(){
        console.log(new Date,i);
    },1000);
}
console.log(new Date,i);

//運行結果
Thu Mar 15 2018 17:40:52 GMT+0800 (中國標準時間) 5

Thu Mar 15 2018 17:40:53 GMT+0800 (中國標準時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標準時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標準時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標準時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標準時間) 5


//2.立即執行函數

for(var i=0;i<5;i++){
    (function(j=i){
       setTimeout(function(){
         console.log(new Date,j);
       },1000);//此處為1000
    })(i);
}
console.log(new Date,i);

//運行結果
Thu Mar 15 2018 17:46:53 GMT+0800 (中國標準時間) 5

Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 0
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 1
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 2
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 3
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 4


//3.默認4毫秒延遲
for(var i=0;i<5;i++){
    (function(j=i){
       setTimeout(function(){
         console.log(new Date,j);
       },0);//此處為0
    })(i);
}
console.log(new Date,i);

//運行結果
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 5

Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 0
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 1
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 2
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 3
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標準時間) 4

GPU云服務器云服務器運行機制 nodejs運行機制 php 運行機制 php的運行機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93898.html

JS核心知識點梳理——異步，單線程，運行機制

摘要：引言學習的時候，經常聽人說，即是異步的，又是單線程的。所以我們說是異步單線程的。參考從瀏覽器多進程到單線程，運行機制最全面的一次梳理運行機制詳解再談異步機制詳解運行原理解析并發模型與事件循環 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言學習javascipt的時候，經常聽人說，javascipt即是異步...

TANKING 2019-08-26 13:55 評論0 收藏0
從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

摘要：如果看完本文后，還對進程線程傻傻分不清，不清楚瀏覽器多進程瀏覽器內核多線程單線程運行機制的區別。因此準備梳理這塊知識點，結合已有的認知，基于網上的大量參考資料，從瀏覽器多進程到單線程，將引擎的運行機制系統的梳理一遍。前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。 ----------超長文+多圖預警，需要花費不少時間。---------- 如果看完本文后，還...

wanghui 2019-08-22 13:56 評論0 收藏0
JS核心知識點梳理——上下文、作用域、閉包、this（上）

摘要：引言滿滿的干貨，面試必系列，參考大量資料，并集合自己的理解以及相關的面試題，對核心知識點中的作用域閉包上下文進行了梳理。如果在小區這個作用域找到了張老師，我就會在張老師的輔導下學鋼琴我張老師房間鋼琴構成了學琴的上下文環境。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言滿滿的干貨，面試必bei系列，參考大...

Andrman 2019-08-26 13:50 評論0 收藏0
NodeJs+Express+Mysql + Vuejs 項目實戰 - 大綱

摘要：多一個技能多一條出路，祝你在自學道路上越走越好，掌握自己的核心技能，不只是優秀，還要成為不可替代的人 NodeJs+Express+Mysql + Vuejs 項目實戰最近準備寫一系列文章，全面講述如何基于NodeJs + Express + Mysql + Vuejs 從零開發前后端完全分離項目；文筆及技術可能在某些方面欠佳，請您指正，共同學習進步前端：Vuejs全家桶后端：...

noONE 2019-08-23 14:55 評論0 收藏0