瀏覽器訪問網站過程 1. 用戶在瀏覽器地址欄中輸入網址 2. 瀏覽器解析網址構建HTTP請求 HTTP請求報文包括：請求行、請求頭和請求體 3. 瀏覽器發起DNS解析請求，將功能變數名稱轉化為IP地址 網址映射到伺服器IP地址，指定了訪問的伺服器 4. 瀏覽器發送請求報文給到伺服器 5. 伺服器接收並解析報 ...
瀏覽器訪問網站過程
- 用戶在瀏覽器地址欄中輸入網址
- 瀏覽器解析網址構建HTTP請求
HTTP請求報文包括：請求行、請求頭和請求體 - 瀏覽器發起DNS解析請求，將功能變數名稱轉化為IP地址
網址映射到伺服器IP地址，指定了訪問的伺服器 - 瀏覽器發送請求報文給到伺服器
- 伺服器接收並解析報文
- 伺服器處理請求，並封裝成HTTP響應報文
- 伺服器將響應報文發送給瀏覽器
- 瀏覽器解析響應報文，重新渲染，在遇到新的需求時再次發送HTTP請求
- 最終生成頁面
瀏覽器渲染過程
Google Chrome Blink 引擎
- 解析HTML構建DOM樹
- 解析CSS構建CSS規則樹
- 從DOM樹中篩選出需要渲染出的結點，剔除掉不用渲染的結點（如：、display: none的結點），構建render樹
- 將CSS規則樹與render樹相結合，定位坐標和大小，確定是否換行、position、overflow、z-index等等……此過程稱為reflow或layout
- 調用操作系統底層API進行繪圖
Firefox Gecko 引擎
- 解析HTML構建內容槽（Content Sink）
- 解析內容槽構成內容模型（Content Model），一個類似DOM樹的東西
- 解析CSS構建CSS規則樹
- 將CSS規則樹與DOM樹相結合，生成幀樹（Frame Tree），一種類似render樹的東西
- reflow
- 調用操作系統底層API進行繪圖
IE Trident 引擎 不開源不可知
Reflow / Layout
瀏覽器reflow或layout操作可以在Google Chrome開發者工具中點擊右上角的三個點 -> More tools -> Rendering 中勾選Painting flashing，刷新網頁後觀看整個過程。由此可見，渲染的操作是非常複雜的，因此DOM樹的操作次數務必要儘量地少，在一次重新渲染中執行多個DOM結點的更新會比頻繁進行DOM結點的更新性能高出許多。
HTTP Request & Response
Web程式中的HTTP通訊一般分請求報文和響應報文，兩種報文各有三個部分：
- 請求（響應）報文行
請求行中一般包含請求方法（GET || POST）和通訊協議（HTTP / 版本號）
響應行中一般包含HTTP狀態碼（200、302、404等）和通訊協議（HTTP / 版本號） - 請求（響應）報文頭
請求頭中一般有：主機IP及埠號、Content-Type、瀏覽器版本等等
響應頭中一般有：伺服器類型、Content-Type、時間、Cookies等等 - 請求（響應）報文體
GET方法由於內容被包含在URL中，一般沒有報文體
POST方法一般都需要有報文體
