一，瀏覽器渲染過程
瀏覽器的主要功能是將使用者需要的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.合成器執行緒...