>[success] # js 如何做到異步的 **js是單線程，如何做到異步的呢？是誰來處理異步這部分** 1. 同時做多件事情是'異步編程'；一次只能處理一件事，上一件事情處理完，下一件才能開始處理，這種操作是'同步編程',異步編程實現機制有例如 **'多線程機制' ，'EventLoop事件循環機制'** 2. js 采用了 **'EventLoop事件循環機制'** >[info] ## js 運行容器 1. j**s是解釋型語言**，因此在執行過程中需要將**源碼轉換成字節碼等中間代碼或者是機器碼**，在執行的過程中**實時編譯**，邊編譯邊執行這個過程需要'**js 引擎**'。常見的js 引擎 **Chrome V8引擎 (chrome、Node、Opera）、SpiderMonkey （Firefox） Nitro (Safari）、Chakra （Edge)** 2. '**JS 引擎往往不是單獨運行的**' 它運行在一個宿主環境中，對于大多數開發者來說就是典型的**瀏覽器和 Node.js** 3. 這些環境都有一個共同點，就是都擁有一個'**事件循環**'的內置機制，它隨著時間的推移每次都去調用JS 引擎去處理程序中多個塊的執行 >[danger] ##### 瀏覽器這個容器為例 1. 目前多數的瀏覽器其實都是**多進程**的，當我們打開一個tab頁面時就會開啟一個新的進程，這是為了**防止一個頁面卡死而造成所有頁面無法響應**，整個瀏覽器需要強制退出 2. 每個進程中又有很**多的線程**，其中包括執**行JavaScript代碼的線程** 2.1. **GUI渲染線程**:渲染頁面 & 繪制圖形 2.2. **JS引擎線程**:渲染和解析JS代碼 2.3. **事件觸發線程**:監聽事件觸發 2.4. **定時觸發器線程**:給定時器計時的 2.5. **異步HTTP請求線程**:基于HTTP網絡從服務器端獲取資源和信息 2.6. **WebWorker** 3. JavaScript的代碼執行是在一個單獨的線程中執行的，javaScript的代碼，在**同一個時刻只能做一件事**；如果這件事是非常耗時的，就意味著**當前的線程就會被阻塞** 4. **瀏覽器的每個進程是多線程的比如網絡請求、定時器,其他線程可以來完成** * 總結：瀏覽器為例主要的兩個部分'渲染引擎','js引擎'，渲染引擎主要工作內容就是根據我們HTML、CSS、JS的定義，繪制出相應的頁面結構及展現形式，常見的渲染引擎**Webkit (safari、老版本的chrome)、Blink (新版本的chrome)、Trident (IE)、Gecko (Firefox)** >[info] ## 運行時Runtime 1. **首先Javascript引擎是工作在一個環境(容器)內的**，**這個環境暴露一些額外的對象（API），它們可以在我們的代碼在執行的時候可以使用這些特性與JS代碼做交互** 2. 簡單的說**'Javascript Runtime' 就是JS宿主環境創建的一個scope**， 在這個**scope內JS可以訪問宿主環境提供的一系列特性** 3. 有了 **'Javascript Runtime' 就可以相同的JS引擎，在不同的環境下，便有不同的能力** 4. js 常見提供 **'Javascript Runtime'宿主'web 瀏覽器','node.js'** * **兩個環境中，對應的引擎和runtime** | 宿主環境 | JS引擎 | 運行時特性 | | --- | --- | --- | | 瀏覽器 | chrome V8引擎 | DOM、 window對象、用戶事件、Timers等 | | node.js | chrome V8引擎 | require對象、 Buffer、Processes、fs 等 | [Javascript v8引擎和Web API](https://stackoverflow.com/questions/59316975/the-javascript-v8-engine-and-web-apis) >[danger] ##### webApi 1. 現在有一個問題要弄清楚'**setTimeout，setInterval**',和 **XHR**，他們在MDN 上的歸類屬于的是'**WebApi**',并且定義他們組織是'**whatwg**',而定義js組織是'**ECMAScript**，''**webApi**' 可以理解成是**瀏覽器容器額外提供的一些瀏覽器api方法**，**簡單的說'Web api'它們不是 JavaScript規范的一部分** 2. '**webApi**'就是瀏覽器這個容器提供的'**Javascript Runtime**' 3. 從本質上講，它們是你**無法訪問的線程**，但是你**能夠調用它們**。它們是瀏覽器并行啟動的一部分。如果你是一個 Node.js 的開發者，這些就是 C++ 的一些 API 4. '**webApi**' 主要能力 4.1. Event Listeners 4.2. HTTP request 4.3. Timing functions 5. 現在可以發現**setTimeout，setInterva 這類我們認為的js的異步能力是所在容器所提供的，并不是js引擎** [關于whatwg鏈接](https://segmentfault.com/q/1010000002408941) >[info] ## 結論 1. **js引擎是單線程的，但是運行js引擎的容器是多線程的**,異步api是**容器提供**的并且**容器提供的單獨執行他們的線程** [javascript 到底如何實現異步？](https://www.zhihu.com/question/22852515)