摘要：在上述過程再細化為瀏覽器搜索自己的緩存。至此，瀏覽器已經(jīng)得到了域名對應的地址。具體過程如下在中這一過程如下首先是字節(jié)流，經(jīng)過解碼之后是字符流，然后通過詞法分析器會被解釋成詞語，之后經(jīng)過語法分析器構(gòu)建成節(jié)點，最后這些節(jié)點被組建成一棵樹。

面試的時候，我們經(jīng)常會被問從在瀏覽器地址欄中輸入 url 到頁面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？那么瀏覽器到底做了啥？

瀏覽器的多進程架構(gòu)
一個好的程序常常被劃分為幾個相互獨立又彼此配合的模塊，瀏覽器也是如此，以 Chrome 為例，它由多個進程組成，每個進程都有自己核心的職責，它們相互配合完成瀏覽器的整體功能，每個進程中又包含多個線程，一個進程內(nèi)的多個線程也會協(xié)同工作，配合完成所在進程的職責。

具體說來，Chrome 的主要進程及其職責如下： 
Browser Process： 負責包括地址欄，書簽欄，前進后退按鈕等部分的工作； 負責處理瀏覽器的一些不可見的底層操作，比如網(wǎng)絡(luò)請求和文件訪問； 
Renderer Process： 負責一個 tab 內(nèi)關(guān)于網(wǎng)頁呈現(xiàn)的所有事情 
Plugin Process： 負責控制一個網(wǎng)頁用到的所有插件，如 flash 
GPU Process 負責處理 GPU 相關(guān)的任務

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

當我們輸入url，瀏覽器開始工作

所以 network thread 會執(zhí)行 DNS 查詢，隨后為請求建立 TCP 連接。

在上述過程再細化為

瀏覽器搜索自己的 DNS 緩存。

在瀏覽器緩存中沒找到，就在操作系統(tǒng)緩存中查找，這一步中也會查找本機的 hosts 看看有沒有對應的域名映射。（所謂的改hosts的原理！！！）

在系統(tǒng)中也沒有的話，就到你的路由器來查找，因為路由器一般也會有自己的 DNS 緩存。

若沒有，則操作系統(tǒng)將域名發(fā)送至 本地域名服務器——遞歸查詢方式，本地域名服務器 查詢自己的 DNS緩存，查找成功則返回結(jié)果，否則，采用迭代查詢方式。本地域名服務器一般都是你的網(wǎng)絡(luò)接入服務器商提供，比如中國電信，中國移動。

本地域名服務器 將得到的 IP 地址返回給操作系統(tǒng)，同時自己也將 IP 地址緩存起來。

操作系統(tǒng)將 IP 地址返回給瀏覽器，同時自己也將 IP 地址緩存起來，以備下次別的用戶查詢時，可以直接返回結(jié)果，加快網(wǎng)絡(luò)訪問。

至此，瀏覽器已經(jīng)得到了域名對應的 IP 地址。開始建立 TCP 連接，進行三次握手

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

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

經(jīng)過一系列檢查和數(shù)據(jù)請求，確認數(shù)據(jù)以及渲染進程都可用了， Browser Process（進程） 會給 Renderer Process（進程） 發(fā)送消息，頁面加載和渲染過程開始。

渲染步驟大致可以分為以下幾步：

解析HTML，構(gòu)建 DOM 樹

解析 CSS ，生成 CSS 規(guī)則樹

合并 DOM 樹和 CSS 規(guī)則，生成 render 樹

布局 render 樹（ Layout / reflow ），負責各元素尺寸、位置的計算

繪制 render 樹（ paint ），繪制頁面像素信息

瀏覽器會將各層的信息發(fā)送給 GPU，GPU 會將各層合成（ composite ），顯示在屏幕上

構(gòu)造 DOM 樹

瀏覽器在解析html文件時, 是WebKit 中的 HTML 解釋器的將網(wǎng)絡(luò)或者本地磁盤獲取的 HTML 網(wǎng)頁和資源從字節(jié)流解釋成 DOM 樹結(jié)構(gòu)。具體過程如下 ：

在 WebKit 中這一過程如下：首先是字節(jié)流，經(jīng)過解碼之后是字符流，然后通過詞法分析器會被解釋成詞語（Tokens），之后經(jīng)過語法分析器構(gòu)建成節(jié)點，最后這些節(jié)點被組建成一棵 DOM 樹。

瀏覽器在解析html文件過程中，會 ”自上而下“ 加載，并在加載過程中進行解析渲染。在解析過程中，如果遇到請求外部資源時，如圖片、外鏈的CSS、iconfont等，請求過程是異步的，并不會影響html文檔進行加載，且統(tǒng)一交由 Browser 進程來處理，這使得資源在不同網(wǎng)頁間的共享變得很容易。

解釋 CSS

CSS 解釋過程是指從 CSS 字符串 經(jīng)過 CSS 解釋器 處理后變成渲染引擎內(nèi)部規(guī)則的表示過程。

生成樣式規(guī)則之后，會進行樣式規(guī)則匹配，WebKit 會為其中的一些節(jié)點（只限于可視節(jié)點）選擇合適的樣式信息，規(guī)則的匹配則是由 ElementRuleCollector 類來計算并獲得，它根據(jù)元素的屬性等，并從 DocumentRuleSets 類中獲取規(guī)則集合，依次按照 ID、類別、標簽等選擇器信息逐次匹配獲得元素的樣式。

最后，WebKit 對這些規(guī)則進行排序。對于該元素需要的樣式屬性，WebKit 選擇從高優(yōu)先級規(guī)則中選取，并將樣式屬性值返回。

從整個網(wǎng)頁的加載和渲染過程來看，CSS 解釋和規(guī)則匹配處于 DOM 樹建立之后，RenderObject 樹建立之前，CSS 解釋器解釋后的結(jié)果會保存起來，然后 RenderObject 樹基于該結(jié)果來進行規(guī)范匹配和布局計算。當網(wǎng)頁有用戶交互或者動畫等動作的時候，通過 CSSDOM 等技術(shù)，JavaScript 代碼同樣可以非常方便地修改 CSS 代碼，WebKit 此時需要重新解釋樣式并重復以上這一過程。

回流與重繪

當render tree中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。

注意：回流必將引起重繪，而重繪不一定會引起回流。

回流何時發(fā)生：

當頁面布局和幾何屬性改變時就需要回流。下述情況會發(fā)生瀏覽器回流：

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

2、元素位置改變；

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

4、內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；

5、頁面渲染初始化；

6、瀏覽器窗口尺寸改變——resize事件發(fā)生時；

所以繪制 render 樹的過程中會發(fā)生多次回流與重繪。另外避免回流與重繪也是web優(yōu)化技巧之一。

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