>[success] # js 引擎 1. **一般說的js是單線程，指的就是'js引擎'**,他主要做的'運行過程中解析JS源代碼并將其轉換成可執行的機器碼并執行' 2. **雖然 JS引擎線程是單線程的，并不代表參與js執行過程的線程就只有一個**，其所在容器的其他線程也參與該過程，但是永遠只有JS引擎線程在執行JS腳本程序，**其他線程只協助，不參與代碼解析與執行** 3. **js 引擎的構成主要兩個部分** 2.1.'**內存堆**' 引用類型實際值、內存分配的地方 2.2.'**調用棧**' 基本類型存儲、引用類型地址名存儲、代碼邏輯執行的地方 * **說明** **關于棧**:棧是一個臨時存儲空間，主要存儲局部變量和函數調用（對于全局表達式會創建匿名函數并調用）,對于基本數據類型（**String、Undefined、Null、Boolean、Number、BigInt、Symbol**）的局部變量，會直接在棧中創建,棧中只存儲它的引用地址，也就是我們常說的淺拷貝。全局變量以及閉包變量也是只存儲引用地址。簡單說棧中存儲的**數據都是輕量的**。 **關于堆**，對象數據類型局部變量會存儲在堆中，垃圾回收也是在這里 * **js 引擎兩個部分堆一個是棧**  [如果你對堆棧具體作用感興趣可以參考這篇文章1](https://juejin.cn/post/6844903908452597768#heading-16) [如果你對堆棧具體作用感興趣可以參考這篇文章2](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=180#/detail/pc?id=3183) >[info] ## 在引擎中執行過程 [關于這部分可以參考的鏈接](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf) 1.js 引擎是單線程程的，棧這種數據結構'**先進后出**'，只有一個進出的棧頂 2.已一段代碼為例： ~~~ function multiply(x, y) { return x * y; } function printSquare(x) { var s = multiply(x, x); console.log(s); } printSquare(5); ~~~ * 在棧中的效果  * 形象的動態圖  >[danger] ##### 關于堆棧溢出(blowing the stack) ~~~ 1.'Blowing the stack'—當達到最大調用堆棧大小時,會發生這種情況。 這可能會很容易發生,特別是如果你使用遞歸 2.例如代碼案例 function foo() { foo(); } foo(); ~~~ * 溢出  >[success] # GUI渲染線程，瀏覽器事件觸發線程 1. 一個瀏覽器至少實現三個常駐線程：**'javascript引擎線程'，'GUI渲染線程'，'瀏覽器事件觸發線程'。** 2. 當界面需要重繪（Repaint）或由于某種操作引發回流(reflow)時,該線程就會執行。但需要注意** GUI渲染線程與JS引擎是互斥的**，當JS引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。 [csdn--setTimeout解決GUI渲染線程阻塞問題](https://blog.csdn.net/qq_26222859/article/details/77622222) >[danger] ##### javascript引擎線程，GUI渲染線程 互斥一個小案例  1. 下面代碼運行會發現執行'**updateSync**'方法的按鈕會一下在頁面顯示999，相反執行'updateAsync '方法的按鈕數組會一點一點的漲，這是就很好解釋了 **'javascript引擎線程，GUI渲染線程 互斥'** 在'updateSync'我沒執行完你'GUI渲染線程'就在哪給我等著，這一等就直接變成'999',另一個則相反可以通過圖更形象的看出來 ~~~ <div id="output"></div> <button onclick="updateSync ()">Run Sync</button> <button onclick="updateAsync ()">Run Async</button> <script> function updateSync() { for (var i = 0; i < 1000; i++) { document.getElementById('output').innerHTML = i; } } function updateAsync() { var i = 0; function updateLater() { document.getElementById('output').innerHTML = (i++); if (i < 1000) { setTimeout(updateLater, 0); } } updateLater(); } </script> ~~~