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

轉載于:https://www.cnblogs.com/camille666/p/chongpai_chonghui.html

總結

以上是生活随笔為你收集整理的重排和重绘的全部內容，希望文章能夠幫你解決所遇到的問題。

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