關於js執行順序的總結

2021-10-01 08:30:43 字數 1543 閱讀 1353

背景:最近在做管理專案的時候,由於頁面業務比較多,呼叫方法比較多。就經常出現同步非同步的問題,在方法中套用方法,資料的各種渲染等問題接踵而至,遇到多了,感覺需要總結一下。

參考資料:新增鏈結描述

總結如下:

js是單執行緒,始終是等到乙個方法執行完後再執行下乙個方法。

那麼這個執行順序就相當的重要了。

1、js執行中方法自上而下依次執行

2、先執行執行棧中的方法,依次執行

3、遇到非同步問題放入到任務列中

任務列----》 (微佇列和巨集佇列)

微佇列 -----》微任務===

巨集佇列------》巨集任務===

在相同執行層級的微任務和巨集任務中,微任務先執行,然後巨集任務再執行;

4、執行棧中的方法執行完成過後再執行任務列中的方法。

5、如此迴圈往復稱為事件迴圈

注意事項:

1、promise 非同步體現在then,catch中,寫在promise中的**被當作同步任務立即執行

2、async await中 await之前的**也是立即執行的(實際上await是乙個讓出執行緒的標誌。await後面的表示式會先執行一遍,將await後面的**加入到microtask中,然後就會跳出整個async函式來執行後面的**。)

3、注意整個js**中的層次關係。同層次之間進行執行棧和任務列分析。微任務和巨集任務的推敲。然後再往下一層級推敲。(經過幾次實際操作後得出的。。。之前一直以為只要是巨集任務就會比微任務後執行來著,後來實踐不是這樣的)

(function() );

new promise(resolve => );

promise.resolve().then(() => console.log(4));

}).then(() => );

console.log(7);

})();

(function() );

new promise(resolve => );

});promise.resolve().then(() => console.log(5));

}).then(() => );

console.log(9);

})();

async function async1() 

async function async2()

console.log('script start');

settimeout(function() , 0)

async1();

new promise(function(resolve) ).then(function() );

console.log('script end');

function fn());

},0);

new promise((resolve, reject) => ).then(data => );

settimeout(() => ,0);

console.log(7);

}fn(); //

JS執行順序

一 語法分析 瀏覽器將所有js檢查一遍,看有沒有語法錯誤,這裡並不會執行,沒有錯誤則進行第二步,預編譯 二 預編譯 首先要理解函式宣告整體提公升,變數 宣告提公升。這裡要注意變數的提公升,一般我們宣告乙個變數都是 var a 1 console.log a 1 但實際上拆分成了兩步,真正執行是這樣的...

js執行順序

執行緒 cpu 排程的最小單位 程序 cpu 資源分配的最小單位 js是單執行緒的,在同一時間,只能做一件事。但是js有同步任務和非同步任務。同步 有a,b兩段 執行完a後執行b 非同步 有a,b兩段 a和b同時執行 在非同步任務中還有微任務和巨集任務 微任務 promise,process.nex...

js 執行順序

同步任務 非同步任務 同步任務 立即執行 非同步任務 進入到非同步佇列當中 event queue eg ajax,settimeout,then,setinterval event loop 事件迴圈 task macro task 巨集任務 micro task 微任務 macro task 巨...