Wie stark wird die Leistung durch den Unterschied zwischen Reflow und Redraw beeinflusst?-HTML-Tutorial-php.cn

Wie stark wird die Leistung durch den Unterschied zwischen Reflow und Redraw beeinflusst?

王林

Freigeben： 2024-01-26 10:04:08

Original

1005 Leute haben es durchsucht

Wie stark wird die Leistung durch den Unterschied zwischen Reflow und Redraw beeinflusst?

Die Auswirkungen des Unterschieds zwischen Reflow und Redraw auf die Leistung erfordern spezifische Codebeispiele.

Bei der Frontend-Entwicklung stoßen wir häufig auf Situationen, in denen wir die Seite ändern müssen, z. B. den Stil, die Größe oder die Position von Elementen , usw. Diese Änderungen sind jedoch nicht kostenlos. Sie lösen Browser-Reflow- und Neuzeichnungsvorgänge aus, was sich auf die Leistung der Seite auswirkt.

Reflow und Repaint sind zwei verschiedene Vorgänge, die der Browser beim Ändern der Seite ausführt. Reflow bedeutet, dass der Browser bei einer Änderung des Seitenlayouts oder der geometrischen Eigenschaften die Position und Größe der Elemente neu berechnen, dann das Seitenlayout aktualisieren und neu zeichnen muss. Neuzeichnen bedeutet, dass der Browser bei einer Änderung des Seitenstils nur den Stil des Elements neu zeichnen muss, ohne das Layout neu zu gestalten.

Da beim Reflow das Seitenlayout neu berechnet wird, ist es viel teurer als das Neuzeichnen. Der Reflow-Vorgang führt dazu, dass die Seite neu gestaltet und neu gezeichnet wird, während das Neuzeichnen nur dazu führt, dass die Seite neu gezeichnet wird. Daher sollten wir versuchen, häufige Reflows zu vermeiden, um die Seitenleistung zu verbessern.

Sehen wir uns einige Codebeispiele im Detail an, um die Auswirkungen des Unterschieds zwischen Reflow und Redraw auf die Leistung zu zeigen.

Zuerst erstellen wir eine einfache Seite, die eine Schaltfläche und ein div-Element enthält:

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="moveBox()">移动盒子</button>

    <script>
        function moveBox() {
            var box = document.querySelector('.box');
            box.style.left = '200px';
        }
    </script>
</body>
</html>

Nach dem Login kopieren

Dieser Code verschiebt das div-Element um 200 Pixel nach rechts, nachdem auf die Schaltfläche geklickt wurde. Da wir jedoch den Stil des Elements direkt ändern, führt dies dazu, dass der Browser einen Reflow-Vorgang durchführt.

Als nächstes verbessern wir den Code, um einen Reflow zu vermeiden:

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: left 0.3s ease-out;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="moveBox()">移动盒子</button>

    <script>
        function moveBox() {
            var box = document.querySelector('.box');
            box.classList.add('move');
        }
    </script>
</body>
</html>

Nach dem Login kopieren

In diesem Beispiel verwenden wir den CSS-Übergangseffekt, um eine reibungslose Bewegung der Box zu erreichen. Durch das Hinzufügen eines Klassennamens (Verschieben) müssen wir nur den Stil des Elements ändern, ohne einen Reflow-Vorgang auszulösen. Dadurch werden die Rechenkosten des Browsers reduziert und die Seitenleistung verbessert.

Der Unterschied zwischen Reflow und Redraw hat offensichtliche Auswirkungen auf die Leistung. Häufige Reflow-Vorgänge führen dazu, dass Seitenlayout und Zeichnung ständig wiederholt werden, was zu Leistungseinbußen führt. Daher sollten wir in der tatsächlichen Entwicklung versuchen, häufige Reflows zu vermeiden und die Leistung der Seite zu optimieren, indem wir CSS rational verwenden und eine direkte Manipulation des Stils oder der geometrischen Eigenschaften von Elementen vermeiden.

Zusammenfassend lässt sich sagen, dass Reflow und Neuzeichnen zwei verschiedene Vorgänge sind, die der Browser ausführt, wenn sich Seitenelemente ändern. Reflow ist teurer als Neuzeichnen, da dabei das Seitenlayout neu berechnet werden muss. Wir sollten versuchen, das Auftreten von Reflows zu minimieren und die Seitenleistung zu optimieren, indem wir CSS rational einsetzen und eine direkte Manipulation des Stils oder der geometrischen Eigenschaften von Elementen vermeiden.

Das obige ist der detaillierte Inhalt vonWie stark wird die Leistung durch den Unterschied zwischen Reflow und Redraw beeinflusst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!