1.簡述重排的概念
瀏覽器下載完頁面中的所有組件（HTML、JavaScript、CSS、圖片）之后會解析生成兩個內部數據結構（DOM樹和渲染樹），DOM樹表示頁面結構，渲染樹表示DOM節點如何顯示。重排是DOM元素的幾何屬性變化，DOM樹的結構變化，渲染樹需要重新計算。
2.簡述重繪的概念
重繪是一個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。由於瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。
3.簡述重繪和重排的關系
重繪不會引起重排，但重排一定會引起重繪，一個元素的重排通常會帶來一系列的反應，甚至觸發整個文檔的重排和重繪，性能代價是高昂的。
4.什么情況下會觸發重排？
(1)頁面渲染初始化時；（這個無法避免）
(2)瀏覽器窗口改變尺寸；
(3)元素尺寸改變時；
(4)元素位置改變時；
(5)元素內容改變時；
(6)添加或刪除可見的DOM 元素時。
5.重排優化有如下五種方法
(1)將多次改變樣式屬性的操作合並成一次操作，減少DOM訪問。
(2)如果要批量添加DOM，可以先讓元素脫離文檔流，操作完后再帶入文檔流，這樣只會觸發一次重排。（fragment元素的應用）
(3)將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設置為絕對定位。
(4)由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對一個元素進行復雜的操作時，可以先隱藏它，操作完成后再顯示。這樣只在隱藏和顯示時觸發兩次重排。
(5)在內存中多次操作節點，完成后再添加到文檔中去。例如要異步獲取表格數據，渲染到頁面。可以先取得數據后在內存中構建整個表格的html片段，再一次性添加到文檔中去，而不是循環添加每一行。
6.CSS加載
- CSS（外鏈或內聯）會阻塞 整個 DOM的渲染（Rendering），然而DOM解析（Parsing）會正常進行
- 很多瀏覽器中，CSS會延遲腳本執行和
DOMContentLoaded事件 - JS（外鏈或內聯）會阻塞 后續 DOM的解析（Parsing），后續DOM的渲染（Rendering）也將被阻塞
- JS前的DOM可以正常解析（Parsing）和渲染（Rendering）
CSS阻塞DOM渲染
無論是外鏈CSS還是內聯CSS都會阻塞DOM渲染（Rendering），然而DOM解析（Parsing）會正常進行。 這意味着在CSS下載並解析結束之前，它后面的HTML都不會顯示。 這也是為什么我們把樣式放在HTML內容之前，以防止被呈現內容發生樣式跳動。 當然代價就是顯示延遲，所以性能攸關的站點都會內聯所有CSS。