面試**公司的時候，遇到了「簡要描述瀏覽器回流和重繪的區別及對效能的影響，如何盡量避免對頁面效能的影響」的筆試題。由於我面試之前根本沒做任何準備，所以只是單純的寫了一下我的簡單理解：頁面回流是由於元素寬高、層級位置發生變化而引起的重新布局。頁面重繪是由於頁面元素背景顏色等不影響布局的樣式發生變化所引起的重新渲染。頁面回流和重繪都會導致頁面重複渲染，影響頁面渲染效率。通過使用position:absolute布局可以有效減少頁面回流。回家之後，覺得自己答的太簡單了，有些細節點沒答清楚。仔細閱讀了網上大佬的文章，為了便於以後回顧複習，故總結成此文。
欲理解重排和重繪，必先了解瀏覽器渲染頁面的機制。先上寶圖：
為了方便以後與別人溝通，特將中文翻譯圖也貼出來
看圖說話：
解析html生成dom樹
解析css樣式表生成cssom(css object modal)
將cssom資訊附著到dom樹上以生成渲染樹（render tree包含每個節點的視覺資訊）
生成流式布局（layout），即將渲染樹的所有節點進行平面合成
將布局繪製（paint）到螢幕上
瀏覽器渲染乙個html文件大致要經歷以上步驟，其中前3步都是比較迅速的，最後兩步是比較耗時的。
「生成布局」（flow）和「繪製」（paint）合稱為「渲染」（render）
乙個網頁在顯示的過程中，至少要經過一次渲染。使用者在瀏覽過程中，還會不斷重新渲染
重新渲染，就需要重新布局（reflow)或重新繪製（repaint）
頻繁的重排會影響頁面的重新整理率（fps）,特別是一些很耗時的重新布局。
樣式讀寫操作分離
通過class或csstext批量修改樣式
快取需要通過重排才能得到的值
通過document fragment或者clone node修改元素樣式
通過先設定display:none隱藏元素後再修改
以絕對定位(absolute)或固定定位（fix）布局改變元素位置
使用虛擬dom前端框架
通過window.requestanimationframe和window.requestidlecallback這兩個方法調節渲染頻率
transform、opacity、filters這些動畫都會有css3硬體加速（gpu加速），並且不會引起回流和重繪
在需要隱藏元素的場景下，使用visibility代替display:none
避免使用table布局（table需要大量的rendertree布局時間計算）
盡可能在dom樹最末端修改元素的class,限制重排影響的範圍，使其影響盡可能少的節點
避免使用css表示式，可能會引發重排
將頻繁重排或者回流的節點設定為圖層，圖層能夠限制限制該節點渲染的影響範圍。will-change、iframe、video標籤，瀏覽器會將其渲染為單獨的圖層
本文嚴重參考阮一峰老師的網頁效能管理詳解,因為總結的實在時簡潔明瞭，適合時時回憶參考。希望各位，不喜勿噴。噴，我也攔不住。
瀏覽器重排與重繪
前幾天內推某街，被問到了醬紫乙個問題，了解瀏覽器的重繪與重排嗎？瞬間蒙住了，的確好像沒有怎麼聽說過。於是今天抽了點時間研究了下重排和重繪，這裡分享給大家。瀏覽器在頁面渲染過程中非常重要的兩個概念，即重排和重繪。了解這兩個概念對於你在今後寫 過程中，尤其是對效能要求比較高的話，有非常大的幫助。來看看這...
瀏覽器重繪和重排
我的部落格地圖 前端開發崗位是乙個知識範圍比較綜合的乙個崗位，需要了解和 的知識很多，因此，可以從廣度和深度兩個方面著手，初級工程師以廣度學習為主，高階工程師以深度研究為主。重排發生的情景 頁面渲染初始化 瀏覽器視窗改變 dom元素幾何屬性 width，height 變化 可見dom元素的增刪 do...
深入瀏覽器重排與重繪
dom樹表示頁面結構，渲染樹表示dom節點如何顯示。dom樹中的每乙個需要顯示的節點在渲染樹種至少存在乙個對應的節點 隱藏的dom元素disply值為none 在渲染樹中沒有對應的節點 渲染樹中的節點被稱為 幀 或 盒 符合css模型的定義，理解頁面元素為乙個具有填充，邊距，邊框和位置的盒子。一旦d...