一,瀏覽器渲染過程
瀏覽器的主要功能是將使用者需要的web資源展現出來,瀏覽器向服務端傳送請求獲取所需要的資料,並將其展示在瀏覽器視窗中。
使用者輸入**,瀏覽器向伺服器請求對應的資料,伺服器返回對應的html檔案;
瀏覽器開始解析html檔案,發現中的link標籤引用了外部css檔案;
瀏覽器繼續向伺服器請求該css檔案,伺服器返回該css檔案;
瀏覽器繼續解析**,到,並根據之前拿到的css檔案開始渲染頁面;
瀏覽器發現了,並立即執行他,
如果在js**中需要改變dom,瀏覽器則返回來重新渲染這部分**;
一直到看到
repaint——(重繪)是在乙個元素的外觀被改變,但沒有改變布局的情況下發生。如果只是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部布局的屬性,將只會引起瀏覽器repaint。
reflow——(回流):瀏覽器發現某個部分發生了點變化影響了布局,需要倒回去重新渲染,這個回退的過程就叫回流。意味著元件的幾何尺寸變了,我們需要重新驗證並計算 render tree。
二,css書寫時注意
由於css選擇器是從右往左匹配的;
dom結構的深度盡可能淺;
使用現代合法的css屬性
不要寫id類名或id屬性選擇器
避免使用後代選擇器
避免使用萬用字元
三,js書寫注意
script標籤寫在body之後,保證執行js**前,dom結構渲染完成
合併**,盡可能減少script標籤的引用
瀏覽器渲染展示網頁的過程
1.解析html html parser 2.構建dom樹 dom tree 3.構建渲染樹 render tree 4.繪製渲染樹 painting 通過請求得到的 html 經過解析 html parser 生成 dom tree。而在 css 解析完畢後,需要將解析的結果與 dom tree ...
瀏覽器渲染機制與效能優化
詳讀了很多文章,最終對比總結出來的瀏覽器渲染機制,並提出相應的優化原則 瀏覽器將從伺服器中獲取的html文件逐步解析,構建dom樹 在構建dom樹時,如果碰到js和css,會載入執行並阻塞html的解析,即html解析器會將控制權交給js或css解析器,當這個元素被解析完之後,將控制權重交回給htm...
web效能優化 瀏覽器渲染原理
在web效能優化 瀏覽器工作原理中講到,瀏覽器渲染是在renderer process中完成的。那我們來看下renderer process究竟幹了什麼?renderer process包含的執行緒有 1.主線程 main thread 2.工作執行緒 workder thread 3.合成器執行緒...