從瀏覽器地址欄輸入url到顯示頁面的步驟

基礎(chǔ)版本

瀏覽器根據(jù)請求的URL交給DNS域名解析诀艰，找到真實IP，向服務(wù)器發(fā)起請求黄绩；
服務(wù)器交給后臺處理完成后返回數(shù)據(jù)羡洁，瀏覽器接收文件（HTML、JS爽丹、CSS筑煮、圖象等）；
瀏覽器對加載到的資源（HTML粤蝎、JS真仲、CSS等）進(jìn)行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）初澎；
載入解析到的資源文件秸应，渲染頁面，完成碑宴。

詳細(xì)版

在瀏覽器地址欄輸入URL
瀏覽器查看緩存软啼，如果請求資源在緩存中并且新鮮，跳轉(zhuǎn)到轉(zhuǎn)碼步驟
1. 如果資源未緩存延柠，發(fā)起新請求
2. 如果已緩存祸挪，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端贞间，否則與服務(wù)器進(jìn)行驗證贿条。
3. 檢驗新鮮通常有兩個HTTP頭進(jìn)行控制
```
Expires
```
  和
```
Cache-Control
```
  - HTTP1.0提供Expires，值為一個絕對時間表示緩存新鮮日期
  - HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最大新鮮時間
瀏覽器解析URL獲取協(xié)議增热，主機(jī)整以，端口，path
瀏覽器組裝一個HTTP（GET）請求報文
瀏覽器

獲取主機(jī)ip地址钓葫，過程如下：
1. 瀏覽器緩存
2. 本機(jī)緩存
3. hosts文件
4. 路由器緩存
5. ISP DNS緩存
6. DNS遞歸查詢（可能存在負(fù)載均衡導(dǎo)致每次IP不一樣）
打開一個socket與目標(biāo)IP地址悄蕾，端口建立TCP鏈接票顾，三次握手如下：
1. 客戶端發(fā)送一個TCP的SYN=1础浮，Seq=X的包到服務(wù)器端口
2. 服務(wù)器發(fā)回SYN=1帆调， ACK=X+1， Seq=Y的響應(yīng)包
3. 客戶端發(fā)送ACK=Y+1豆同， Seq=Z
TCP鏈接建立后發(fā)送HTTP請求
服務(wù)器接受請求并解析番刊，將請求轉(zhuǎn)發(fā)到服務(wù)程序，如虛擬主機(jī)使用HTTP Host頭部判斷請求的服務(wù)程序
服務(wù)器檢查HTTP請求頭是否包含緩存驗證信息如果驗證緩存新鮮影锈，返回304等對應(yīng)狀態(tài)碼
處理程序讀取完整請求并準(zhǔn)備HTTP響應(yīng)芹务，可能需要查詢數(shù)據(jù)庫等操作
服務(wù)器將響應(yīng)報文通過TCP連接發(fā)送回瀏覽器
瀏覽器接收HTTP響應(yīng)，然后根據(jù)情況選擇關(guān)閉TCP連接或者保留重用鸭廷，關(guān)閉TCP連接的四次握手如下：
1. 主動方發(fā)送Fin=1枣抱， Ack=Z， Seq= X報文
2. 被動方發(fā)送ACK=X+1辆床， Seq=Z報文
3. 被動方發(fā)送Fin=1佳晶， ACK=X， Seq=Y報文
4. 主動方發(fā)送ACK=Y讼载， Seq=X報文
瀏覽器檢查響應(yīng)狀態(tài)嗎：是否為1XX轿秧，3XX， 4XX咨堤， 5XX菇篡，這些情況處理與2XX不同
如果資源可緩存，進(jìn)行緩存
對響應(yīng)進(jìn)行解碼（例如gzip壓縮）
根據(jù)資源類型決定如何處理（假設(shè)資源為HTML文檔）
解析HTML文檔一喘，構(gòu)件DOM樹驱还，下載資源，構(gòu)造CSSOM樹凸克，執(zhí)行js腳本铝侵，這些操作沒有嚴(yán)格的先后順序，以下分別解釋
構(gòu)建DOM樹：
1. Tokenizing：根據(jù)HTML規(guī)范將字符流解析為標(biāo)記
2. Lexing：詞法分析將標(biāo)記轉(zhuǎn)換為對象并定義屬性和規(guī)則
3. DOM construction：根據(jù)HTML標(biāo)記關(guān)系將對象組成DOM樹
解析過程中遇到圖片触徐、樣式表咪鲜、js文件，啟動下載
構(gòu)建CSSOM樹：
1. Tokenizing：字符流轉(zhuǎn)換為標(biāo)記流
2. Node：根據(jù)標(biāo)記創(chuàng)建節(jié)點
3. CSSOM：節(jié)點創(chuàng)建CSSOM樹
根據(jù)DOM樹和CSSOM樹構(gòu)建渲染樹
1. 從DOM樹的根節(jié)點遍歷所有可見節(jié)點撞鹉，不可見節(jié)點包括：1）script,meta這樣本身不可見的標(biāo)簽疟丙。2)被css隱藏的節(jié)點，如display: none
2. 對每一個可見節(jié)點鸟雏，找到恰當(dāng)?shù)腃SSOM規(guī)則并應(yīng)用
3. 發(fā)布可視節(jié)點的內(nèi)容和計算樣式
js解析如下：
1. 瀏覽器創(chuàng)建Document對象并解析HTML享郊，將解析到的元素和文本節(jié)點添加到文檔中，此時document.readystate為loading
2. HTML解析器遇到沒有async和defer的script時孝鹊，將他們添加到文檔中炊琉，然后執(zhí)行行內(nèi)或外部腳本。這些腳本會同步執(zhí)行，并且在腳本下載和執(zhí)行時解析器會暫停苔咪。這樣就可以用document.write()把文本插入到輸入流中锰悼。同步腳本經(jīng)常簡單定義函數(shù)和注冊事件處理程序，他們可以遍歷和操作script和他們之前的文檔內(nèi)容
3. 當(dāng)解析器遇到設(shè)置了async屬性的script時团赏，開始下載腳本并繼續(xù)解析文檔箕般。腳本會在它下載完成后盡快執(zhí)行，但是解析器不會停下來等它下載舔清。異步腳本禁止使用document.write()丝里，它們可以訪問自己script和之前的文檔元素
4. 當(dāng)文檔完成解析，document.readState變成interactive
5. 所有defer腳本會按照在文檔出現(xiàn)的順序執(zhí)行体谒，延遲腳本能訪問完整文檔樹杯聚，禁止使用document.write()
6. 瀏覽器在Document對象上觸發(fā)DOMContentLoaded事件
7. 此時文檔完全解析完成，瀏覽器可能還在等待如圖片等內(nèi)容加載抒痒，等這些內(nèi)容完成載入并且所有異步腳本完成載入和執(zhí)行械媒，document.readState變?yōu)閏omplete，window觸發(fā)load事件
顯示頁面（HTML解析過程中會逐步顯示頁面）

