Wie man die Repaints des Webbrowsers einfriert und gleichzeitig die Sichtbarkeit der Elemente ändert?

Ich bin bei weitem kein JS-Entwickler (eigentlich kaum Entwickler), aber ich wollte versuchen, ein kleines Greasemonkey-Skript zu schreiben, um einige Elemente auf einer bestimmten Webseite zu verstecken. Sobald ich damit angefangen habe, habe ich beschlossen, jQuery zu verwenden, nur um es einfacher zu machen. Alles lief gut, das Skript funktioniert, aber jetzt, wo es fertig ist, habe ich angefangen, mich über die Details zu wundern.Wie man die Repaints des Webbrowsers einfriert und gleichzeitig die Sichtbarkeit der Elemente ändert?

Als Teil des Skripts muss ich ein bestimmtes Element finden und es ausblenden, zusammen mit vorherigen und nächsten seiner Geschwister. Ich habe mit nicht lesbaren beendet, aber Arbeitsleitung:

$('div#some-weird-box').prev().toggle(w).next().toggle(w).next().toggle(w);

Mein Anliegen hier ist, dass ich drei separate divs in drei separaten Schritten bin zu entfernen. Dies würde dazu führen, dass der Browser die Seite dreimal neu erstellt, richtig? Es ist kein Problem mit drei Divs, es würde wahrscheinlich von Bedeutung sein, wenn es mehr Elemente gibt. Also, meine Frage ist - gibt es eine Möglichkeit, den Browser zu sagen "Stop Aktualisieren/Neuzeichnen der Seite"? Wenn ja, könnte ich das verwenden, eine beliebige Anzahl von Elementen verstecken und dann den Browser bitten, den Bildschirm zu aktualisieren.

Quelle

2009-08-31 yacoob

Die Ausführung von JavaScript sperrt den Browser und Sie sehen kein Repaint, bis die Codeausführung abgeschlossen ist. Du musst dir wirklich keine Sorgen machen.

posted ich ein gutes Beispiel dafür auf jsbin.com: http://jsbin.com/ecuku/edit

Update: Oft wird vorgeschlagen Knoten außerhalb des DOM zu ändern, da die DOM-Modifizierung Rückfluesse verursacht (nicht repaints). Reflows sind, wenn der Browser Positionen und Größen von Elementen auf Ihrer Seite neu berechnen muss, weil sich etwas geändert hat. Während Ihre JavaScript-Ausführung mehrere Reflow-Vorgänge verursachen kann, wird nur ein Repaint (wenn Ihr Code fertig ist) verursacht. Diese Rückläufe können ein großer Leistungshit sein, aber für kleine Zahlen von DOM-Änderungen (z. B. hat Ihr Code nur 3) ist es wahrscheinlich nicht die Mühe wert, Ihre Änderungen außerhalb der Seite vorzunehmen. Außerdem kann das Klonen eines Knotens und das Ändern außerhalb der Seite vor dem Zurücksetzen unerwartete Folgen haben. Wenn Sie beispielsweise Ereignishandler angehängt hätten, müssten sie erneut an die neuen Knoten angehängt werden.

Quelle

2009-08-31 13:43:07 Prestaul

Interessant. Gibt es eine gute Lektüre, auf die Sie mich hinweisen können? Wenn das der Fall ist, warum sehe ich all diese Ratschläge, um Elemente aus der Baumstruktur zu entfernen, Änderungen zu übernehmen und sie dann zurückzuholen? http://www.slideshare.net/nzakas/writing-efficient-javascript - Folie 77 oder 88 ...? – yacoob

Das ist eine ziemlich kühne pauschale Aussage, man kann nicht sagen, dass das in 100% der Fälle der Fall sein wird. –

Ich habe keine allgemeine Erklärung abgegeben. Ich habe eine Erklärung zu dem von ihm geposteten Code abgegeben. Er hat damit nichts zu befürchten. Er wird nur ein Repaint in jedem Browser sehen, und wenn er 3 Knoten ändert, sollte er den Knoten nicht klonen und ihn außerhalb der Seite modifizieren. – Prestaul

Sie können cloneNode verwenden. Nach dem Klonen können Sie alle Manipulationen über den Klon durchführen und dann den ursprünglichen Knoten ersetzen . Dies verhindert, dass Ihr Inhalt bei der Anzeige blinkt: Keine wie J-P vorgeschlagen.

Quelle

2009-08-31 13:31:17

cloneNode ist nie eine gute Idee, wenn Sie mit dem DOM manipulieren müssen. Alle Referenzen auf den alten Knoten werden nicht auf den geklonten Knoten aktualisiert, und alle eventHandler auf dem ursprünglichen Knoten gehen verloren. – Flexo

Wie man die Repaints des Webbrowsers einfriert und gleichzeitig die Sichtbarkeit der Elemente ändert?

Antwort

Verwandte Themen