一個頁面從輸入URL到頁面載入顯示完成，這個過程都發生了什麼事？

對於網址列的URL不同的操作方式有不同的加載資源、獲取數據的方式，下面的詳細過程針對"在地址欄輸入URL，按enter(回車)鍵加載資源"此種操作方式做解析，其它的方式的過程大同小異，差異會在後面再做分析。

　　1. 瀏覽器開啟一個執行緒來處理這個請求，對URL判斷如果是http協定就按照web方式處理；

　　2. 瀏覽器先查看瀏覽器快取-系統快取-路由器緩存，如果快取中有，會直接在螢幕中顯示頁面內容（此時沒有向服務端發請求）。若沒有，進行下一步操作 　　3. 透過DNS解析取得網址的IP位址;

　　4. 向真實IP位址伺服器發起tcp連接，與瀏覽器建立tcp三次握手。

　　5. 握手成功後，進行HTTP協定會話，瀏覽器發送標頭(請求報頭

); 　　6. 進入到web伺服器上的 Web Server，如 Apache、、

，如

Apache 　　7. 進入部署好的後端應用，如 PHP、Java、JavaScript、發現的請求等。 　　8

. 

處理結束回饋報頭，將資料回傳至瀏覽器; 　　9. 瀏覽器開始下載html文件(回應標頭，狀態碼200)，同時設定快取記憶體

　　10. 之後瀏覽器對整個

HTML 結構進行解析，形成 DOM 樹；同時，它還需要對對應的 CSS 檔案進行解析，形成 CSS 樹（CSSOM）。    

     　　接下來，需要結合 DOM + CSSOM，形成一個繪製樹（Render Tree）; 　　11. 得到繪製樹之後，需要計算每個結點在頁中的位置，這個過程稱為layout ；

　　12. layout

的過程是在一個連續的二維平面上進行的，接下來，需要將這些結果柵格化，映射到屏幕的離散二維平面上，這一過       　　 程稱為 paint ;  現代瀏覽器為提升效能，將頁面分割多個 layer，各自進行 paint 然後組合成一個頁面（composite layers）。

　

PS: 開頭說到的"對於網址列的URL不同的操作方式有不同的加載資源、獲取數據的方式"對於網址列的URL不同的操作方式有不同的加載資源、獲取過程的方式，只是在處理快取這一環節上有些不同：

1. 「轉至」或網址列裡回車刷新：見上

2. F5刷新：沒有第2步，第8步判斷返回值，如果返回304則表示有緩存，且此時直接用緩存；如果返回有緩存 沒有緩存，順序執行至最後

3. Ctrl+F5刷新網頁的區別：沒有第2步，且在第8步一定返回200並順序執行至最後

（對於以上3種不同方式更好的應該從http協議的緩存機制上做區分更容易理解，此處更側重'向服務端發送請求及其返回值'這方面做一下區別）

   

PS: 

10-12步驟更著重前端渲染頁過程，詳細可參考：http://www.jianshu.com/p/016e8e78888e7888  

 

🎜🎜 🎜🎜