版本1（基礎版本）
步驟1：瀏覽器根據請求的 URL 交給 DNS 域名決議，找到真實 IP ，向服務器發起請求；
步驟2：服務器交給后臺處理完成后回傳資料，瀏覽器接收?件（ HTML、JS、CSS 、圖象等）；
步驟3：瀏覽器對加載到的資源（ HTML、JS、CSS 等）進?語法決議，建?相應的內部資料結構 （如 HTML 的 DOM ）；
步驟4：載?決議到的資源?件，渲染??，完成，
版本2（詳細版本）
1. 在瀏覽器地址欄輸?URL
2. 瀏覽器查看快取，如果請求資源在快取中并且新鮮，跳轉到轉碼步驟
2.1. 如果資源未快取，發起新請求
2.2. 如果已快取，檢驗是否?夠新鮮，?夠新鮮直接提供給客戶端，否則與服務器進?驗 證，
2.3. 檢驗新鮮通常有兩個HTTP頭進?控制 Expires 和 Cache-Control ：
- HTTP1.0提供Expires，值為?個絕對時間表示快取新鮮?期
- HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最?新鮮時間
3. 瀏覽器決議URL獲取協議，主機，端?，path
4. 瀏覽器組裝?個HTTP（GET）請求報?
5. 瀏覽器獲取主機ip地址，程序如下：
5.1. 瀏覽器快取
5. 2. 本機快取
5.3. hosts?件
5.4. 路由器快取
5.5. ISP DNS快取
5.6. DNS遞回查詢（可能存在負載均衡導致每次IP不?樣）
6. 打開?個socket與?標IP地址，端?建?TCP鏈接，三次握?如下：
6.1. 客戶端發送?個TCP的SYN=1，Seq=X的包到服務器端?
6.2. 服務器發回SYN=1， ACK=X+1， Seq=Y的回應包
6.3. 客戶端發送ACK=Y+1， Seq=Z
7. TCP鏈接建?后發送HTTP請求
8. 服務器接受請求并決議，將請求轉發到服務程式，如虛擬主機使?HTTP Host頭部判斷請 求的服務程式
9. 服務器檢查HTTP請求頭是否包含快取驗證資訊如果驗證快取新鮮，回傳304等對應狀態碼
10. 處理程式讀取完整請求并準備HTTP回應，可能需要查詢資料庫等操作
11. 服務器將回應報?通過TCP連接發送回瀏覽器
12. 瀏覽器接收HTTP回應，然后根據情況選擇關閉TCP連接或者保留重?，關閉TCP連接的四 次握?如下：
12.1. 主動?發送Fin=1， Ack=Z， Seq= X報?
12.2. 被動?發送ACK=X+1， Seq=Z報?
12.3. 被動?發送Fin=1， ACK=X， Seq=Y報?
12.4. 主動?發送ACK=Y， Seq=X報?
13. 瀏覽器檢查回應狀態嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同
14. 如果資源可快取，進?快取
15. 對回應進?解碼（例如gzip壓縮）
16. 根據資源型別決定如何處理（假設資源為HTML?檔）
17. 決議HTML?檔，構件DOM樹，下載資源，構造CSSOM樹，執?js腳本，這些操作沒有嚴格的先后順序，以下分別解釋
18. 構建DOM樹：
18.1. Tokenizing：根據HTML規范將字符流決議為標記
18.2. Lexing：詞法分析將標記轉換為物件并定義屬性和規則
18.3. DOM construction：根據HTML標記關系將物件組成DOM樹
19. 決議程序中遇到圖?、樣式表、js?件，啟動下載
20. 構建CSSOM樹：
20.1. Tokenizing：字符流轉換為標記流
20. 2. Node：根據標記創建節點
20. 3. CSSOM：節點創建CSSOM樹
21. 根據DOM樹和CSSOM樹構建渲染樹 :
21.1. 從DOM樹的根節點遍歷所有可?節點，不可?節點包括：
1）script , meta 這樣本身 不可?的標簽，
2) 被css隱藏的節點，如 display: none
21.2. 對每?個可?節點，找到恰當的CSSOM規則并應?
21.3. 發布可視節點的內容和計算樣式
22. js決議如下：
22.1. 瀏覽器創建Document物件并決議HTML，將決議到的元素和?本節點添加到?檔中，此 時document.readystate為loading
22.2. HTML決議器遇到沒有async和defer的script時，將他們添加到?檔中，然后執??內 或外部腳本，這些腳本會同步執?，并且在腳本下載和執?時決議器會暫停，這樣就可 以?document.write()把?本插?到輸?流中，同步腳本經常簡單定義函式和注冊事件 處理程式，他們可以遍歷和操作script和他們之前的?檔內容
22.3. 當決議器遇到設定了async屬性的script時，開始下載腳本并繼續決議?檔，腳本會在它 下載完成后盡快執?，但是決議器不會停下來等它下載，異步腳本禁?使? document.write()，它們可以訪問??script和之前的?檔元素
22.4. 當?檔完成決議，document.readState變成interactive
22.5. 所有defer腳本會按照在?檔出現的順序執?，延遲腳本能訪問完整?檔樹，禁?使? document.write()
22.6. 瀏覽器在Document物件上觸發DOMContentLoaded事件 7. 此時?檔完全決議完成，瀏覽器可能還在等待如圖?等內容加載，等這些內容完成載? 并且所有異步腳本完成載?和執?，document.readState變為complete，window觸發 load事件 23. 顯示??（HTML決議程序中會逐步顯示??）
版本3（詳細簡版）
1. 從瀏覽器接收 url 到開啟?絡請求執行緒（這?部分可以展開瀏覽器的機制以及行程與執行緒 之間的關系）
2. 開啟?絡執行緒到發出?個完整的 HTTP 請求（這?部分涉及到dns查詢， TCP/IP 請求， 五層因特?協議堆疊等知識）
3. 從服務器接收到請求到對應后臺接收到請求（這?部分可能涉及到負載均衡，安全攔截以 及后臺內部的處理等等）
4. 后臺和前臺的 HTTP 互動（這?部分包括 HTTP 頭部、回應碼、報?結構、 cookie 等知 識，可以提下靜態資源的 cookie 優化，以及編碼解碼，如 gzip 壓縮等）
5. 單獨拎出來的快取問題， HTTP 的快取（這部分包括http快取頭部， ETag ， catchcontrol 等）
6. 瀏覽器接收到 HTTP 資料包后的決議流程（決議 html -詞法分析然后決議成 dom 樹、解 析 css ?成 css 規則樹、合并成 render 樹，然后 layout 、 painting 渲染、復合圖 層的合成、 GPU 繪制、外鏈資源的處理、 loaded 和 DOMContentLoaded 等）
7. CSS 的可視化格式模型（元素的渲染規則，如包含塊，控制框， BFC ， IFC 等概念）
8. JS 引擎決議程序（ JS 的解釋階段，預處理階段，執?階段?成執?上下?， VO ，作 ?域鏈、回識訓制等等）
9. 其它（可以拓展不同的知識模塊，如跨域，web安全， hybrid 模式等等內容）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/528018.html
標籤：其他
上一篇：圖資料挖掘：冪律分布和無標度網路
下一篇：資料結構與演算法之查找