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

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

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

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

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

當(dāng)我們輸入url，瀏覽器開始工作

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

在上述過程再細(xì)化為

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

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

在系統(tǒng)中也沒有的話，就到你的路由器來查找，因?yàn)槁酚善饕话阋矔?huì)有自己的 DNS 緩存。

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

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

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

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

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

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

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

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

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

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

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

布局 render 樹（ Layout / reflow ），負(fù)責(zé)各元素尺寸、位置的計(jì)算

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

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

構(gòu)造 DOM 樹

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

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

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

解釋 CSS

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

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

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

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

回流與重繪

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

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

回流何時(shí)發(fā)生：

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

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

2、元素位置改變；

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

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

5、頁面渲染初始化；

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

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

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