作為一個前端工程師,我們每天打交道最多的就是瀏覽器了,那么了解瀏覽器的基本工作原理是必不可少的、 現代web瀏覽器種類繁多,本文主要以谷歌瀏覽器為准來展開介紹。
1.一個應用程序都是好幾個甚至多個進程來構造的、對於瀏覽器來說也是如此。現代瀏覽器一般都是多進程模式、一般的應用程序其中也有單進程多線程模式的、首先來介紹一下 “進程” 、線程“”的基本概念。
進程這個東西比較難懂、在我們的應用程序啟動的時候、計算機操作系統就會啟動一個進程並且為其開辟內存空間、其產生的應用數據都保存在這塊空間之中。其中谷歌瀏覽器就是多進程的模式、每個進程來相互配合協助瀏覽器完成一系列的操作、而其中一個進程
也可以有多個線程、每個線程相互配置協助當前的進程完成所在的任務、當關閉應用程序或者關閉進程其所占用的內存空間也會被釋放。
2. 谷歌瀏覽器的架構模式:
1.多進程、
主要分為:主進程、GPU進程、渲染進程
主進程:主要是用戶界面的前進、后退。刷新、以及用戶看不見的底層的操作、比如下載文件、網絡請求和文件訪問;
GPU進程主要負責3D的渲染。
渲染進程是比較重要的一個進程、下文展示詳細的介紹。
2.多進程和單進程多線程模式的優點和缺點。
多進程優點為每個進程互不干涉、其中一個進程掛了、對於其他的進程,沒有影響、缺點主要為每個進程有相同的數據。不能共享、占用內存。
谷歌瀏覽器為了這一個缺點也作出了優化的策略: Chrome 把瀏覽器不同程序的功能看做服務,這些服務可以方便的分割為不同的進程或者合並為一個進程。以 Broswer Process 為例,如果 Chrome 運行在強大的硬件上,它會分割不同的服務到不同的進程,這 樣 Chrome 整體的運行會更加穩定,但是如果 Chrome 運行在資源貧瘠的設備上,這些服務又會合並到同一個進程中運行。
為了節省內存,Chrome 限制了最多的進程數,最大進程數量由設備的內存和 CPU 能力決定,當達到這一限制時,新打開的 Tab 會共用之前同一個站點的渲染進程。
3.當用戶在瀏覽器輸入url地址會發生什么:
- UI thread : 控制瀏覽器上的按鈕及輸入框;
- network thread: 處理網絡請求,從網上獲取數據;
- storage thread: 控制文件等的訪問;
1. 瀏覽器的UI線程會判斷輸入的是URL還是query。
2. 瀏覽器的UI線程會通知網絡線程讓其去拿資源、網絡線程會執行DNS查詢。
3.讀取響應。網絡線程根據響應頭判斷是什么類型的文件如果是HTML就會傳給渲染進程、其他類型的會傳給下載管理器、
4.網絡線程通知ui線程數據准備好了。UI線程會通知渲染進程去渲染數據。
5.渲染結束地址欄更新渲染的內容會保存在硬盤。
6.渲染進程接下來做的事情。
4.渲染線程主要處理html和js : 渲染進程主要分為好幾個不同的線程來配合:
主要為: 處理js的js引擎線程、http請求的線程、事件處理的線程、定時器線程、渲染html網頁的線程、。
1.構建DOM。當渲染進程接收到導航的確認信息,開始接受 HTML 數據時,主線程會解析文本字符串為 DOM。
2. 加載次級的資源、網頁中常常包含諸如圖片,CSS,JS 等額外的資源,這些資源需要從網絡上或者 cache 中獲取。主進程可以在構建 DOM 的過程中會逐一請求它們,為了加速 preload scanner 會同時運行,如果在 html 中存 在 `<img>` `<link>` 等標簽,preload scanner 會把這些請求傳遞給 Browser process 中的 network thread 進行相關資源的下載。
3.下載js代碼和執行。當遇到 `<script>` 標簽時,渲染進程會停止解析 HTML,而去加載,解析和執行 JS 代碼,停止解析 html 的原因在於 JS 可能會改變 DOM 的結構
4.計算樣式、渲染dom不足以支撐頁面的渲染、主進程基於css選擇器去處理每個元素的樣式、
5.獲取布局構建DOM樹。