事件循環
瀏覽器的進程模型
何為進程？
程序運?需要有它??專屬的內存空間，可以把這塊內存空間簡單的理解為進程
每個應??少有?個進程，進程之間相互獨?，即使要通信，也需要雙?同意
何為線程？
有了進程后，就可以運?程序的代碼了。
運?代碼的「?」稱之為「線程」。
?個進程?少有?個線程，所以在進程開啟后會?動創建?個線程來運?代碼，該線程稱之為主線程。
如果程序需要同時執?多塊代碼，主線程就會啟動更多的線程來執?代碼，所以?個進程中可以包含多個線程。
瀏覽器有哪些進程和線程？
瀏覽器是?個多進程多線程的應?程序
瀏覽器內部?作極其復雜。
為了避免相互影響，為了減少連環崩潰的?率，當啟動瀏覽器后，它會?動啟動多個進程。
可以在瀏覽器的任務管理器中查看當前的所有進程
其中，最主要的進程有：
- 瀏覽器進程
主要負責界?顯示、?戶交互、?進程管理等。瀏覽器進程內部會啟動多個
線程處理不同的任務。
- ?絡進程
負責加載?絡資源。?絡進程內部會啟動多個線程來處理不同的?絡任務。
- 渲染進程（重點）
渲染進程啟動后，會開啟?個渲染主線程，主線程負責執? HTML、CSS、JS 代碼。
默認情況下，瀏覽器會為每個標簽?開啟?個新的渲染進程，以保證不同的標簽?之間不相互影響。
將來該默認模式可能會有所改變，有興趣的可以參見chrome官方說明文檔。
渲染主線程是如何?作的？
渲染主線程是瀏覽器中最繁忙的線程，需要它處理的任務包括但不限于：
-
解析 HTML
-
解析 CSS
-
計算樣式
-
布局
-
處理圖層
-
每秒把??畫 60 次
-
執?全局 JS 代碼
-
執?事件處理函數
-
執?計時器的回調函數
-
......
思考題：為什么渲染進程不適?多個線程來處理這些事情？
要處理這么多的任務，主線程遇到了?個前所未有的難題：如何調度任務？
?如：
-
我正在執??個 JS 函數，執?到?半的時候?戶點擊了按鈕，我該?即
去執?點擊事件的處理函數嗎？ -
我正在執??個 JS 函數，執?到?半的時候某個計時器到達了時間，我
該?即去執?它的回調嗎？ -
瀏覽器進程通知我“?戶點擊了按鈕”，與此同時，某個計時器也到達了時
間，我應該處理哪?個呢？ -
......
渲染主線程想出了?個絕妙的主意來處理這個問題：排隊
- 在最開始的時候，渲染主線程會進??個?限循環
- 每?次循環會檢查消息隊列中是否有任務存在。如果有，就取出第?個任務
執?，執?完?個后進?下?次循環；如果沒有，則進?休眠狀態。 - 其他所有線程（包括其他進程的線程）可以隨時向消息隊列添加任務。新任
務會加到消息隊列的末尾。在添加新任務時，如果主線程是休眠狀態，則會
將其喚醒以繼續循環拿取任務
這樣?來，就可以讓每個任務有條不紊的、持續的進?下去了。
整個過程，被稱之為事件循環（消息循環）
若?解釋
何為異步？
代碼在執?過程中，會遇到?些?法?即處理的任務，?如：
- 計時完成后需要執?的任務 ——
setTimeout 、 setInterval - ?絡通信完成后需要執?的任務 --
XHR 、 Fetch - ?戶操作后需要執?的任務 --
addEventListener
如果讓渲染主線程等待這些任務的時機達到，就會導致主線程?期處于
「阻塞」的狀態，從?導致瀏覽器「卡死」
渲染主線程承擔著極其重要的?作，?論如何都不能阻塞！
因此，瀏覽器選擇異步來解決這個問題
使?異步的?式，渲染主線程永不阻塞
?試題：如何理解 JS 的異步？
參考答案：
JS是??單線程的語?，這是因為它運?在瀏覽器的渲染主線程中，?渲染
主線程只有?個。
?渲染主線程承擔著諸多的?作，渲染??、執? JS 都在其中運?。
如果使?同步的?式，就極有可能導致主線程產?阻塞，從?導致消息隊列
中的很多其他任務?法得到執?。這樣?來，???會導致繁忙的主線程?
?的消耗時間，另???導致???法及時更新，給?戶造成卡死現象。
所以瀏覽器采?異步的?式來避免。具體做法是當某些任務發?時，?如計
時器、?絡、事件監聽，主線程將任務交給其他線程去處理，?身?即結束
任務的執?，轉?執?后續代碼。當其他線程完成時，將事先傳遞的回調函
數包裝成任務，加?到消息隊列的末尾排隊，等待主線程調度執?。
在這種異步模式下，瀏覽器永不阻塞，從?最?限度的保證了單線程的流暢
運?。
JS為何會阻礙渲染？
先看代碼
<h1>Mr.Wu is awesome!</h1>
<button>change</button>
<script>
var h1 = document.querySelector('h1');
var btn = document.querySelector('button');
// 死循環指定的時間
function delay(duration) {
var start = Date.now();
while (Date.now() - start < duration) {}
}
btn.onclick = function () {
h1.textContent = 'xw很帥！';
delay(3000);
};
</script>
點擊按鈕后，會發?什么呢？
運行代碼如下：
點擊按鈕change之后幾秒后才會顯示出如下：
任務有優先級嗎？
任務沒有優先級，在消息隊列中先進先出
但消息隊列是有優先級的
根據 W3C 的最新解釋:
-
每個任務都有?個任務類型，同?個類型的任務必須在?個隊列，不同類型
的任務可以分屬于不同的隊列。
在?次事件循環中，瀏覽器可以根據實際情況從不同的隊列中取出任務執
?。 -
瀏覽器必須準備好?個微隊列，微隊列中的任務優先所有其他任務執?
https://html.spec.whatwg.org/multipage/webappapis.html#p
erform-a-microtask-checkpoint隨著瀏覽器的復雜度急劇提升，W3C 不再使?宏隊列的說法
在?前 chrome 的實現中，?少包含了下?的隊列：
- 延時隊列：?于存放計時器到達后的回調任務，優先級「中」
- 交互隊列：?于存放?戶操作后產?的事件處理任務，優先級「?」
- 微隊列：?戶存放需要最快執?的任務，優先級「最?」
添加任務到微隊列的主要?式主要是使? Promise、MutationObserver
例如：
// ?即把?個函數添加到微隊列
Promise.resolve().then(函數)
瀏覽器還有很多其他的隊列，由于和我們開發關系不?，不作考慮
?試題：闡述?下 JS 的事件循環
參考答案：
事件循環?叫做消息循環，是瀏覽器渲染主線程的?作?式。
在 Chrome 的源碼中，它開啟?個不會結束的 for 循環，每次循環從消息
隊列中取出第?個任務執?，?其他線程只需要在合適的時候將任務加?到
隊列末尾即可。
過去把消息隊列簡單分為宏隊列和微隊列，這種說法?前已?法滿?復雜的
瀏覽器環境，取?代之的是?種更加靈活多變的處理?式。
根據 W3C 官?的解釋，每個任務有不同的類型，同類型的任務必須在同?
個隊列，不同的任務可以屬于不同的隊列。不同任務隊列有不同的優先級，
在?次事件循環中，由瀏覽器??決定取哪?個隊列的任務。但瀏覽器必須
有?個微隊列，微隊列的任務?定具有最?的優先級，必須優先調度執?。
?試題：JS 中的計時器能做到精確計時嗎？為什么？
參考答案：
不?，因為：
1. 計算機硬件沒有原?鐘，?法做到精確計時
2. 操作系統的計時函數本身就有少量偏差，由于 JS 的計時器最終調?的
是操作系統的函數，也就攜帶了這些偏差
3. 按照 W3C 的標準，瀏覽器實現計時器時，如果嵌套層級超過 5 層，
則會帶有 4 毫秒的最少時間，這樣在計時時間少于 4 毫秒時?帶來
了偏差
4. 受事件循環的影響，計時器的回調函數只能在主線程空閑時運?，因此
?帶來了偏差
浙公網安備 33010602011771號