1.瀏覽器內核：

在講JavaScript異步之前，先講一下JavaScript運行環(huán)境，因為JavaScript是否能實現(xiàn)異步是通過運行環(huán)境機制決定的，我們經常使用的環(huán)境就是瀏覽器環(huán)境了，所以我今天主要講一下在瀏覽器的渲染進程（瀏覽器內核）如何執(zhí)行異步的。

負責頁面的渲染，腳本的執(zhí)行和時間處理，每一個tab頁也都表示一個進程

對于渲染進程來說，它其實就是多線程的：

• GUI渲染線程：負責頁面渲染解析 HTML/CSS 生成 DOM 樹和 CSSOM 樹等
• JS引擎線程：負責解析和執(zhí)行JavaScript腳本程序，并且一個進程只有一個js引擎線程，js引擎是一個單線程
• 事件觸發(fā)線程：用來控制事件循環(huán)（click，setTimeout，ajax等），當事件滿足條件的時候，將事件放到js引擎所在的執(zhí)行隊列中
• 定時觸發(fā)器線程：setInterval與setTimeout所在的線程， 定時任務并不是由JS引擎計時的，是由定時觸發(fā)線程來計時的，執(zhí)行完畢會通知事件觸發(fā)進程
• 異步http請求線程：處理ajax請求，當完成后，通過回調函數觸發(fā)事件觸發(fā)線程

GUI渲染線程和JS引擎線程互斥:

當JS引擎線程執(zhí)行時GUI渲染線程會被掛起，GUI更新則會被保存在一個隊列中等待JS引擎線程空閑時立即被執(zhí)行,防止渲染結果不可預期。

2.單線程:

javascript是單線程的,說明在任何一個時間點，JavaScript 的主線程（也就是它的調用棧）只能執(zhí)行一件任務。如果前一個任務沒執(zhí)行完，后一個任務就必須排隊等待。

如果是這樣就會導致異步阻塞,很多任務沒有辦法瞬時完成,比如:

• 網絡請求:向服務器請求數據,有時可能需要幾秒
• 定時器:需要到指定時間才能執(zhí)行
• 用戶事件:等待用戶的交互,發(fā)生時間不確定

3.異步:

異步就是為了解決單線程的問題,可以實現(xiàn)異步代碼不阻塞,當觸發(fā)到異步代碼的時候,把它放到一遍

瀏覽器內核是如何實現(xiàn)異步呢?

JavaScript本身是單線程的，它實現(xiàn)異步來自于它所運行的環(huán)境—通常是瀏覽器,這個環(huán)境提供了一套復雜的機制，我們可以把它里面的一系列線程和機制策略想象成一個分工明確的團隊。這個團隊由四個核心成員組成:

• JS 主線程  & 調用棧 ：這是 JavaScript 唯一的核心員工。他很勤奮，一次只能專心做一件事，所有同步任務都在他這里排隊執(zhí)行。
• 宿主環(huán)境 API ：這是 JavaScript 的“外包團隊”。瀏覽器提供了很多線程，比如定時器模塊、網絡請求模塊等。這些不占用 JS 主線程的時間，可以在后臺里獨立工作。
• 任務隊列：這是一個待辦列表。當宿主環(huán)境完成了某項異步任務后（比如定時器時間到了，或者網絡請求成功返回了），他們不會直接把結果交給 JS 主線程（因為主線程可能正在忙），而是把相應的回調函數放到這個待辦列表里排隊。
• 事件循環(huán)：調用棧 -> 微任務 -> 宏任務 -> 渲染

任務隊列又分為兩種:

• 宏任務隊列：存放 `setTimeout`, `setInterval`, I/O 操作，UI 渲染等任務的回調。我們上面講的“任務隊列”主要指的就是它。
• 微任務隊列：存放 `Promise.then()`, `async/await` 等任務的回調。

微任務的優(yōu)先級高于宏任務,當微任務和宏任務一起執(zhí)行完畢的時候并且調用棧是空的時候,先執(zhí)行微任務再執(zhí)行宏任務

setTimeout(() => console.log('Timeout (宏任務)'), 0);
Promise.resolve().then(() => console.log('Promise (微任務)'));
console.log('Script (同步)');
// 輸出順序:
// Script (同步)
// Promise (微任務)
// Timeout (宏任務)

4.回調地獄:

當多個相互依賴的異步操作需要按順序執(zhí)行時，開發(fā)者將后一個操作的邏輯寫在了前一個操作的回調函數中，導致函數調用層層嵌套，形成一種橫向擴展、難以閱讀和維護的代碼結構。

回調地獄會導致什么問題:

1. 可讀性極差: 代碼不是從上到下線性執(zhí)行，而是像剝洋蔥一樣，一層包著一層。人的大腦很難快速理清其中的邏輯順序和依賴關系。

2. 難以維護: 如果需求變更，比如要在第二步和第三步之間增加一個新的異步操作，你需要小心翼翼地找到正確的位置，插入新的嵌套層，并調整大量的花括號和縮進。這極易出錯。

3. 錯誤處理復雜: `try...catch` 無法跨越異步邊界捕獲回調函數中的錯誤。你必須在每一個嵌套層級都單獨處理錯誤（就像上面代碼中的 `err1`, `err2`, `err3`），這導致代碼非常冗長和重復。

4. 耦合度高: 每一層的邏輯都和上一層的回調緊緊地耦合在一起，很難將某一步的邏輯抽離出來進行復用。

典型的回調地獄:

console.log('開始！');
setTimeout(() => {
  console.log('1秒過去了'); // 第一個回調
  // 為了保證順序，第二個setTimeout必須嵌套在第一個回調內部
  setTimeout(() => {
    console.log('又2秒過去了'); // 第二個回調
    // 第三個setTimeout必須嵌套在第二個回調內部
    setTimeout(() => {
      console.log('全部完成！'); // 第三個回調
    }, 3000); // 3秒
  }, 2000); // 2秒
}, 1000); // 1秒

解決辦法:

1.使用 `Promise` 鏈式調用:

function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
delay(1000)
  .then(() => {
    console.log('1秒過去了');
    // 返回一個新的Promise，以便繼續(xù)鏈接.then
    return delay(2000); 
  })
  .then(() => {
    console.log('又2秒過去了');
    return delay(3000);
  })
  .then(() => {
    console.log('全部完成！');
  })
  .catch(err => {
    // 統(tǒng)一處理鏈條中任何環(huán)節(jié)可能出現(xiàn)的錯誤
    console.error('出錯了:', err);
  });

2.使用async/await:

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
// 必須在一個 async 標記的函數內部使用 await
async function runTimerSequence() {
  try {
    console.log('開始！');

    await delay(1000); // “等待”1秒，但不會阻塞主線程
    console.log('1秒過去了');

    await delay(2000); // “等待”2秒
    console.log('又2秒過去了');

    await delay(3000); // “等待”3秒
    console.log('全部完成！');

  } catch (err) {
    console.error('出錯了:', err);
  }
}
// 執(zhí)行這個異步函數
runTimerSequence();

總結 

到此這篇關于JavaScript單線程實現(xiàn)異步的文章就介紹到這了,更多相關JS單線程實現(xiàn)異步內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論