Html頁面渲染

瀏覽器與伺服器的互動

瀏覽器的主要功能是將使用者選擇的web資源呈現出來，它從伺服器請求資源，並將得到的資源（html，pdf，image等等）顯示在瀏覽器視窗。

那麼從使用者敲入url到完整渲染出來，經歷了什麼過程呢？也就是說整個瀏覽器的工作流程是怎樣的呢？

整個過程大致如下：

1. 輸入url，瀏覽器根據網域名稱尋找ip位址

2. 瀏覽器傳送乙個http請求給伺服器，如果伺服器返回以301之類的重定向，瀏覽器根據相應頭中的location再次傳送請求

3. 伺服器接受請求，處理請求生成html**，返回給瀏覽器，這時的html頁面**可能是經過壓縮的

4. 瀏覽器接收伺服器響應結果，如果有壓縮則首先進行解壓處理

5. 瀏覽器開始顯示html

6. 瀏覽器傳送請求，以獲取嵌入在html中的物件。在瀏覽器顯示html時，它會注意到需要獲取其他位址內容的標籤。

這時，瀏覽器會傳送乙個獲取請求來重新獲得這些檔案——包括css/js/等資源，這些資源的位址都要經歷乙個和html讀取類似的過程。

所以瀏覽器會在dns中查詢這些網域名稱，傳送請求，重定向等等…

瀏覽器的渲染

瀏覽器渲染引擎在獲取到內容後的基本流程：

1. 解析html

2. 構建dom樹

3. dom樹與css樣式進行附著構造呈現樹

4. 布局

5. 繪製

上述這個過程是逐步完成的，為了更好的使用者體驗，渲染引擎將會盡可能早的將內容呈現到螢幕上，並不會等到所有的html都解析完成之後再去構建和布局render樹。

html頁面渲染過程

1.解析html檔案，建立dom樹 自上而下解析，遇到任何樣式 link style 和指令碼 script 都會阻塞 1 css載入不會阻塞html檔案的解析，但會阻塞dom的渲染 2 css載入會阻塞後面js語句的執行 3 js會阻塞html的解析和渲染 4 沒有defer和async標籤的sc...

了解html頁面的渲染過程

頁面的渲染有以下特點 具體來說 當我們從網路上得到html的相應位元組時，dom樹就開始構建了。由瀏覽器更新ui的執行緒負責。當遇到以下情況時，dom樹的構建會被阻塞 由於是基於單執行緒的事件輪詢，即使沒有指令碼和樣式的阻塞，當這些指令碼或樣式被解析 執行並且應用的時候，也會阻塞頁面的渲染。一些不會...

html頁面渲染的原理和優化

乙個html網頁載入的大概過程 1.使用者輸入 假定是第一次訪問 瀏覽器向伺服器發出請求，伺服器返回html檔案 2.瀏覽器開始載入html 發現head標籤內有乙個link標籤引用外部css檔案，那麼瀏覽器發出css檔案的請求，等待伺服器返回css檔案 3.瀏覽器繼續載入裡面的 並且css 已經拿...