從輸入url到頁面加載完成的過程中都發生了什麼?(針對前端)

1、輸入url地址後,瀏覽器查找域名的IP地址,這一步涉及到DNS的解析;
2、當解析完成找到目標服務器,瀏覽器會向web服務器發送一個http請求;
3、服務器接受並處理http請求;
4、服務器構造併發送響應報文;
5、瀏覽器 接收報文開始構建html頁面;
6、瀏覽器發送靜態資源請求,具體步驟略,服務器會把一些圖片視頻等資源返回給瀏覽器;
7、瀏覽器發送Ajax請求;
8、頁面構建完成;


注:其中瀏覽器構建頁面的時候有這樣幾個步驟:
解析html構建DOM樹->構建render樹->佈局render樹 ->繪製render樹

渲染引擎開始解析html,並將標籤轉化爲內容樹中的dom節點。接着,它解析外部CSS文件及style標籤中的樣式信息。這些樣式信息以及html中的可見性指令將被用來構建另一棵樹——render樹。

Render樹由一些包含有顏色和大小等屬性的矩形組成,它們將被按照正確的順序顯示到屏幕上。

Render樹構建好了之後,將會執行佈局過程,它將確定每個節點在屏幕上的確切座標。再下一步就是繪製,即遍歷render樹,並使用UI後端層繪製每個節點。

值得注意的是,這個過程是逐步完成的,爲了更好的用戶體驗,渲染引擎將會盡可能早的將內容呈現到屏幕上,並不會等到所有的html都解析完成之後再去構建和佈局render樹。它是解析完一部分內容就顯示一部分內容,同時,可能還在通過網絡下載其餘內容。

從圖3和4中可以看出,儘管webkit和Gecko使用的術語稍有不同,他們的主要流程基本相同。Gecko稱可見的格式化元素組成的樹爲frame樹,每個元素都是一個frame,webkit則使用render樹這個名詞來命名由渲染對象組成的樹。Webkit中元素的定位稱爲佈局,而Gecko中稱爲迴流。Webkit稱利用dom節點及樣式信息去構建render樹的過程爲attachment,Gecko在html和dom樹之間附加了一層,這層稱爲內容接收器,相當製造dom元素的工廠。下面將討論流程中的各個階段。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章