首頁 > web前端 > html教學 > 一個頁面從輸入URL到頁面載入顯示完成,這個過程都發生了什麼事?

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

WBOY
發布: 2016-10-15 10:32:06
原創
1420 人瀏覽過

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

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

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

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

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

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

,如

Apache   7. 進入部署好的後端應用,如 PHPJavaJavaScript、發現的請求等。   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  
 
🎜🎜 🎜🎜

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板