詳解

解析url

DNS解析

1. 瀏覽器會先檢查是否存在緩存，因為如果訪問過一次該域名的話，會把結(jié)果緩存在瀏覽器中。

2. 操作系統(tǒng)也會有自己的DNS緩存，但在這之前，會檢查域名是否存在于本地的Hosts文件中。

3. 路由器中也會有自己的緩存。

4. IPS DNS緩存 就是在客戶端電腦上設(shè)置的首選DNS服務(wù)器。

5. 在前邊所有的情況下都沒有找到緩存的情況下，會連接互聯(lián)網(wǎng)，把請求轉(zhuǎn)發(fā)到互聯(lián)網(wǎng)的根域。

TCP連接

• 發(fā)送方：發(fā)送消息，等待...

• 接收方：接收消息，并給發(fā)送方回信，此時發(fā)送方接收到消息后，從發(fā)送方的角度就可明白自己的消息是可以發(fā)過去的。但是接收方還不能確定自己的消息是否可以正常發(fā)送。

• 發(fā)送方：接收到發(fā)送方的回信后，在給接收方發(fā)一個消息，此時從接收方的角度就能明白自己的消息可以可以正常發(fā)送。

發(fā)送http請求

• 請求路徑

• 查詢參數(shù)

• 請求方法

• 請求頭

• 請求體

服務(wù)器接收請求

const http = require('http'); // 引入http模塊
const server = http.createServer((req, res) => {  // req保存了瀏覽器攜帶的信息    // 解析出req的相關(guān)信息，比如 路徑 請求方法 請求頭 請求體等    // 編寫服務(wù)端邏輯處理代碼    // 響應(yīng)    res.end();})
server.listen(3000, () => console.log('::3000'));
// 假設(shè)該程序巡行在 ip地址為 140.143.201.230的服務(wù)器上// 假設(shè) 140.143.201.230 綁定的域名是 www.aabbcc.com// 那么請求地址 可以為   http://www.aabbcc.com:3000/home
// 當瀏覽器請求 http://www.aabbcc.com:3000/home之后，會DNS解析到服務(wù)器的ip地址為140.143.201.230，那么上述http.createServer接收的回調(diào)函數(shù)就會執(zhí)行。

服務(wù)器響應(yīng)

• 狀態(tài)碼

• 狀態(tài)文本

• 響應(yīng)頭

• 響應(yīng)體

TCP鏈接斷開

1. 瀏覽器端發(fā)消息通知服務(wù)器現(xiàn)在需要斷開（第一次揮手）

2. 服務(wù)器接到要斷開的請求之后，給瀏覽器返回消息，告訴瀏覽器我正在準備釋放（第二次揮手）

3. 此時瀏覽器接到消息后正在等待服務(wù)器釋放完成，而服務(wù)器正在準備釋放的過程

4. 當服務(wù)器釋放完成后，再通知瀏覽器我已經(jīng)釋放完成了。（第三次揮手）

5. 瀏覽器接收到服務(wù)器釋放完成的消息后，再給服務(wù)器發(fā)送消息告訴服務(wù)器我已經(jīng)知道你釋放完成了，服務(wù)器收到消息后，就能確認自己釋放完成的消息已經(jīng)通知到了（第四次揮手）

瀏覽器解析資源

1. 首先，查看Response Header,根據(jù)響應(yīng)頭的指示做不同的事情，比如重定向，存儲cookie，解壓gzip，緩存資源等等。

2. 接下來獲取MIME類型（查看響應(yīng)頭的 Content-Type的值），根據(jù)不同的資源類型采用不同的解析方式

渲染頁面

html頁面的加載

1. 解碼：傳輸回來的其實都是一些二進制字節(jié)數(shù)據(jù)，瀏覽器需要根據(jù)文件指定編碼（例如UTF-8）轉(zhuǎn)換成字符串，也就是HTML 代碼
2. 預(yù)解析：預(yù)解析做的事情是提前加載資源，減少處理時間，它會識別一些會請求資源的屬性，比如img標簽的src屬性，并將這個請求加到請求隊列中。
3. 符號化：符號化是詞法分析的過程，將輸入解析成符號，HTML 符號包括，開始標簽、結(jié)束標簽、屬性名和屬性值。它通過一個狀態(tài)機去識別符號的狀態(tài)，比如遇到<，>狀態(tài)都會產(chǎn)生變化。
4. 構(gòu)建樹：在上一步符號化中，解析器獲得這些標記，然后以合適的方法創(chuàng)建DOM對象并把這些符號插入到DOM對象中。

CSS解析

javaScript編譯執(zhí)行

1. 詞法分析：js腳本加載完畢后，會首先進入語法分析階段，它首先會分析代碼塊的語法是否正確，不正確則拋出“語法錯誤”，停止執(zhí)行。

2. 預(yù)編譯：js有三種運行環(huán)境分別是 全局環(huán)境，函數(shù)環(huán)境，eval。每進入一個不同的運行環(huán)境都會創(chuàng)建一個對應(yīng)的執(zhí)行上下文，根據(jù)不同的上下文環(huán)境，形成一個函數(shù)調(diào)用棧，棧底永遠是全局執(zhí)行上下文，棧頂則永遠是當前執(zhí)行上下文。

3. 執(zhí)行：js雖然是單線程的，但是實際參與工作的線程一共有四個：JS引擎線程（主），事件觸發(fā)線程，定時器觸發(fā)線程，HTTP異步請求線程

總結(jié)

1. 解析url地址

2. DNS解析

3. TCP鏈接

4. 發(fā)送http請求

5. 服務(wù)器接收請求

6. 服務(wù)器響應(yīng)

7. TCP鏈接斷開

8. 瀏覽器解析資源