話說這個前端面試經常問的題目，但仔細查閱了一下資料，發現想要很深入地理解，還是非常困難的，所以自己打算簡單梳理一遍，不討論過多細節，以便加深記憶。
主要流程：
1. 輸入URL
首先輸入URL，瀏覽器可能會做一些預處理，一般會根據之前的統計記錄來預判輸入字符可能對應的URL，比如輸入bai，瀏覽器根據之前的瀏覽記錄發現可能會訪問www.baidu.com，從而開始建立TCP （Transmission Control Protocol）鏈接甚至開始渲染，輸入URL后，瀏覽器會對URL進行檢查，首先判斷協議，還會判斷URL的安全性，接著就準備DNS解析了。
2. DNS解析
首先了解2個概念：
- IP地址：IP 協議為互聯網上的每一個網絡和每一臺主機分配的一個邏輯地址。IP 地址如同門牌號碼，通過 IP 地址才能確定一臺主機位置。服務器本質也是一臺主機，想要訪問某個服務器，必須先知道它的 IP 地址，IP 地址由四個數字組成，中間用點號連接。
- 補充說明：光靠IP地址也是無法通信的，因為IP地址并非和某臺設備綁定，比如你的電腦在家IP地址為192.168.1.1，但是到辦公室就變成172.22.22.22 了，這就需要我們的MAC(media access control) 地址,這是固定并且唯一的。
- DNS：Domain Name System的縮寫，即域名系統。它是internet提供一項服務，也叫域名解析服務，主要作用是將域名解析成對應的IP地址，域名系統分為正向解析和反向解析，正向解析就是講域名解析成IP地址，反向是講IP地址解析成域名，一般用于后端。
域名與IP地址之間是呈一一對應的關系，但多個域名可以對應同一個IP地址。由于IP地址全是數字，為了簡單好記，采用域名來代替IP地址表示站點地址。
在Internet上，一個域名要由兩臺域名服務器提供“權威性的”域名解析，這兩臺域名服務器，和您的域名一起被登記在域名注冊管理機構的數據庫中，如果是國際域名，域名注冊管理機構就是Internic；如果是國內域名，域名注冊管理機構就是CNNIC（China Internet Network Information Center），這兩臺“權威性的”服務器，一主一輔，保存著相同的記錄，主要是為了提高可靠性。域名注冊管理機構的數據庫的記錄最終體現在“根”域名服務器上。
DNS解析過程：
- 瀏覽器搜索自己DNS緩存
- 從系統hosts文件中查找DNS緩存
- 搜索路由器的DNS緩存
- 搜索ISP中的DNS緩存
- 如果還未找到對應IP地址，則向根服務器查找域名對應IP， 根域名服務器把請求發到下一級，直到找到IP
- 將得到的IP返回給操作系統，同時自己也將IP地址緩存起來（這個緩存的記錄有一個失效期，當失效期到了后，您的主控DNS服務器將會自動丟棄緩存的記錄）
- 操作系統將IP返回給瀏覽器，同時瀏覽器也將IP地址緩存起來
3. 通過 Socket 發送數據
- 調用 Socket API 后內核會對數據進行底層協議棧的封裝，接下來啟動 DMA（direct memory access）控制器，它將從內存中讀取數據寫入網卡。
- 連接 Wi-Fi 路由，Wi-Fi 網卡需要通過 Wi-Fi 路由來與外部通信，原理是基于無線電，通過電流變化來產生無線電，這個過程也叫「調制」，而反過來無線電可以引起電磁場變化，從而產生電流變化，利用這個原理就能將無線電中的信息解讀出來就叫「解調」。因為內網設備的 IP 都是類似 192.168.1.x這樣的內網地址，外網無法直接向這個地址發送數據，所以網絡數據在經過路由時，路由會修改相關地址和端口，這個操作稱為 NAT(Network Address Translation)映射。家庭路由一般會通過雙絞線連接到運營商網絡的。
- 數據過雙絞線發送到運營商網絡后，還會經過很多個中間路由轉發，當數據傳遞到這些路由器后，路由器會取出包中目的地址的前綴，通過內部的轉發表查找對應的輸出鏈路
- 數據最終通過光纖進入服務器機房，最后通過交換機的端口將數據發往機架中的服務器
4. 建立連接--三次握手
- 主機向服務器發送一個建立連接的請求（您好，我想認識您）
- 服務器接到請求后發送同意連接的信號（好的，很高興認識您）
- 主機接到同意連接的信號后，再次向服務器發送了確認信號（我也很高興認識您），自此，主機與服務器兩者建立了連接
5.網頁請求
當服務器與主機建立了連接之后，下面主機便與服務器進行通信。網頁請求是一個單向請求的過程，即是一個主機向服務器請求數據，服務器返回相應的數據的過程
- 瀏覽器根據 URL 內容生成 HTTP 請求，請求中包含請求文件的位置、請求文件的方式等等
- 服務器接到請求后，會根據 HTTP 請求中的內容來決定如何獲取相應的 HTML 文件
- 服務器將得到的 HTML 文件發送給瀏覽器
- 在瀏覽器還沒有完全接收 HTML 文件時便開始渲染、顯示網頁
- 在執行 HTML 中代碼時，根據需要，瀏覽器會繼續請求圖片、CSS、JavsScript等文件，過程同請求 HTML
6. 網頁渲染
主流程示例
簡單點說就是：
- 呈現引擎將開始解析 HTML 文檔，并將各標記逐個轉化成“內容樹”上的 DOM節點。同時也會解析外部 CSS 文件以及樣式元素中的樣式數據。HTML 中這些帶有視覺指令的樣式信息將用于創建另一個樹結構：呈現樹。
- 呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。
- 呈現樹構建完畢之后，進入“布局”處理階段，也就是為每個節點分配一個應出現在屏幕上的確切坐標。下一個階段是繪制- 呈現引擎會遍歷呈現樹，由用戶界面后端層將每個節點繪制出來。
1. 解析
html解析生成DOM樹
瀏覽器中的呈現引擎（render engine）解析html文檔，呈現引擎解析的語法是過程可以分為2部分：詞法分析和語法分析。詞法分析器（有時也稱為標記生成器），負責將輸入內容分解成一個個有效標記；而解析器負責根據語言的語法規則分析文檔的結構，從而構建解析樹。
因為常規解析器用的是與上下文無關的語法，而html語言比較“寬容”，對常見的無效html用法采取包容態度等原因，所以它的語法不是與上下文無關的語法，不能用常規解析器來解析（但css和JavaScript 可以），所以需要一些工具自動生成解析器，您只要向其提供您所用語言的語法（詞匯和語法規則），它就會生成相應的解析器。WebKit 使用了兩種非常有名的解析器生成器：用于創建詞法分析器的 Flex 以及用于創建解析器的 Bison（您也可能遇到 Lex 和 Yacc 這樣的別名）。Flex 的輸入是包含標記的正則表達式定義的文件。Bison 的輸入是采用 BNF 格式的語言語法規則。HTML 解析器的任務是將 HTML 標記解析成解析樹。
解析器的輸出“解析樹”是由 DOM 元素和屬性節點構成的樹結構。DOM 與標記之間幾乎是一一對應的關系。比如下面這段標記：
<html>
<body>
<p>
Hello World
</p>
<div> </div>
</body>
</html>
可以翻譯成下面的DOM樹
CSS解析生成CSS規則樹
瀏覽器解析器都會將 CSS 文件解析成 StyleSheet 對象，且每個對象都包含 CSS 規則。CSS 規則對象則包含選擇器和聲明對象，以及其他與 CSS 語法對應的對象。
腳本解析
網絡的模型是同步的。網頁作者希望解析器遇到 <script> 標記時立即解析并執行腳本。文檔的解析將停止，直到腳本執行完畢。如果腳本是外部的，那么解析過程會停止，直到從網絡同步抓取資源完成后再繼續。此模型已經使用了多年，也在 HTML4 和 HTML5 規范中進行了指定。作者也可以將腳本標注為“defer”，這樣它就不會停止文檔解析，而是等到解析結束才執行。HTML5 增加了一個選項，可將腳本標記為異步，以便由其他線程解析和執行。
2. 呈現樹構建
在 DOM 樹構建的同時，瀏覽器還會構建另一個樹結構：呈現樹。這是由可視化元素按照其顯示順序而組成的樹，也是文檔的可視化表示。呈現器是和 DOM 元素相對應的，但并非一一對應。非可視化的 DOM 元素不會插入呈現樹中，例如“head”元素。如果元素的 display 屬性值為“none”，那么也不會顯示在呈現樹中（但是 visibility 屬性值為“hidden”的元素仍會顯示）。
在 WebKit 中，解析樣式和創建呈現器的過程稱為“附加”。每個 DOM 節點都有一個“attach”方法。附加是同步進行的，將節點插入 DOM 樹需要調用新的節點“attach”方法。
3. 布局
HTML 采用基于流的布局模型，這意味著大多數情況下只要一次遍歷就能計算出幾何信息。處于流中靠后位置元素通常不會影響靠前位置元素的幾何特征，因此布局可以按從左至右、從上至下的順序遍歷文檔。但是也有例外情況，比如 HTML 表格的計算就需要不止一次的遍歷。布局是一個遞歸的過程。它從根呈現器（對應于 HTML 文檔的 <html> 元素）開始，然后遞歸遍歷部分或所有的框架層次結構，為每一個需要計算的呈現器計算幾何信息。
4.繪制
在繪制階段，系統會遍歷呈現樹，并調用呈現器的“paint”方法，將呈現器的內容顯示在屏幕上。繪制工作是使用用戶界面基礎組件完成的。
