瀏覽器與伺服器的互動
瀏覽器的主要功能是將使用者選擇的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 已經拿...