Woran erkenne ich, dass der Browser die Aktualisierung von DOM-Layern / -Knoten beendet, weil sie verdeckt sind?
Identifizierung: Ich suche nach allen möglichen Lösungen, um zu erkennen, wann der FPS-Abfall oder die Wiederholungen / Rückflüsse in einem Browser aufhören, weil der Browser die Leistung optimiert, weil ein Bereich des Dokuments nicht sichtbar ist.
Überwachung: Bisher berücksichtigen die meisten nativen HTML / JS-Lösungen, die ich recherchiert habe, nicht den Teil des DOM, der von anderen Teilen der Seite verdeckt wurde, oder das DOM, das sich unterhalb der Falte befindet. Während Inhalte manchmal direkt in das übergeordnete Dokument eingebettet werden, befinden sie sich manchmal in einem Frame oder Iframe.
Testergebnisse: mozPaintCount ist eine genaue Darstellung der Dom-Reflows für ein Fenster und reagiert korrekt, wenn ein Fenster oder ein Dokument in einem Frame verdeckt ist. Es scheint auch, dass Firefox Teile des Doms korrekt identifiziert und nicht neu zeichnet, wenn sie verdeckt sind. Dies kann durch das Firefox-Inspector-Tool visuell überprüft werden, wenn etwas nicht im Blick ist. Der Inspector berücksichtigt jedoch möglicherweise nicht die Ansichtshierarchie beim Zeichnen die Highlights auf den neu gestrichenen Regionen. Ein großes Lob an Sie, Mozilla!
Referenz:mozPaintCount
Flash zeigt auch eine Verlangsamung der FPS, wenn es nicht auf dem Bildschirm ist und die neueste istFlash Player 11.2 hat ein spezielles Ereignis, das ausgelöst wird, wenn es aus Optimierungsgründen vom Browser gedrosselt wurde. Flash ist auch keine vertrauenswürdige Lösung, da es in einer Reihe von Browsern standardmäßig deaktiviert ist.
Referenz:Flash Player 11.2 Drosselereignisse
Die aktuelle Browserimplementierung des Ereignisses zur Änderung der Seitensichtbarkeit kann gesendet werden, wenn das Fenster in eine andere Registerkarte geändert wurde oder inaktiv wird, berücksichtigt jedoch nicht die Bildlaufposition für Elemente / Fenster / Dokumente unterhalb der Falte oder durch andere verdeckt dom. Im zweiten Entwurf dieser Spezifikation wurde jedoch vorgeschlagen, dass der Browser das Ansichtsfenster und die DOM-Hierarchie berücksichtigt, um genauere Ergebnisse zu erzielen.
Verweise:Sichtbarkeit der Empfehlungsseite, 2011 undEntwurf der Seitensichtbarkeit 2, 2013
CSS-Übergänge scheinen nicht optimiert zu sein, wenn ihre Elemente verdeckt sind, und können daher nicht korrekt gemessen werden. Ich habe eine Reihe von verschiedenen Eigenschaften ausprobiert, die zu Rückflüssen führen (Höhe, Breite, Kastenschatten usw.), und konnte daraus keine aussagekräftige Kennzahl gewinnen.
requestAnimationFrame wird angezeigt, um Animationen nur zu drosseln, wenn die Registerkarte geändert wird und das Browserfenster unscharf wird, der Inhalt unterhalb der Falte jedoch nicht verarbeitet wird. Da raf nur auf Fensterebene angehängt wird, kann es nicht an bestimmte dom-Knoten gebunden werden (was in seiner Implementierung kurzsichtig zu sein scheint).
Referenz:requestAnimationFrame
Ich habe das Testen von WebGL noch nicht abgeschlossen, dies wird jedoch auf eine kleine Anzahl moderner Browser beschränkt sein (ein akzeptables Ergebnis bei Flash-Lösungen für ältere Browser).
Ich habe das Testen von Canvas noch nicht abgeschlossen, aber dies könnte eine gute Lösung sein, da es von einer größeren Anzahl von Browsern als WebGL unterstützt wird.
Ich habe noch nicht einmal darüber nachgedacht, was eingebettete Objekte bieten könnten.
Ich habe nicht in ActiveX-Steuerelemente nachgesehen, um festzustellen, ob dort etwas vorhanden ist, das möglicherweise hilfreich ist.
Ich habe mir kein HTML5-Video angesehen.
Animierte GIFs scheinen nur in Firefox optimiert zu sein. Nochmals ein dickes Lob, Mozilla!
Das Geheimnis und die Magie, wie jeder Browser-Anbieter das Rendern von Seiten optimiert, hemmen meinen Fortschritt also weiterhin. Die Position eines Elements allein kann jedoch nicht als Indikator dafür herangezogen werden, ob ein Element tatsächlich sichtbar ist oder nicht, da die Seite möglicherweise andere Ebenen aufweist, die den gerahmten Inhalt verdecken, oder der Inhalt so angezeigt werden kann, dass keine aussagekräftige sichtbare Darstellung möglich ist ( B. die 3D-Drehung von Inhalten so ändern, dass sie nicht mehr sichtbar sind.)
Jedes Brainstorming darüber, wie die Browser den angezeigten Inhalt tatsächlich optimieren, oder zusätzliche Anweisungen oder tatsächliche Antworten auf diese Frage sind willkommen.
Ähnlich,Hier ist eine ältere SO-Frage das umfasst teilweise auch diese Frage.