詳細(xì)簡版

從瀏覽器接收url到開啟網(wǎng)絡(luò)請求線程（這一部分可以展開瀏覽器的機(jī)制以及進(jìn)程與線程之間的關(guān)系）
開啟網(wǎng)絡(luò)線程到發(fā)出一個完整的HTTP請求（這一部分涉及到dns查詢评汰，TCP/IP請求纷捞，五層因特網(wǎng)協(xié)議棧等知識）
從服務(wù)器接收到請求到對應(yīng)后臺接收到請求（這一部分可能涉及到負(fù)載均衡，安全攔截以及后臺內(nèi)部的處理等等）
后臺和前臺的HTTP交互（這一部分包括HTTP頭部被去、響應(yīng)碼主儡、報文結(jié)構(gòu)、cookie等知識惨缆，可以提下靜態(tài)資源的cookie優(yōu)化糜值，以及編碼解碼，如gzip壓縮等）
單獨拎出來的緩存問題坯墨，HTTP的緩存（這部分包括http緩存頭部寂汇，ETag，catch-control等）
瀏覽器接收到HTTP數(shù)據(jù)包后的解析流程（解析html-詞法分析然后解析成dom樹捣染、解析css生成css規(guī)則樹骄瓣、合并成render樹，然后layout耍攘、painting渲染榕栏、復(fù)合圖層的合成、GPU繪制蕾各、外鏈資源的處理扒磁、loaded和DOMContentLoaded等）
CSS的可視化格式模型（元素的渲染規(guī)則，如包含塊式曲，控制框妨托，BFC，IFC等概念）
JS引擎解析過程（JS的解釋階段，預(yù)處理階段兰伤，執(zhí)行階段生成執(zhí)行上下文内颗，VO，作用域鏈医清、回收機(jī)制等等）
其它（可以拓展不同的知識模塊，如跨域卖氨，web安全会烙，hybrid模式等等內(nèi)容）