瀏覽器渲染機制

1、什么是doctype以及作用

DTD就是告訴瀏覽器我是什么類型，瀏覽器就會用何種方式去解析他，doctype就是規(guī)定文檔類型的。
h5: <!DOCTYPE html>
4.0版本有兩種模式，
嚴格模式：不包括廢棄元素
寬松模式：包括廢棄元素

2、瀏覽器的渲染過程

瀏覽器請求到HTML文件之后，解析DOM構(gòu)建DOM樹，同時也會解析CSS，構(gòu)建Style Rules，之后把DOM樹與Style Rules進行Attachment處理，構(gòu)建Render tree，此時也會引入Layout信息，最后在瀏覽器中Painting繪制，最終Display出來。

3、重排Reflow

概念：瀏覽器根據(jù)樣式計算將結(jié)果展示在哪個地方的過程叫Reflow

什么時候會觸發(fā)Reflow？
1、增加刪除節(jié)點的時候，會導致Reflow和Repaint
2、移動DOM位置
3、修改CSS的寬高邊距樣式顯隱狀態(tài)的時候
4、Resize窗口的時候
5、修改網(wǎng)頁默認字體的時候

4、重繪Repaint

概念：頁面要呈現(xiàn)的內(nèi)容統(tǒng)統(tǒng)都畫在屏幕上的過程叫Repaint

觸發(fā)條件
DOM改動
CSS改動
頁面顯示的內(nèi)容發(fā)生變化都會觸發(fā)
優(yōu)化點：把要修改的DOM一次性掛載到DOM上。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容