介紹下重繪和迴流（Repaint & Reflow），以及如何進行優化

時間 2020-01-20

標籤介紹迴流 repaint reflow 以及如何進行優化简体版

原文原文鏈接

題目描述：

介紹下重繪和迴流（Repaint & Reflow），以及如何進行優化javascript

知識點：Repaint & Reflowcss

解題：

思路一：

1. 瀏覽器渲染機制html

瀏覽器採用流式佈局模型（Flow Based Layout）
瀏覽器會把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合併就產生了渲染樹（Render Tree）。
有了RenderTree，咱們就知道了全部節點的樣式，而後計算他們在頁面上的大小和位置，最後把節點繪製到頁面上。
因爲瀏覽器使用流式佈局，對Render Tree的計算一般只須要遍歷一次就能夠完成，但table及其內部元素除外，他們可能須要屢次計算，一般要花3倍於同等元素的時間，這也是爲何要避免使用table佈局的緣由之一。

2. 重繪前端

因爲節點的幾何屬性發生改變或者因爲樣式發生改變而不會影響佈局的，稱爲重繪，例如outline, visibility, color、background-color等，重繪的代價是高昂的，由於瀏覽器必須驗證DOM樹上其餘節點元素的可見性。java

3. 迴流css3

迴流是佈局或者幾何屬性須要改變就稱爲迴流。迴流是影響瀏覽器性能的關鍵因素，由於其變化涉及到部分頁面（或是整個頁面）的佈局更新。一個元素的迴流可能會致使了其全部子元素以及DOM中緊隨其後的節點、祖先節點元素的隨後的迴流。瀏覽器

<body>
<div class="error">
    <h4>個人組件</h4>
    <p><strong>錯誤：</strong>錯誤的描述…</p>
    <h5>錯誤糾正</h5>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
</div>
</body>複製代碼

在上面的HTML片斷中，對該段落(緩存

標籤)迴流將會引起強烈的迴流，由於它是一個子節點。這也致使了祖先的迴流（div.error和body – 視瀏覽器而定）。此外，ide

和

迴流一定會發生重繪，重繪不必定會引起迴流。佈局

4. 瀏覽器優化現代瀏覽器大多都是經過隊列機制來批量更新佈局，瀏覽器會把修改操做放在隊列中，至少一個瀏覽器刷新（即16.6ms）纔會清空隊列，但當你獲取佈局信息的時候，隊列中可能有會影響這些屬性或方法返回值的操做，即便沒有，瀏覽器也會強制清空隊列，觸發迴流與重繪來確保返回正確的值。

主要包括如下屬性或方法：

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
width、height
getComputedStyle()
getBoundingClientRect()

因此，咱們應該避免頻繁的使用上述的屬性，他們都會強制渲染刷新隊列。5. 減小重繪與迴流

1.CSS

使用 transform 替代 top
使用 visibility 替換 display: none ，由於前者只會引發重繪，後者會引起迴流（改變了佈局)
避免使用table佈局，可能很小的一個小改動會形成整個 table 的從新佈局。
儘量在DOM樹的最末端改變class，迴流是不可避免的，但能夠減小其影響。儘量在DOM樹的最末端改變class，能夠限制了迴流的範圍，使其影響儘量少的節點。
避免設置多層內聯樣式，CSS 選擇符從右往左匹配查找，避免節點層級過多。

<div>
  <a> <span></span> </a>
</div>
<style>
  span {
    color: red;
  }
  div > a > span {
    color: red;
  }
</style>複製代碼

對於第一種設置樣式的方式來講，瀏覽器只須要找到頁面中全部的 span 標籤而後設置顏色，可是對於第二種設置樣式的方式來講，瀏覽器首先須要找到全部的 span 標籤，而後找到 span 標籤上的 a 標籤，最後再去找到 div 標籤，而後給符合這種條件的 span 標籤設置顏色，這樣的遞歸過程就很複雜。因此咱們應該儘量的避免寫過於具體的 CSS 選擇器，而後對於 HTML 來講也儘可能少的添加無心義標籤，保證層級扁平。

將動畫效果應用到position屬性爲absolute或fixed的元素上，避免影響其餘元素的佈局，這樣只是一個重繪，而不是迴流，同時，控制動畫速度能夠選擇 requestAnimationFrame，詳見探討 requestAnimationFrame。
避免使用CSS表達式，可能會引起迴流。
將頻繁重繪或者回流的節點設置爲圖層，圖層可以阻止該節點的渲染行爲影響別的節點，例如will-change、video、iframe等標籤，瀏覽器會自動將該節點變爲圖層。
CSS3 硬件加速（GPU加速），使用css3硬件加速，可讓transform、opacity、filters這些動畫不會引發迴流重繪。可是對於動畫的其它屬性，好比background-color這些，仍是會引發迴流重繪的，不過它仍是能夠提高這些動畫的性能。

2.JavaScript