前端面試8：渲染機制

課程思維導圖

Q：DTD是什麼？

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

Q：DOCTYPE是什麼？

文件型別宣告，通知瀏覽器當前文件用的是哪個DTD

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

1. HTML5：
2. HTML4.01 Strict ：嚴格模式，包括所有的HTML元素和屬性，但不包括展示性和棄用的元素，如font
3. HTML4.01 Transitional：傳統模式，包含所有HTML元素和屬性，包括展示性的和已棄用的

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

1. HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
2. 在佈局階段，把DOM Tree和CSS Rule Tree經過整合生成Render Tree
3. 元素按照算出來的規則，把元素放到它該出現的位置，通過顯示卡畫到螢幕上

Q：重排（Reflow）是什麼？

1. 定義：DOM中各個元素都有自己的盒子模型，需要瀏覽器根據樣式進行計算，並根據計算結果將元素放到特定位置，這就是Reflow
2. 觸發Reflow的條件
   • 增、刪、改、移DOM
   • 修改CSS樣式
   • Resize視窗
   • 頁面滾動
   • 修改網頁的預設字型

Q：重繪（Repaint）是什麼？

1. 定義：當各種盒子的位置、大小以及其他屬性改變時，瀏覽器需要把這些元素都按照各自的特性繪製一遍，這個過程稱為Repaint。
2. 觸發Repaint的條件：
   • DOM改動
   • CSS改動

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

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

1. DOM層面：DocumentFragment本質上是一個佔位符，真正插入頁面的是它的所有子孫節點，所以，將需要變動的DOM節點先彙總到DocumentFragment，然後一次性插入，可以減少DOM操作的次數。
2. CSS層面：操作多個樣式時，可以先彙總到一個類中，然後一次性修改