渲染步驟:瀏覽器渲染頁面時,表示網站資源已經請求成功(要了解查看:瀏覽器向服務器請求資源過程)
解析HTML以構建dom樹--->構建render樹--->布局render樹--->繪制render樹
1.瀏覽器會將HTML解析成一個DOM樹,構建DOM樹是一個深度遍歷的過程,當前節點的所有子節點都構建好以后才會去構建當前節點的下一個兄弟節點;
2.將CSS解析成CSS規則樹;
3.根據DOM樹和CSS規則樹來構造render樹,render樹不等於DOM樹,像header和display:none;這種沒有具體內容的東西就不在render樹中;
4.根據render樹,瀏覽器可以計算出網頁中有哪些節點,各節點的CSS以及從屬關系,然后可以計算出每個節點在屏幕中的位置;
5.遍歷render樹繪制頁面中的各元素。
注意: 頁面發生重構的話,會重新加載DOM樹,影響頁面加載速度,會導致頁面重構的原因如下:
1)頁面初始化;
2)操作DOM時;
3)某些元素的尺寸變了;
4)CSS的屬性發生改變。
加載HTML頁面步驟:
1.用戶輸入網址,瀏覽器向服務器發出請求,服務器返回HTML文件;
2.瀏覽器開始載入HTML代碼,發現<head>標簽內有一個<link>標簽引用外部CSS文件;
3.瀏覽器又發出CSS文件的請求,服務器返回這個CSS文件;
4.CSS文件獲取到以后,瀏覽器繼續載入HTML中<body>部分的代碼;
5.瀏覽器在代碼中發現一個<img>標簽引用了一張圖片,向服務器發出請求,此時瀏覽器不會等到圖片下載完,而是繼續加載后面的代碼;
6.服務器返回圖片文件,由於圖片占用了一定面積,影響了后面段落的排版,因此瀏覽器需要回過頭來重新渲染這部分代碼;
7.瀏覽器發現了一個包含一行js代碼的<script>標簽,直接運行該腳本;
8.執行js過程中,發現代碼中要隱藏某個元素(style.display='none'),這時瀏覽器不得不重新渲染這部分代碼;
9.整個<html></html>文檔暫時加載完成;
10.此時用戶點了一下界面中的“換膚”按鈕,js讓瀏覽器換了一下<link>標簽的CSS路徑;
11.瀏覽器向服務器請求了新的CSS文件,重新加載頁面,然后執行渲染過程。
瀏覽器向服務器請求資源過程:
瀏覽器的主要功能是將用戶選擇的web資源呈現出來,它需要從服務器請求資源,並將其顯示在瀏覽器窗口中,資源的格式通常是HTML,也包括PDF、image及其他格式。用戶用URI(Uniform Resource Identifier統一資源標識符)來指定所請求資源的位置,通過DNS查詢,將網址轉換為IP地址,整個瀏覽器工作的流程:
1.輸入網址;
2.瀏覽器查找域名的IP地址;
3.瀏覽器給web服務器發送一個HTTP請求 ;
4. 網站服務的永久重定向響應 ;
5. 瀏覽器跟蹤重定向地址 現在,瀏覽器知道了要訪問的正確地址,所以它會發送另一個獲取請求;
6. 服務器“處理”請求,服務器接收到獲取請求,然后處理並返回一個響應;
7. 服務器發回一個HTML響應 ;
8. 瀏覽器開始顯示HTML ;
9. 瀏覽器發送請求,以獲取嵌入在HTML中的對象,在瀏覽器顯示HTML時,它會注意到需要獲取其他地址內容的標簽,這時,瀏覽器會發送一個獲取請求來重新獲得這些文件,這些文件就包括CSS/JS/圖片等資源,這些資源的地址都要經歷一個和HTML讀取類似的過程,所以瀏覽器會在DNS中查找這些域名,發送請求,重定向等。