作為一個前端，經常會有老板或測試給我們提出某個地方加載太慢了，需要優化一下。我們自己的網站也一樣，加載時間過長，自己都不耐煩，對於網頁優化是很常見的，今天我們先介紹下網頁加載原理。
一、瀏覽器簡介
想要了解瀏覽器的工作原理，我們必須清楚瀏覽器的組成有哪些？以及各個部分功能。
瀏覽器組成部分如圖所示：
各部分的功能及意義：
- 用戶界面：瀏覽器的界面，有標簽頁、地址欄、前進、后退、刷新、收藏等。除了請求到的內容頁面。
- 瀏覽器引擎：用來查詢和操作渲染引擎的接口。
- 渲染引擎：也叫做 “瀏覽器內核” ，用來解析 html、css 並將結果以網頁的形式顯示，不同瀏覽器內核不同，同理渲染引擎也不同。
- 網絡：用來網絡調用，如前后端數據交互中的http請求。
- js 解釋器：用來解釋執行js代碼。
- UI 后端：繪制基礎原件，如組合框與窗口，提供平台無關的接口，內部使用操作系統的相應實現。
- 數據存儲：屬於持久層。瀏覽器需要把所有數據存到硬盤上，如 cookie、圖片、css 等。
二、瀏覽器工作流程
我們在瀏覽器用戶界面的地址欄中，輸入我們需要訪問網站地址url后回車。
瀏覽器工作流程：
- 構建請求：瀏覽器開啟網絡請求線程，向服務器發送完整的http請求。
- 查找緩存：真正發起網絡請求之前，瀏覽器會先在數據存儲中查詢是否有需要請求的文件。如果沒有任何緩存，說明第一次請求，則進入網絡請求過程。當瀏覽器有緩存的時候，會攔截請求，返回緩存，攔截請求。緩存優點：緩解服務器壓力，提升性能，實現快速加載資源。
- 准備IP地址和端口：通過 URL 地址獲取 ip 地址和端口信息，通過 DNS 解析返回域名對應的 ip 和 port ，瀏覽器也提供了 dns 數據緩存，通常 url 沒有指明端口號，則默認80。
- 等待TCP隊列：chrome 有個機制，同一域名下同時最多只能建立6個TCP連接，如果同時有10個請求發生，其中4個就會進入等待隊列，直至進行中的請求完成，如果小於6個，則直接進入TCP 連接。
- 建立TCP連接：瀏覽器與服務器之間通過 TCP 建立連接。TCP協議提供可靠的連接服務，采用三次握手建立一個連接。
- 發送http請求：連接建立成功之后，瀏覽器就可以與服務器之間通訊了。瀏覽器會向服務器發送請求信息，包括請求方法、請求 URL、http 版本協議。
- 服務器處理請求：服務端收到請求信息以后，會根據瀏覽器的請求信息返回結果，返回結果中包含三部分：響應行、響應頭、響應體。響應行內包含狀態碼，告訴瀏覽器處理結果，http狀態碼有很多。響應頭包含服務器自身的一些信息，響應體就包含了網頁的 html 實際內容。
- 服務器響應和斷開連接：通常服務器向瀏覽器返回請求數據之后，就會關閉連接，經過四次分手之后，就斷開連接了。
瀏覽器中http請求階段如圖：
http請求和響應處理，是前端與后端數據交互的時候經常使用的部分。
三、瀏覽器渲染過程
渲染引擎通過網絡獲得請求文檔內容（以8k分塊的方式完成），然后開始：解析html為DOM樹 > 渲染樹結構 > 布局渲染 > 繪制渲染樹。
具體解析過程為：
開始解析 html 內容，將標簽轉化為 DOM 節點，然后解析它外部的css文件以及 style 中的樣式信息。css 樣式信息和 html 標簽來構建渲染樹。渲染樹是由一些包含顏色大小等盒子組成的，按照從上到下，從左到右的方式顯示，渲染樹構建好之后，執行布局過程，將每個節點確定在屏幕上的確切坐標，最后使用 UI 后端層繪制每個節點。
舉例說明下瀏覽去解析 html、css、js 的過程：
- 瀏覽去地址欄輸入地址后回車，假設第一次訪問，瀏覽去向服務器發送請求，返回html文件。
- 瀏覽去載入html代碼，解析head中的link引入的外部css文件。
- 瀏覽器發出css文件請求，服務器會返回css文件。
- 瀏覽器繼續載入body部分代碼，css文件接收到之后，就可以渲染頁面。
- 遇到img標簽引入圖片，會立馬向服務器發送請求，此時不等待返回的圖片，而是繼續向下渲染。
- 瀏覽器接收到返回圖片文件，由於圖片占用一定面積，影響后邊排版，所以瀏覽去需要回過頭重新渲染這部分代碼。
- 瀏覽器發現script標簽，內部包含的js代碼，就會立即執行。
- js腳本執行js語句，如果js語句操作的是DOM元素，瀏覽器就需要重新渲染這部分代碼。
- 等到</html>到來，頁面第一次渲染就完成了。
- 如果用戶點擊"換膚"按鈕，js讓瀏覽器換一個css文件，此時瀏覽去又會向服務器發送請求。
- 等瀏覽器返回新的css文件之后，重新渲染頁面。
需要注意：
- js不能並行下載和解析（阻塞下載）。
- 當引用了JS的時候，瀏覽器發送1個js request就會一直等待該request的返回。因為瀏覽器需要1個穩定的DOM樹結構，而JS中很有可能有代碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器為了防止出現JS修改DOM樹，需要重新構建DOM樹的情況，所以 就會阻塞其他的下載和呈現。
- JS、CSS中如有重定義，后定義函數將覆蓋前定義函數。
先了解網頁的請求，加載，解析過程，然后再考慮到底該如何優化網頁性能呢？