詳解

解析url

DNS解析

1. 瀏覽器會先檢查是否存在緩存，因?yàn)槿绻L問過一次該域名的話，會把結(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ā)送方回信，此時(shí)發(fā)送方接收到消息后，從發(fā)送方的角度就可明白自己的消息是可以發(fā)過去的。但是接收方還不能確定自己的消息是否可以正常發(fā)送。

• 發(fā)送方：接收到發(fā)送方的回信后，在給接收方發(fā)一個(gè)消息，此時(shí)從接收方的角度就能明白自己的消息可以可以正常發(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
// 當(dāng)瀏覽器請求 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ù)器接到要斷開的請求之后，給瀏覽器返回消息，告訴瀏覽器我正在準(zhǔn)備釋放（第二次揮手）

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

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

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

瀏覽器解析資源

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

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

渲染頁面

html頁面的加載

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

CSS解析

javaScript編譯執(zhí)行

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

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

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

總結(jié)

1. 解析url地址

2. DNS解析

3. TCP鏈接

4. 發(fā)送http請求

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

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

7. TCP鏈接斷開

8. 瀏覽器解析資源