js-Lösung, um zu verhindern, dass das DIV-Layout beim Scrollen blinkt_Javascript-Kenntnisse

Das Beispiel in diesem Artikel beschreibt die js-Methode, um zu verhindern, dass das DIV-Layout beim Scrollen flackert, und ich möchte es Ihnen als Referenz zur Verfügung stellen. Die spezifische Methode ist wie folgt:

Zu den Dingen, mit denen ich in letzter Zeit in Bezug auf die Seitenleistung konfrontiert wurde, gehören viele subtile und originelle Inhalte, wie zum Beispiel das Browser-Rendering. Es gibt viele Informationen, daher habe ich einige für Auszüge und Memos ausgewählt.
Wenn JavaScript das DOM mehrmals schreibt und liest, kommt es zu „Layout-Thrashing“, was zu einem Dokument-Reflow führt (Reflow – der Prozess der Erstellung eines Render-Baums

).

Code kopieren Der Code lautet wie folgt:

aus einem DOM-Baum1).
// Lesen
var h1 = element1.clientHeight;
// Schreiben (Layout ungültig)
element1.style.height = (h1 * 2) 'px';
// Lesen (Trigger-Layout)
var h2 = element2.clientHeight;
// Schreiben (Layout ungültig)
element2.style.height = (h2 * 2) 'px';
// Lesen (Trigger-Layout)
var h3 = element3.clientHeight;
// Schreiben (Layout ungültig)
element3.style.height = (h3 * 2) 'px';

Wenn das DOM geschrieben wird, ist das Layout ungültig und muss zu einem bestimmten Zeitpunkt neu angeordnet werden. Aber der Browser ist sehr faul, er möchte bis zum Ende des aktuellen Vorgangs (oder Frames) warten, bevor er neu fließt.
Wenn wir jedoch den geometrischen Wert vor dem Ende des aktuellen Vorgangs (oder Frames) aus dem DOM lesen, zwingen wir den Browser, das Layout im Voraus neu anzuordnen. Dies ist das sogenannte „erzwungene synchrone Layout“. Es tötet die Leistung.
Bei einem modernen Desktop-Browser sind die Nebenwirkungen des Layout-Thrashings vielleicht nicht offensichtlich, aber auf Low-End-Mobilgeräten ist das Problem ernst.

Schnelle Lösung

In einer idealen Welt können wir DOM stapelweise lesen und schreiben, indem wir einfach die Reihenfolge der Codeausführung ändern. Das bedeutet, dass das Dokument nur einmal umgebrochen werden muss.

Code kopieren Der Code lautet wie folgt:

// Lesen
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// Schreiben (Layout ungültig)
element1.style.height = (h1 * 2) 'px';
element2.style.height = (h2 * 2) 'px';
element3.style.height = (h3 * 2) 'px';
// Dokument fließt am Ende des Frames neu

Was ist mit der realen Welt?

In Wirklichkeit ist es nicht so einfach. In großen Programmen ist der Code überall verteilt und dieses gefährliche DOM existiert überall. Wir können (und sollten es natürlich auch nicht) unseren schönen, entkoppelten Code nicht einfach zusammenmischen, nur um die Ausführungsreihenfolge zu steuern. Wie führen wir also Batch-Lese- und Schreibvorgänge durch, um die Leistung zu optimieren?

Meet requestAnimationFrame

window.requestAnimationFrame plant eine Funktion, die im nächsten Frame ausgeführt werden soll, ähnlich wie setTimout(fn, 0). Dies ist sehr nützlich, da wir damit die gemeinsame Ausführung aller DOM-Schreibvorgänge im nächsten Frame und die synchrone Ausführung der DOM-Lesevorgänge in der aktuellen Reihenfolge planen können.

Code kopieren Der Code lautet wie folgt:

// Lesen
var h1 = element1.clientHeight;
// schreibe
requestAnimationFrame(function() {
element1.style.height = (h1 * 2) 'px';
});
// Lesen
var h2 = element2.clientHeight;
// schreibe
requestAnimationFrame(function() {
element2.style.height = (h2 * 2) 'px';
});
……

Ich hoffe, dass dieser Artikel für alle bei der Webprogrammierung auf Basis von JavaScript hilfreich sein wird.