Google DevTool Zeitleiste: Erzwungener Reflow ist wahrscheinlich ein Leistungsengpass
Ich habe meiner Seite den Parallax-Effekt hinzugefügt. Und jetzt habe ich Probleme mit der Leistung und FPS und viele Fragen: -)
Ich benutze transform3d und requestAnimationFrame um es zu realisieren (wie dies empfohlen wurde Ссылка ) .
Mein Code sieht so aus:
%Vor%Manchmal habe ich Warnungen wie auf dem Screenshot:
Erzwungener Reflow ist wahrscheinlich ein Leistungsengpass
Aufruf-Stack zeigt auf latestKnownScrollY = window.scrollY .
Aber warum erscheint diese Warnung nur gelegentlich? Ich verwende window.scrollY jedes Scroll-Ereignis.
1 Antwort
Jedes Mal, wenn Sie window.scrollY lesen, verursachen Sie einen Reflow. Es bedeutet nur, dass der Browser die Stile und das Layout berechnet, um Ihnen den Wert zu geben.
Es sagt, es ist wahrscheinlich ein Leistungsproblem, weil es Zeit braucht und synchron ist. Wenn Sie lesen, setzen, lesen, setzen, lesen, Eigenschaften setzen, oder wenn Sie so etwas in einer Schleife haben, entsteht ein Engpass, bis die gesamte Seite neu gezeichnet werden kann, wenn Sie den Reflow ausgelöst haben. Die Lösung liest in der Regel zuerst alles ein, was Sie brauchen, und stellt dann alles ein, was Sie ändern müssen.
Aber in Ihrem Fall sollte es kein Problem sein. Es sagt, es dauert nur .2 ms und es tut es nur einmal. Fällt Ihnen ein Leistungsproblem auf? Wie eine Verzögerung beim Scrollen?
Tags und Links javascript css google-chrome google-chrome-devtools