一個頁面從輸入 URL 到頁面加載顯示完成,這個過程中都發(fā)生了什么?

分為4個步驟:

  1. 當發(fā)送一個URL請求時,不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL,瀏覽器都會開啟一個線程來處理這個請求,同時在遠程DNS服務器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。

  2. 瀏覽器與遠程Web服務器通過TCP三次握手協(xié)商來建立一個TCP/IP連接。該握手包括一個同步報文,一個同步-應答報文和一個應答報文,這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信,而后服務器應答并接受客戶端的請求,最后由客戶端發(fā)出該請求已經被接受的報文。

  3. 一旦TCP/IP連接建立,瀏覽器會通過該連接向遠程服務器發(fā)送HTTP的GET請求。遠程服務器找到資源并使用HTTP響應返回該資源,值為200的HTTP響應狀態(tài)表示一個正確的響應。

  4. 此時,Web服務器提供資源服務,客戶端開始下載資源。包括如下過程:

    • 瀏覽器開始下載html文檔(響應報頭,狀態(tài)碼200),同時設置緩存。
    • 之后瀏覽器對整個 HTML 結構進行解析,形成 DOM 樹;與此同時,它還需要對相應的 CSS 文件進行解析,形成 CSS 樹(CSSOM)。
    • 接下來,需要結合 DOM + CSSOM,形成一個繪制樹(Render Tree)。
    • 得到繪制樹之后,需要計算每個結點在頁面中的位置,這一個過程稱為layout 。
    • layout的過程是在一個連續(xù)的二維平面上進行的,接下來,需要將這些結果柵格化,映射到屏幕的離散二維平面上。這一過程稱為 paint ; 現代瀏覽器為提升性能,將頁面劃分多個 layer,各自進行 paint 然后組合成一個頁面(composite layers)。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容