簡單+淺談前端頁面渲染機制。參考教程
每天接觸最多的某過于瀏覽器了。常見的瀏覽器chrome firefox opear safari等。
其中chrome所占比例對多 可以參考這個網址 瀏覽器市場份額
qq 20170506110835
主要談談chrome瀏覽器的渲染機制
1. 構建Dom樹
-
DOM，即文檔對象模型（Document Object Model）,即文檔內所有節點構成一個屬性結構
qq 20170506110916
2. 構建cssom樹
- CSSOM ,即css對象模型，與DOM結構類型。只是為每一個結構關聯了樣式信息。
qq 20170506110925
3. 執行腳本(javascript)
- 腳本放置的前后的位置很有研究。一般建議放在body體內最下面。
4. 構建渲染樹（render tree）
- 通過對前面的操作的組合會組成一個render tree
- 每一個渲染對象都對應著DOM節點
qq 20170506110934
5. 回流/布局（render tree）
- 創建完渲染樹之后，就是布局也成為回流。就是對每一個渲染對象屬性的計算將其精確放置在瀏覽器窗口上。按照從上往下，從左到右渲染?？赡苓€會觸發重繪。
最后就是投射到屏幕上了。此外還有很多很多細節，多到頭疼。
