前端面試8：渲染機制

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

課程思惟導圖

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層面：操做多個樣式時，能夠先彙總到一個類中，而後一次性修改