41.從瀏覽器位址列輸入url到顯示頁面的步驟
阿新 • • 發佈:2020-08-08
基礎版本(面試筆試)
- 瀏覽器根據請求的
URL
交給DNS
進行域名解析,找到真實IP
地址,向伺服器發起請求; - 伺服器交給後臺處理完成後返回資料,瀏覽器接收檔案(
HTML
、CSS
、JS
、images
等); - 瀏覽器對載入到的資源(
HTML
、CSS
、JS
、images
等)進行語法解析,建立相應的內部資料結構(如HTML
的DOM
); - 載入解析到的資原始檔,渲染頁面,完成。
詳細版本
-
在瀏覽器位址列輸入
URL
-
瀏覽器檢視*快取**,如果請求資源在快取中並且新鮮,跳轉到轉碼步驟
-
如果資源未快取,發起新請求;
-
如果已快取,檢驗是否足夠新鮮,足夠新鮮直接提供給客戶端,否則與伺服器進行驗證;
-
檢驗新鮮通常有兩個
HTTP
頭進行控制Expires
和Cache-Control
:- HTTP1.0 提供
Expires
,值為一個絕對時間表示快取新鮮日期 - HTTP1.1 增加了
Cache-Control:max-age=
,值為以秒為單位的最大新鮮時間
- HTTP1.0 提供
-
-
瀏覽器解析
URL
獲取協議,主機、埠、path -
瀏覽器組裝一個
HTTP(GET)
請求報文 -
瀏覽器獲取主機
IP
地址,過程如下:- 瀏覽器快取
- 本機快取
- hosts檔案
- 路由器快取
- ISP DNS 快取
- DNS 遞迴查詢(可能存在負載均衡導致每次IP不一樣)
-
開啟一個
socket
與目標IP
地址,埠建立TCP
連結,三次握手如下:- 客戶端傳送一個TCP的
SYN=1,Seq=X
- 伺服器發回
SYN=1,ACK=X+1,Seq=Y
的響應包 - 客戶端傳送
ACK=Y+1,Seq=Z
- 客戶端傳送一個TCP的
-
TCP
連結建立後傳送HTTP
請求 -
伺服器接受請求並解析,將請求轉發到服務程式,如虛擬主機使用
HTTP Host
頭部判斷請求的伺服器程式 -
伺服器檢查HTTP請求頭是否包含快取驗證資訊,如果驗證快取新鮮,返回304等對應狀態碼
-
處理程式讀取完整請求並準備HTTP響應,可能需要查詢資料庫等操作
-
伺服器將響應報文通過
TCP
連線傳送回瀏覽器 -
瀏覽器接收HTTP響應,然後根據情況選擇關閉TCP連線或者保留重用,關閉TCP連線的四次握手如下:
- 主動方傳送
Fin=1,Ack=Z,Seq=X
- 被動方傳送
Ack=X+1,Seq=Z
報文 - 被動方傳送
Fin=1,Ack=X,Seq=Y
報文 - 主動方傳送
Ack=Y,Seq=X
報文
- 主動方傳送
-
瀏覽器檢查響應狀態碼:是否為 1xx,3xx,4xx,5xx,這些情況處理與2xx不同
-
如果資源可快取,進行快取
-
對響應進行解碼(比如gzip壓縮)
-
根據資源型別決定如何處理(假設資源為HTML文件)
-
解析HTML文件,構建DOM樹,下載資源,構造CSSOM樹,執行js指令碼,這些操作沒有嚴格的先後順序,以下分別解釋:
-
構建DOM樹:
- Tokenizing:根據HTML規範將字元流解析為標記
- Lexing:詞法分析將標記轉換為物件並定義屬性和規則
- DOM construction:根據HTML標記關係將物件組成DOM樹
-
解析過程中遇到圖片、樣式表、js檔案,啟動下載
-
構建CSSOM樹
- Tokenizing:字元流轉換為標記流
- Node:根據標記建立節點
- CSSOM:節點建立CSSOM樹
-
根據DOM樹和CSSOM樹構建渲染樹
- 從DOM樹的根節點遍歷所有可見節點,不可見節點包括:
1)script
,meta
這樣本身不可見的標籤。2)被css
隱藏的節點,如display: none
- 對每一個可見節點,找到恰當的CSSOM規則並應用
- 釋出可視節點的內容和計算樣式
- 從DOM樹的根節點遍歷所有可見節點,不可見節點包括:
-
js解析
- 瀏覽器建立
Document
物件並解析HTML
,將解析到的元素和文字節點新增到文件中,此時document.readystate
為loading
- HTML解析器遇到沒有
async
和defer
的script
時,將他們新增到文件中,然後執行行內或外部指令碼。這些指令碼會同步執行,並且在指令碼下載和執行時解析器會暫停。這樣就可以用document.write()把文字插入到輸入流中。同步指令碼經常簡單定義函式和註冊事件處理程式,他們可以遍歷和操作script和他們之前的文件內容 - 當解析器遇到設定了
async
屬性的script
時,開始下載指令碼並繼續解析文件。指令碼會在它下載完成後儘快執行,但是解析器不會停下來等它下載。非同步指令碼禁止使用document.write(),它們可以訪問自己script和之前的文件元素 - 當文件完成解析,
document.readState
變成interactive
- 所有
defer
指令碼會按照在文件出現的順序執行,延遲指令碼能訪問完整文件樹,禁止使用document.write()
- 瀏覽器在Document物件上觸發DOMContentLoaded事件
- 此時文件完全解析完成,瀏覽器可能還在等待如圖片等內容載入,等這些內容完成載入並且所有非同步指令碼完成載入和執行,
document.readState
變為complete
,window
觸發load
事件
- 瀏覽器建立
-
顯示頁面(HTML解析過程中會逐步顯示頁面)
詳細簡版
- 從瀏覽器接收
url
到開啟網路請求執行緒(這一部分可以展開瀏覽器的機制以及程序與執行緒之間的關係) - 開啟網路執行緒到發出一個完整的
HTTP
請求(這一部分涉及到dns
查詢,TCP/IP
請求,五層因特網協議棧等知識) - 從伺服器接收到請求到對應後臺接收到請求(這一部分可能涉及到負載均衡,安全攔截以及後臺內部的處理等等)
- 後臺和前臺的
HTTP
互動(這一部分包括HTTP
頭部、響應碼、報文結構、cookie
等知識,可以提下靜態資源的cookie
優化,以及編碼解碼,如gzip
壓縮等) - 單獨拎出來的快取問題,
HTTP
的快取(這部分包括http
快取頭部,ETag
,catch-control
等) - 瀏覽器接收到
HTTP
資料包後的解析流程(解析html
-詞法分析然後解析成dom
樹、解析css
生成css
規則樹、合併成render
樹,然後layout
、painting
渲染、複合圖層的合成、GPU
繪製、外鏈資源的處理、loaded
和DOMContentLoaded
等) CSS
的視覺化格式模型(元素的渲染規則,如包含塊,控制框,BFC
,IFC
等概念)JS
引擎解析過程(JS
的解釋階段,預處理階段,執行階段生成執行上下文,VO
,作用域鏈、回收機制等等)- 其它(可以拓展不同的知識模組,如跨域,web安全,
hybrid
模式等等內容)