輸入 url 到頁面展示的短短几秒內瀏覽器究竟作了什麼？

面試的時候，咱們常常會被問從在瀏覽器地址欄中輸入 url 到頁面展示的短短几秒內瀏覽器究竟作了什麼？那麼瀏覽器到底作了啥？

瀏覽器的多進程架構
一個好的程序經常被劃分爲幾個相互獨立又彼此配合的模塊，瀏覽器也是如此，以 Chrome 爲例，它由多個進程組成，每一個進程都有本身核心的職責，它們相互配合完成瀏覽器的總體功能，每一個進程中又包含多個線程，一個進程內的多個線程也會協同工做，配合完成所在進程的職責。

具體說來，Chrome 的主要進程及其職責以下： 
Browser Process： 負責包括地址欄，書籤欄，前進後退按鈕等部分的工做； 負責處理瀏覽器的一些不可見的底層操做，好比網絡請求和文件訪問； 
Renderer Process： 負責一個 tab 內關於網頁呈現的全部事情 
Plugin Process： 負責控制一個網頁用到的全部插件，如 flash 
GPU Process 負責處理 GPU 相關的任務

咱們知道瀏覽器 Tab 外的工做主要由 Browser Process 掌控，
Browser Process 又對這些工做進一步劃分，使用不一樣線程進行處理： 
UI thread ： 控制瀏覽器上的按鈕及輸入框； 
network thread: 處理網絡請求，從網上獲取數據； 
storage thread: 控制文件等的訪問；

當咱們輸入url，瀏覽器開始工做

因此 network thread 會執行 DNS 查詢，隨後爲請求創建 TCP 鏈接。

在上述過程再細化爲

1. 瀏覽器搜索本身的 DNS 緩存。
2. 在瀏覽器緩存中沒找到，就在操做系統緩存中查找，這一步中也會查找本機的 hosts 看看有沒有對應的域名映射。（所謂的改hosts的原理！！！）
3. 在系統中也沒有的話，就到你的路由器來查找，由於路由器通常也會有本身的 DNS 緩存。
4. 若沒有，則操做系統將域名發送至 本地域名服務器——遞歸查詢方式，本地域名服務器 查詢本身的 DNS緩存，查找成功則返回結果，不然，採用迭代查詢方式。本地域名服務器通常都是你的網絡接入服務器商提供，好比中國電信，中國移動。
5. 本地域名服務器 將獲得的 IP 地址返回給操做系統，同時本身也將 IP 地址緩存起來。
6. 操做系統將 IP 地址返回給瀏覽器，同時本身也將 IP 地址緩存起來，以備下次別的用戶查詢時，能夠直接返回結果，加快網絡訪問。

至此，瀏覽器已經獲得了域名對應的 IP 地址。開始創建 TCP 鏈接，進行三次握手

三次握手的步驟：（抽象派）

客戶端：hello，你是server麼？
服務端：hello，我是server，你是client麼
客戶端：yes，我是client

通過一系列檢查和數據請求，確認數據以及渲染進程均可用了， Browser Process（進程） 會給 Renderer Process（進程） 發送消息，頁面加載和渲染過程開始。

渲染步驟大體能夠分爲如下幾步：

1. 解析HTML，構建 DOM 樹
2. 解析 CSS ，生成 CSS 規則樹
3. 合併 DOM 樹和 CSS 規則，生成 render 樹
4. 佈局 render 樹（ Layout / reflow ），負責各元素尺寸、位置的計算
5. 繪製 render 樹（ paint ），繪製頁面像素信息
6. 瀏覽器會將各層的信息發送給 GPU，GPU 會將各層合成（ composite ），顯示在屏幕上

構造 DOM 樹

瀏覽器在解析html文件時, 是WebKit 中的 HTML 解釋器的將網絡或者本地磁盤獲取的 HTML 網頁和資源從字節流解釋成 DOM 樹結構。具體過程以下 ：

在 WebKit 中這一過程以下：首先是字節流，通過解碼以後是字符流，而後經過詞法分析器會被解釋成詞語（Tokens），以後通過語法分析器構建成節點，最後這些節點被組建成一棵 DOM 樹。

瀏覽器在解析html文件過程當中，會 」自上而下「 加載，並在加載過程當中進行解析渲染。在解析過程當中，若是遇到請求外部資源時，如圖片、外鏈的CSS、iconfont等，請求過程是異步的，並不會影響html文檔進行加載，且統一交由 Browser 進程來處理，這使得資源在不一樣網頁間的共享變得很容易。

解釋 CSS

CSS 解釋過程是指從 CSS 字符串 通過 CSS 解釋器 處理後變成渲染引擎內部規則的表示過程。

生成樣式規則以後，會進行樣式規則匹配，WebKit 會爲其中的一些節點（只限於可視節點）選擇合適的樣式信息，規則的匹配則是由 ElementRuleCollector 類來計算並得到，它根據元素的屬性等，並從 DocumentRuleSets 類中獲取規則集合，依次按照 ID、類別、標籤等選擇器信息逐次匹配得到元素的樣式。

最後，WebKit 對這些規則進行排序。對於該元素須要的樣式屬性，WebKit 選擇從高優先級規則中選取，並將樣式屬性值返回。

從整個網頁的加載和渲染過程來看，CSS 解釋和規則匹配處於 DOM 樹創建以後，RenderObject 樹創建以前，CSS 解釋器解釋後的結果會保存起來，而後 RenderObject 樹基於該結果來進行規範匹配和佈局計算。當網頁有用戶交互或者動畫等動做的時候，經過 CSSDOM 等技術，JavaScript 代碼一樣能夠很是方便地修改 CSS 代碼，WebKit 此時須要從新解釋樣式並重復以上這一過程。

迴流與重繪

當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹，完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程成爲重繪。
當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。

注意：迴流必將引發重繪，而重繪不必定會引發迴流。

迴流什麼時候發生：

當頁面佈局和幾何屬性改變時就須要迴流。下述狀況會發生瀏覽器迴流：

一、添加或者刪除可見的DOM元素；

二、元素位置改變；

三、元素尺寸改變——邊距、填充、邊框、寬度和高度

四、內容改變——好比文本改變或者圖片大小改變而引發的計算值寬度和高度改變；

五、頁面渲染初始化；

六、瀏覽器窗口尺寸改變——resize事件發生時；

因此繪製 render 樹的過程當中會發生屢次迴流與重繪。另外避免迴流與重繪也是web優化技巧之一。

參考連接 ：
圖解瀏覽器的基本工做原理 - 知乎
https://zhuanlan.zhihu.com/p/...
面試題之從敲入 URL 到瀏覽器渲染完成 - 全棧修煉 - SegmentFault 思否
https://segmentfault.com/a/11...
HTTP請求過程-域名解析和TCP三次握手創建連接 - 小Cai先森 - 博客園
https://www.cnblogs.com/caijh...
頁面重繪和迴流以及優化-WEB前端開發
https://www.css88.com/archive...