瀏覽器知識——從進(jìn)程線程角度講輸入url過程

參考文章
https://zhuanlan.zhihu.com/p/47407398
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
以下內(nèi)容都是以chrome瀏覽器為準(zhǔn)，未進(jìn)行其他瀏覽器測試

對于進(jìn)程線程不了解的同學(xué)可以看看這個中國慕課大學(xué) (時間有點長间学，就是上課那樣，雖然無聊容易犯困，但還是覺得挺好的)

打開瀏覽器后發(fā)生了什么箱熬？

當(dāng)你打開一個chrome瀏覽器后沽瞭，相當(dāng)于開啟了一系列的進(jìn)程。所以我們先了解一下有什么進(jìn)程

瀏覽器主進(jìn)程：

負(fù)責(zé)協(xié)調(diào)海雪、主控土匀，負(fù)責(zé)瀏覽器界面顯示子房，與用戶交互。如前進(jìn)恒削，后退等池颈，負(fù)責(zé)各個頁面的管理尾序，創(chuàng)建和銷毀其他進(jìn)程钓丰，將Renderer進(jìn)程得到的內(nèi)存中的Bitmap，繪制到用戶界面上每币，網(wǎng)絡(luò)資源的管理携丁，下載等。這個有且只有一個兰怠。

GPU進(jìn)程（非必要梦鉴，但是一般情況下都存在）：

一般情況下，web瀏覽器完全依賴CPU進(jìn)行網(wǎng)頁內(nèi)容的渲染揭保。利用GPU直接對網(wǎng)頁內(nèi)容進(jìn)行圖層組合可以帶來顯著的性能提升肥橙，最明顯的例子莫過于video元素，它利用硬件進(jìn)行視頻解碼秸侣，利用WebGL為H5 canvas提供硬件3D加速圖形繪制渲染存筏，期間占用的內(nèi)存區(qū)域是CPU無法快速存取的，具體了解可看這篇http://ju.outofmemory.cn/entry/133365

第三方插件進(jìn)程：

每種類型的插件對應(yīng)一個進(jìn)程味榛，僅當(dāng)使用該插件時才創(chuàng)建

瀏覽器渲染進(jìn)程（瀏覽器內(nèi)核）

（Renderer進(jìn)程椭坚，內(nèi)部是多線程的）：默認(rèn)每個Tab頁面一個進(jìn)程，互不影響搏色。主要作用為頁面渲染善茎，腳本執(zhí)行，事件處理等频轿。

網(wǎng)絡(luò)服務(wù)進(jìn)程：

處理網(wǎng)絡(luò)請求垂涯，從網(wǎng)上獲取數(shù)據(jù)，有且只有一個航邢。

查看chrome瀏覽器進(jìn)程可通過快捷鍵shift+ESC進(jìn)行查看

為什么需要多進(jìn)程耕赘？

這種多進(jìn)程的瀏覽器方便使用沙盒模型隔離插件等進(jìn)程，提高瀏覽器穩(wěn)定性翠忠，在一些插件出錯的時候不會導(dǎo)致所有頁面崩潰鞠苟。

有時我們會看到打開一個標(biāo)簽頁出現(xiàn)多個進(jìn)程，可以查看一下，可能當(dāng)前頁面有iframe標(biāo)簽可能src為非同源当娱，瀏覽器主進(jìn)程為iframe每個不同的站點分配了不同的進(jìn)程吃既。聯(lián)想到。跨细。鹦倚。這個時候的iframe與當(dāng)前頁面之間的通信就是。冀惭。進(jìn)程間的通信方式了震叙。
不過后來查看過了解到這種情況一般就是相當(dāng)于單獨出來的網(wǎng)頁嵌入，像嵌入的廣告那樣散休，所以并不需要怎么通信媒楼，參看例子。

當(dāng)我們打開標(biāo)簽頁的時候戚丸，我們一般關(guān)注的是瀏覽器渲染進(jìn)程里面的知識划址。

瀏覽器渲染進(jìn)程包含的線程：

GUI 渲染線程：

負(fù)責(zé)渲染瀏覽器界面HTML元素,當(dāng)界面需要重繪(Repaint)或由于某種操作引發(fā)回流(reflow)時,該線程就會執(zhí)行。在Javascript引擎運行腳本期間,GUI渲染線程都是處于掛起狀態(tài)的,也就是說被”凍結(jié)”了.

