Heim > Artikel > Web-Frontend > Vergleich des Leistungsverbrauchs: Welches verbraucht mehr Ressourcen, Reflow oder Redraw?

Vergleich des Leistungsverbrauchs: Welches verbraucht mehr Ressourcen, Reflow oder Redraw?

WBOYOriginal: 2024-01-26 09:31:051111Durchsuche

Reflow vs. Redraw: Welches verbraucht mehr Leistung?

In der Frontend-Entwicklung ist die Leistungsoptimierung ein wichtiges Thema. Einer der Leistungsengpässe sind die Reflow- und Repaint-Vorgänge des Browsers. In diesem Artikel untersuchen wir die Definitionen von Reflow und Redraw und vergleichen ihre Leistungseinbußen anhand konkreter Codebeispiele.

Reflow bezieht sich auf den Prozess, bei dem der Browser die Position und geometrischen Eigenschaften von Seitenelementen neu berechnet. Wenn sich das Layout oder die Stilattribute ändern, muss der Browser die Position und Größe des Elements neu berechnen. Dieser Vorgang wird als Reflow bezeichnet. Reflow führt dazu, dass der gesamte Rendering-Baum neu erstellt wird, was sehr leistungsintensiv ist.

Neuzeichnen bezieht sich auf den Prozess, bei dem der Browser Elemente basierend auf den neuesten Stilberechnungen neu zeichnet, ohne das Layout zu beeinträchtigen. Das Neuzeichnen führt nicht zu Änderungen am Layout, sondern wirkt sich nur auf den Stil des Elements aus. Der Neuzeichnungsprozess erfordert jedoch immer noch das Durchlaufen und Neuzeichnen der Elemente, sodass auch ein gewisser Leistungsverlust auftritt.

Um den Leistungsunterschied zwischen Reflow und Redraw besser zu verstehen, testen wir ihn mit dem folgenden Codebeispiel. Angenommen, wir haben eine Seite mit 1000 div-Elementen. Jedes div hat einen Stil mit dem Klassennamen „box“.

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <!-- 1000个div -->
  </div>

  <script>
    // 创建1000个div元素
    for (let i = 0; i < 1000; i++) {
      const div = document.createElement('div');
      div.classList.add('box');
      document.getElementById('container').appendChild(div);
    }

    // 添加一个scroll事件监听器
    window.addEventListener('scroll', function() {
      // 修改样式属性
      document.getElementById('container').style.backgroundColor = 'blue';
    });
  </script>
</body>
</html>

Im obigen Code haben wir 1000 div-Elemente mit der Klasse „box“ erstellt und einen Scroll-Ereignis-Listener hinzugefügt. Während die Seite scrollt, ändern wir die Hintergrundfarbe des Containers, der diese div-Elemente enthält.

Beobachten wir den Leistungsverlust beim Reflow und Neuzeichnen durch die Entwicklertools des Browsers.

Zuerst klicken wir auf die Bildlaufleiste auf der Seite, um zu scrollen. Bei jedem Scroll-Ereignis muss der Browser einen Reflow-Vorgang durchführen, um die Position und das Layout der Elemente neu zu berechnen. Über das Renderer-Tool des Browsers können wir sehen, wie lange der Reflow-Vorgang dauert.

Als nächstes klicken wir weiterhin auf die Bildlaufleiste, um zu scrollen, und führen zu diesem Zeitpunkt nur Neuzeichnungsvorgänge durch. Über das Renderer-Tool des Browsers können wir sehen, wie lange der Neuzeichnungsvorgang dauert.

Nach dem Test können wir feststellen, dass der Reflow-Vorgang leistungsintensiver ist als der Redraw-Vorgang. Denn der Reflow-Vorgang erfordert eine Neuberechnung der Position und des Layouts des Elements, während der Neuzeichnungsvorgang nur eine Neuzeichnung des Stils des Elements erfordert.

Im eigentlichen Entwicklungsprozess sollten wir versuchen, häufige Reflow-Vorgänge zu vermeiden, da dies zu Leistungseinbußen führt. Eine Optimierungsmethode besteht darin, das Transformationsattribut von CSS zu verwenden, um die Änderung des Stilattributs zu ersetzen, wodurch die Häufigkeit des Reflows verringert werden kann.

Zusammenfassend lässt sich sagen, dass Reflow und Redraw zwei wichtige Konzepte im Browser-Rendering-Prozess sind. Reflow ist leistungsintensiver als Neuzeichnen, da Reflow eine Neuberechnung der Position und des Layouts von Elementen erfordert. In der tatsächlichen Entwicklung sollten wir versuchen, die Häufigkeit von Reflows zu reduzieren, um die Seitenleistung zu verbessern.

Das obige ist der detaillierte Inhalt vonVergleich des Leistungsverbrauchs: Welches verbraucht mehr Ressourcen, Reflow oder Redraw?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css class 事件 transform 性能优化

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Optimieren Sie die Seitenleistung: Lösen Sie Probleme beim langsamen Laden von Seiten, die durch Neuzeichnen und Umfließen verursacht werdenNächster Artikel：Optimieren Sie die Seitenleistung: Lösen Sie Probleme beim langsamen Laden von Seiten, die durch Neuzeichnen und Umfließen verursacht werden

In Verbindung stehende Artikel

Mehr sehen