瀏覽器解析URL
首先看瀏覽器能通過URL (Uniform Resource Locator，統(tǒng)一資源定位符)直接獲取什么信息
例如：https://www.producthunt.com:443/posts/progress:
- 協(xié)議部分：HTTPS
即Browser與Server程序之間使用HTTPS進(jìn)行數(shù)據(jù)傳輸。常見的應(yīng)用層協(xié)議還有HTTP、FTP、Telnet等 - 網(wǎng)絡(luò)地址：www.producthunt.com
- 端口號：443
HTTP默認(rèn)端口號為80，HTTPS默認(rèn)443。 - 資源路徑:/posts/process
域名解析
域名解析，即將域名映射為IP的過程。可能的流程依次如下：
- 查找瀏覽器緩存
瀏覽器會緩存DNS記錄一段時間。不同瀏覽器緩存的策略不同。 - 查找系統(tǒng)緩存
瀏覽器做一個系統(tǒng)調(diào)用，獲取系統(tǒng)緩存記錄。Linux系統(tǒng)中從hosts文件中查找。 - 查找路由器緩存
根據(jù)網(wǎng)卡配置（或自動獲取的）的DNS Server地址發(fā)起DNS請求查找，這個DNS Server通常是同一個局域網(wǎng)內(nèi)的Router。Router會查詢是否有匹配的DNS緩存 - 請求Local DNS Server（ISP提供）
- 迭代向根DNS服務(wù)器、頂級域DNS服務(wù)器、權(quán)威DNS服務(wù)器查詢
TCP連接建立
瀏覽器調(diào)用 Socket API，請求一個TCP流套接字，建立TCP連接。
TCP被稱為是面向連接的，即在一個應(yīng)用進(jìn)程向另一個應(yīng)用進(jìn)程發(fā)送數(shù)據(jù)之前，這兩個進(jìn)程必須先相互“握手”，即它們必須相互發(fā)送某些預(yù)備報文段，以建立確保數(shù)據(jù)傳輸?shù)膮?shù)。因此在發(fā)送HTTP請求之前，需要先三次握手建立TCP連接。
三次握手
發(fā)送HTTP Reqeust
內(nèi)核對數(shù)據(jù)進(jìn)行底層協(xié)議棧的封裝后，由網(wǎng)卡發(fā)送
HTTP首部
HTTP請求信息由3部分組成：
請求方法URI協(xié)議/版本
常見的請求方法有POST和GET（區(qū)別見附錄）。請求頭(Request Header)
請求正文
請求頭和請求正文之間是一個空行，這個行非常重要，它表示請求頭已經(jīng)結(jié)束，接下來的是請求正文。請求正文中可以包含客戶提交的查詢字符串信息：
username=jinqiao&password=1234
例如
GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate
username=admin&password=admin
數(shù)據(jù)包轉(zhuǎn)發(fā)
數(shù)據(jù)包會在網(wǎng)絡(luò)中經(jīng)過網(wǎng)絡(luò)節(jié)點傳送給服務(wù)器。
其中，在同一局域網(wǎng)內(nèi)傳輸時，需查找本地ARP表或者廣播ARP請求來獲知目的MAC地址。
在不同局域網(wǎng)中傳輸時，三層節(jié)點（如路由器）會讀取數(shù)據(jù)包的網(wǎng)絡(luò)層頭部，查找本地路由表來決定將數(shù)據(jù)包向哪條鏈路轉(zhuǎn)發(fā)。路由表的建立和維護(hù)由一些動態(tài)/靜態(tài)的選路算法決定。
服務(wù)器響應(yīng)HTTP請求
HTTPD(HTTP Daemon)在服務(wù)器端處理請求/相應(yīng)。最常見的 HTTPD 有 Linux 上常用的 Apache 和 nginx，與 Windows 上的 IIS。
HTTPD接收請求
↓
服務(wù)器根據(jù)請求的路徑獲取相應(yīng)的響應(yīng)內(nèi)容
↓
服務(wù)器使用指定的處理程序，使用后端語言分析處理后，將輸出結(jié)果發(fā)送給請求者。
瀏覽器接收到回復(fù)后呈現(xiàn)頁面
瀏覽器解析HTTP Response后，需加載html和html文件中包含的外部引用文件，及文件內(nèi)涉及的圖片或者多媒體文件。
加載HTML、CSS、JS等資源文件
- 瀏覽器獲得一個html文件時，會“自上而下”加載，并在加載過程中進(jìn)行解析渲染
- 解析到link 標(biāo)簽后重新發(fā)送請求獲取css
- 解析到script標(biāo)簽后，發(fā)送請求獲取js，并執(zhí)行代碼。js文件加載和執(zhí)行過程，html會掛起渲染的線程。
- 解析到img標(biāo)簽后發(fā)送異步請求獲取圖片資源，不影響html加載。
解析
HTML文檔解析生成解析樹即dom樹，由dom元素及屬性節(jié)點組成，樹的根是document對象。
css解析將css文件解析為樣式表對象。該對象包含css規(guī)則，該規(guī)則包含選擇器和聲明對象。
js解析文件在加載的同時也進(jìn)行解析。
渲染
即為構(gòu)建渲染樹的過程，他是原來DOM樹的可視化表示，構(gòu)建這棵樹是為了以正確的順序繪制文檔內(nèi)容。
渲染樹和DOM樹的關(guān)系，不可見的dom元素（<head>…</head> display=none）不會被插入渲染樹中。還有像一些節(jié)點的位置為絕對或浮動定位（需要css知識理解），這些節(jié)點會在文本流之外，因此會在兩棵樹上的不同位置，渲染樹標(biāo)識出真實的位置，并用一個占位結(jié)構(gòu)標(biāo)識出他們原來的位置。
