輸入URL到頁面渲染完成的過程其實是一系列復雜的步驟。下面我會簡單地概述這個過程,希望可以幫助你記住:
1. URL 輸入: 用戶在瀏覽器中輸入URL。
2. DNS 查詢: 瀏覽器接收到URL后,會通過DNS系統解析URL的域名,得到相應的IP地址。如果瀏覽器緩存或者操作系統緩存中有這個域名對應的IP地址,那么這一步會更快。
3. 建立連接: 瀏覽器通過TCP/IP協議向服務器的IP地址發起TCP連接請求,進行三次握手。
4. 發送 HTTP 請求:連接建立成功后,瀏覽器會向服務器發送HTTP請求,包含了請求頭和請求體等信息。
5. 服務器處理請求并返回 HTTP 響應: 服務器收到HTTP請求后,會處理請求,然后返回一個HTTP響應給瀏覽器,響應中包含了響應頭和響應體(即所請求的html頁面內容)。
6. 瀏覽器解析 HTML: 瀏覽器接收到服務器返回的HTML內容,然后解析HTML,構建DOM樹。
7. 加載 css 和 JAVAScript: 在解析HTML的過程中,如果遇到CSS文件和JavaScript文件的鏈接,瀏覽器會發送請求去獲取并加載這些文件。CSS會被用來構建CSSOM樹,JavaScript在獲取到后會立即執行。
8. 渲染頁面:當DOM樹和CSSOM樹構建完成后,瀏覽器會將二者組合生成渲染樹(Render Tree),然后計算渲染樹上每個節點的布局,最后繪制到屏幕上,完成頁面的首次渲染。
9. 執行 JavaScript:如果HTML中還包含JavaScript,那么瀏覽器在適當的時機(如DOMContentLoaded事件)會執行這些JavaScript代碼。這些代碼可能會修改DOM結構或CSS樣式,導致頁面重新渲染。
10. 加載異步資源: 頁面在首次渲染完成后,可能還會通過JavaScript加載其他異步資源(如圖片,其他JavaScript模塊等)。這些資源加載并處理完后可能會再次導致頁面渲染。
以上就是從輸入URL到頁面渲染完成的整個過程。每個步驟都有很多細節,可以深入學習。