前端技術基礎（一）：瀏覽器相關

瀏覽器訪問網站過程

1. 用戶在瀏覽器地址欄中輸入網址
2. 瀏覽器解析網址構建HTTP請求
   HTTP請求報文包括：請求行、請求頭和請求體
3. 瀏覽器發起DNS解析請求，將域名轉化爲IP地址
   網址映射到服務器IP地址，指定了訪問的服務器
4. 瀏覽器發送請求報文給到服務器
5. 服務器接收並解析報文
6. 服務器處理請求，並封裝成HTTP響應報文
7. 服務器將響應報文發送給瀏覽器
8. 瀏覽器解析響應報文，從新渲染，在遇到新的需求時再次發送HTTP請求
9. 最終生成頁面

瀏覽器渲染過程

Google Chrome Blink 引擎

1. 解析HTML構建DOM樹
2. 解析CSS構建CSS規則樹
3. 從DOM樹中篩選出須要渲染出的結點，剔除掉不用渲染的結點（如：、display: none的結點），構建render樹
4. 將CSS規則樹與render樹相結合，定位座標和大小，肯定是否換行、position、overflow、z-index等等……此過程稱爲reflow或layout
5. 調用操做系統底層API進行繪圖

Firefox Gecko 引擎

1. 解析HTML構建內容槽（Content Sink）
2. 解析內容槽構成內容模型（Content Model），一個相似DOM樹的東西
3. 解析CSS構建CSS規則樹
4. 將CSS規則樹與DOM樹相結合，生成幀樹（Frame Tree），一種相似render樹的東西
5. reflow
6. 調用操做系統底層API進行繪圖

IE Trident 引擎 不開源不可知

Reflow / Layout

瀏覽器reflow或layout操做能夠在Google Chrome開發者工具中點擊右上角的三個點 -> More tools -> Rendering 中勾選Painting flashing，刷新網頁後觀看整個過程。因而可知，渲染的操做是很是複雜的，所以DOM樹的操做次數務必要儘可能地少，在一次從新渲染中執行多個DOM結點的更新會比頻繁進行DOM結點的更新性能高出許多。

HTTP Request & Response

Web程序中的HTTP通信通常分請求報文和響應報文，兩種報文各有三個部分：

1. 請求（響應）報文行
   請求行中通常包含請求方法（GET || POST）和通信協議（HTTP / 版本號）
   響應行中通常包含HTTP狀態碼（200、30二、404等）和通信協議（HTTP / 版本號）
2. 請求（響應）報文頭
   請求頭中通常有：主機IP及端口號、Content-Type、瀏覽器版本等等
   響應頭中通常有：服務器類型、Content-Type、時間、Cookies等等
3. 請求（響應）報文體 GET方法因爲內容被包含在URL中，通常沒有報文體 POST方法通常都須要有報文體