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