課程思維導圖

Q：DTD是什么？

文檔類型定義，瀏覽器會使用它來判斷文檔類型，從而決定使用何種協議來解析

Q：DOCTYPE是什么？

文檔類型聲明，通知瀏覽器當前文檔用的是哪個DTD

Q：常用的DOCTYPE的類型有哪些？

HTML5：

HTML4.01 Strict ：嚴格模式，包括所有的HTML元素和屬性，但不包括展示性和棄用的元素，如font

HTML4.01 Transitional：傳統模式，包含所有HTML元素和屬性，包括展示性的和已棄用的

Q：瀏覽器渲染過程是怎樣的？

HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree

在布局階段，把DOM Tree和CSS Rule Tree經過整合生成Render Tree

元素按照算出來的規則，把元素放到它該出現的位置，通過顯卡畫到屏幕上

Q：重排（Reflow）是什么？

定義：DOM中各個元素都有自己的盒子模型，需要瀏覽器根據樣式進行計算，并根據計算結果將元素放到特定位置，這就是Reflow

觸發Reflow的條件

• 增、刪、改、移DOM
• 修改CSS樣式
• Resize窗口
• 頁面滾動
• 修改網頁的默認字體

Q：重繪（Repaint）是什么？

定義：當各種盒子的位置、大小以及其他屬性改變時，瀏覽器需要把這些元素都按照各自的特性繪制一遍，這個過程稱為Repaint。

觸發Repaint的條件：

• DOM改動
• CSS改動

Q：如何減少重繪、避免重排？

本質上，就是合并修改。具體的措施有：

DOM層面：DocumentFragment本質上是一個占位符，真正插入頁面的是它的所有子孫節點，所以，將需要變動的DOM節點先匯總到DocumentFragment，然后一次性插入，可以減少DOM操作的次數。

CSS層面：操作多個樣式時，可以先匯總到一個類中，然后一次性修改

總結

以上是生活随笔為你收集整理的前端面试8：渲染机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。