JavaScript引擎線程：

主要負(fù)責(zé)處理Javascript腳本程序限府，例如V8引擎

定時觸發(fā)器線程：

瀏覽器定時計數(shù)器并不是由JavaScript引擎計數(shù)的, 因為JavaScript引擎是單線程的, 如果處于阻塞線程狀態(tài)就會影響記計時的準(zhǔn)確, 因此通過單獨線程來計時并觸發(fā)定時是更為合理的方案夺颤。

事件觸發(fā)線程：

當(dāng)一個事件被觸發(fā)時該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理胁勺。這些事件可以是當(dāng)前執(zhí)行的代碼塊如定時任務(wù)世澜、也可來自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點擊、AJAX異步請求等署穗，但由于JS的單線程關(guān)系所有這些事件都得排隊等待JS引擎處理寥裂。

異步http請求線程：

在XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求，將檢測到狀態(tài)變更時蛇捌，如果設(shè)置有回調(diào)函數(shù)抚恒，異步線程就產(chǎn)生狀態(tài)變更事件放到 JavaScript引擎的處理隊列中等待處理。

接下來我們可以進(jìn)入我們想了解的內(nèi)容了---------

瀏覽器主進(jìn)程包含的線程

在瀏覽器主進(jìn)程中络拌，包含三部分的線程：
UI thread：控制瀏覽器上的按鈕及輸入框俭驮；
network thread: 處理網(wǎng)絡(luò)請求，從網(wǎng)上獲取數(shù)據(jù)春贸；
storage thread: 控制文件等的訪問混萝；

輸入url的過程發(fā)生了什么？

首先輸入url的時候處于瀏覽器的主進(jìn)程中萍恕，這時候瀏覽器主進(jìn)程的UI線程需要判斷用戶輸入的是 URL 還是 query逸嘀；
接著，ui線程通知storage線程允粤，查找瀏覽器緩存崭倘，這個時候就會出現(xiàn)瀏覽器緩存機(jī)制
如果還是要發(fā)送請求翼岁，則ui線程通知network線程獲取網(wǎng)頁內(nèi)容，并控制 tab 上的 spinner 展現(xiàn)司光，表示正在加載中

image.png

network thread會執(zhí)行 DNS 查詢琅坡，隨后為請求建立 TLS 連接

3. 讀取響應(yīng)

當(dāng)請求響應(yīng)返回的時候，network thread 會依據(jù) Content-Type及 MIME Type sniffing 判斷響應(yīng)內(nèi)容的格式
如果響應(yīng)內(nèi)容的格式是 HTML 残家，下一步將會把這些數(shù)據(jù)傳遞給渲染進(jìn)程榆俺，如果是 zip 文件或者其它文件，會把相關(guān)數(shù)據(jù)傳輸給下載管理器坞淮。
接著network線程 會通知 UI線程數(shù)據(jù)已經(jīng)準(zhǔn)備好茴晋，UI線程會查找到一個渲染進(jìn)程進(jìn)行網(wǎng)頁的渲染。

通過了上述過程回窘，數(shù)據(jù)以及渲染進(jìn)程都可用了诺擅， 瀏覽器進(jìn)程會給渲染進(jìn)程發(fā)送 IPC 消息來確認(rèn)導(dǎo)航，一旦瀏覽器主進(jìn)程 收到 渲染進(jìn)程 的渲染確認(rèn)消息毫玖，導(dǎo)航過程結(jié)束掀虎，頁面加載過程開始。

一旦導(dǎo)航被確認(rèn)付枫，渲染進(jìn)程會使用相關(guān)的資源渲染頁面。當(dāng)渲染進(jìn)程渲染結(jié)束（渲染結(jié)束意味著該頁面內(nèi)的所有的頁面驰怎，包括所有 iframe 都觸發(fā)了 onload 時）阐滩，會發(fā)送 IPC 信號到 瀏覽器主進(jìn)程，UI線程會停止展示 tab 中的旋轉(zhuǎn)圖標(biāo)县忌。

這個時候就開始了瀏覽器渲染過程了--------

然后經(jīng)歷如下過程：