在前端開發的征途中，性能優化始終是開發者繞不開的話題。而深入理解瀏覽器的渲染機制，特別是“重繪”（Repaint）與“重排”（Reflow）這兩個核心概念，對于提升頁面加載速度及用戶體驗至關重要。本文將從基本概念出發，逐步深入探討它們的區別、應用場景以及如何通過實戰示例來優化這些過程，確保你的前端項目既高效又健壯。

HTML渲染基礎回顧

在正式展開之前，讓我們快速回顧一下瀏覽器如何渲染HTML文檔。瀏覽器接收到HTML、CSS及JavaScript后，會經歷以下幾個關鍵步驟：

1. 解析：將HTML轉換為DOM樹。
2. 樣式計算：結合CSS生成CSSOM（CSS Object Model）。
3. 布局：將DOM與CSSOM合并，計算出每個節點的幾何位置，形成布局樹（Layout Tree）。
4. 繪制：根據布局樹，將元素繪制到屏幕上。

重繪與重排的概念

重繪（Repaint）

當元素的外觀發生變化，但不涉及布局時（如顏色改變），瀏覽器僅需重新繪制該元素。這一過程相對輕量級，因為它不涉及布局計算。

重排（Reflow）

當頁面的布局結構發生變化，導致瀏覽器需要重新計算元素的位置和尺寸時，就會觸發重排。重排是一個成本高昂的過程，因為它會從DOM樹開始，重新執行樣式計算、布局和繪制等一系列步驟。

區別與影響

• 區別：重繪僅更新元素的視覺外觀，不改變布局；而重排則涉及到布局的重新計算，影響更為廣泛。
• 性能影響：頻繁的重排會導致頁面響應緩慢，用戶體驗下降。因此，減少不必要的重排是性能優化的關鍵。

實戰示例：優化策略與代碼演示

示例1：避免連續修改樣式屬性

問題場景：連續修改多個會影響布局的樣式屬性，如寬度和高度。

優化前代碼:

let element = document.getElementById('myElement');
element.style.width = '200px';
element.style.height = '100px';

優化后代碼:

let element = document.getElementById('myElement');
// 使用CSS class或一次性設置style，減少重排次數
element.classList.add('newSize'); // 在CSS中定義.newSize { width: 200px; height: 100px; }
// 或者
element.style.cssText = 'width: 200px; height: 100px;';

示例2：使用requestAnimationFrame控制動畫重繪

問題場景：直接使用setTimeout或setInterval進行動畫可能會導致不必要的重繪。

優化代碼:

function animate() {let element = document.getElementById('animatedElement');let position = 0;function step() {// 使用requestAnimationFrame進行動畫，瀏覽器會自動優化重繪時機requestAnimationFrame(() => {position += 5;element.style.left = position + 'px';if (position < 900) {step();}});}step();
}
animate();

示例3：離線DOM操作與批量修改

問題場景：直接在DOM上頻繁添加或刪除元素。

優化代碼:

let fragment = document.createDocumentFragment();
for(let i = 0; i < 1000; i++) {let item = document.createElement('div');item.textContent = 'Item ' + i;fragment.appendChild(item);
}document.getElementById('container').appendChild(fragment); // 一次性添加到DOM

安全性與性能優化小貼士

• 避免在布局臨界區（Layout Thrashing）：減少在JavaScript中讀取布局屬性（如offsetWidth）的次數，因為每次讀取都可能觸發重排。
• 使用will-change屬性：謹慎使用，僅對確實需要優化動畫性能的元素預聲明可能的變化，以允許瀏覽器提前優化。
• 考慮CSS動畫和過渡：相較于JavaScript動畫，CSS動畫通常由瀏覽器更高效地處理，減少重排和重繪的需求。

結語與討論

深入理解并有效管理重繪與重排，是前端性能優化的重要一環。通過上述實例，我們不僅學習了如何識別和避免性能瓶頸，還掌握了實用的優化策略。但前端領域的探索永無止境，歡迎大家分享更多實戰經驗和見解，共同推進前端技術的發展，讓我們的網頁更加流暢和高效。是否還有其他特定場景下的重排/重繪問題困擾著你？留言區期待你的提問與討論！

---

歡迎來到我的博客，很高興能夠在這里和您見面！希望您在這里可以感受到一份輕松愉快的氛圍，不僅可以獲得有趣的內容和知識，也可以暢所欲言、分享您的想法和見解。

---

推薦：DTcode7的博客首頁。
一個做過前端開發的產品經理，經歷過睿智產品的折磨導致脫發之后，勵志要翻身農奴把歌唱，一邊打入敵人內部一邊持續提升自己，為我們廣大開發同胞謀福祉，堅決抵制睿智產品折磨我們碼農兄弟！

---

【專欄導航】

• 《微信小程序相關博客》：結合微信官方原生框架、uniapp等小程序框架，記錄請求、封裝、tabbar、UI組件的學習記錄和使用技巧等
• 《Vue實戰相關博客》：詳細總結了常用UI庫elementUI的使用技巧以及Vue的學習之旅。
• 《HTML網站開發相關博客》：以實戰為線素，逐步深入HTML開發各個環節，掌握web前端常用性能體驗優化思路，打造完整前端工作流，提升工程化編碼能力和思維能力。
• 《前端基礎入門三大核心之html相關博客》：前端基礎入門三大核心之html板塊的內容，入坑前端或者輔助學習的必看知識。
• 《前端基礎入門三大核心之JS相關博客》：前端JS是JavaScript語言在網頁開發中的應用，負責實現交互效果和動態內容。它與HTML和CSS并稱前端三劍客，共同構建用戶界面。通過操作DOM元素、響應事件、發起網絡請求等，JS使頁面能夠響應用戶行為，實現數據動態展示和頁面流暢跳轉，是現代Web開發的核心。
• 《前端基礎入門三大核心之CSS相關博客》：介紹前端開發中遇到的CSS疑問和各種奇妙的CSS語法，同時收集精美的CSS效果代碼，用來豐富你的web網頁。
• 《canvas繪圖相關博客》：Canvas是HTML5中用于繪制圖形的元素，通過JavaScript及其提供的繪圖API，開發者可以在網頁上繪制出各種復雜的圖形、動畫和圖像效果。Canvas提供了高度的靈活性和控制力，使得前端繪圖技術更加豐富和多樣化。
• 《算法系列相關博客》：算法與數據結構學習總結，通過JS來編寫處理復雜有趣的算法問題，提升你的技術思維。
• 《python相關博客》：Python，簡潔易學的編程語言，強大到足以應對各種應用場景，是編程新手的理想選擇，也是專業人士的得力工具。
• 《sql數據庫相關博客》：SQL數據庫：高效管理數據的利器，學會SQL，輕松駕馭結構化數據，解鎖數據分析與挖掘的無限可能。
• 《IT信息技術相關博客》：作為信息化人員所需要掌握的底層技術，涉及軟件開發、網絡建設、系統維護等領域的知識。
• 《信息化技能面試寶典相關博客》：涉及信息化相關工作基礎知識和面試技巧，提升自我能力與面試通過率，擴展知識面。
• 《前端開發習慣與小技巧相關博客》：羅列常用的開發工具使用技巧,如 Vscode快捷鍵操作、Git、CMD、游覽器控制臺等
• 《AIGC相關博客》：AIGC、AI生產力工具的介紹，例如stable diffusion這種的AI繪畫工具安裝、使用、技巧等總結
• 《photoshop相關博客》：基礎的PS學習記錄，含括PPI與DPI、物理像素dp、邏輯像素dip、矢量圖和位圖以及幀動畫等的學習總結
• 《日常開發&辦公&生產【實用工具】分享相關博客》：分享介紹各種開發中、工作中、個人生產以及學習上的工具，豐富閱歷，給大家提供處理事情的更多角度，學習了解更多的便利工具，如Fiddler抓包、辦公快捷鍵、虛擬機VMware等工具。

---

吾輩才疏學淺，摹寫之作，恐有瑕疵。望諸君海涵賜教。望輕噴，嚶嚶嚶
非常期待和您一起在這個小小的網絡世界里共同探索、學習和成長。愿斯文對汝有所裨益，縱其簡陋未及淵博，亦足以略盡綿薄之力。倘若尚存闕漏，敬請不吝斧正，俾便精進！