Wann findet Reflow in einer DOM-Umgebung statt?

Question

Welche Arten von Aktivitäten werden Reflow der Webseite mit DOM auslösen?

Es scheint, dass es verschiedene Sichtweisen gibt. Laut http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ passiert es

• Wenn Sie einen DOM-Knoten hinzufügen oder entfernen.
• Wenn Sie einen Stil dynamisch anwenden (z. B. element.style.width = "10px").
• Wenn Sie eine Messung abrufen, die berechnet werden muss, z. B. Zugriff auf offsetWidth, clientHeight oder einen berechneten CSS-Wert (über getComputedStyle() in DOM-kompatiblen Browsern oder currentStyle in IE).

jedoch gemäß http://dev.opera.com/articles/view/efficient-javascript/?page=3 triggert Messung nur unter Reflow wenn bereits Reflow-Aktion in der Warteschlange gestellt.

Hat jemand noch mehr Ideen?

Answer 1

Beide Artikel sind korrekt. Man kann mit Sicherheit davon ausgehen, dass immer, wenn Sie etwas tun, das vernünftigerweise die Dimensionen von Elementen im DOM erfordert, berechnet wird, dass Sie den Reflow auslösen.

Darüber hinaus, so weit ich sagen kann, sagen beide Artikel das gleiche.

Der erste Artikel sagt Reflow passiert, wenn:

Wenn Sie eine Messung abzurufen, die, wie Zugriff auf offset, client oder über berechnete CSS-Wert (über getComputedStyle berechnet werden muss() in DOM-kompatiblen Browsern oder currentStyle in IE), während DOM-Änderungen in die Warteschlange gestellt werden.

Der zweite Artikel heißt es:

Wie bereits erwähnt, kann der Browser für Sie mehr Änderungen Cache und Reflow nur einmal, wenn diese Änderungen alle werden. Beachten Sie jedoch, dass Messungen des Elements es zwingen, zu reflow, damit die Messungen korrekt sind. Die Änderungen können oder werden nicht sichtbar überstrichen, aber der Reflow selbst muss immer noch hinter den Kulissen geschehen.

Dieser Effekt wird erzeugt, wenn Messungen durchgeführt werden unter Verwendung von Eigenschaften wie offset oder unter Verwendung von Methoden wie getComputedStyle. Auch wenn die Nummern nicht verwendet werden, genügt es, wenn Sie nur eine der beiden verwenden, während sich der Browser noch im Cache befindet, um den versteckten Reflow auszulösen. Wenn diese Messungen wiederholt durchgeführt werden, sollten Sie in Betracht ziehen, sie nur einmal zu nehmen und das Ergebnis zu speichern, das später verwendet werden kann.

Ich nehme an, dass sie dasselbe bedeuten, was sie früher sagten.Opera wird sich bemühen, Werte zu cachen und Reflow für Sie zu vermeiden, aber Sie sollten sich nicht auf seine Fähigkeit verlassen, dies zu tun.

Für alle Absichten und Zwecke glauben Sie einfach, was sie beide sagen, wenn sie sagen, dass alle drei Arten von Wechselwirkungen Reflow verursachen können.

Prost.

Answer 2

document.body.style.display = 'none'; 
document.body.style.display = 'block'; 

Dies löst oft diese unverständlichen Layout Bugs.

Answer 3

Sehen Sie sich den Abschnitt "Durch Eigenschaft getriggerter Lesezugriff ausgelöst" von Understanding Internet Explorer Rendering Behaviour an, wobei der folgende Code im IE eine Rendering-Aktivität verursacht.

function askforHeight() { 
    $("#lower").height(); 
}