Chrome repaints div on scroll unterschiedlich auf Low-und High-DPI-Displays
Ich arbeite daran, die Scroll-Leistung in meiner Web-App zu optimieren, und stieß auf ein interessantes Verhalten im neuesten Chrome (v31), das auch auf Chrome Canary (v34) reprosiert.
In diesem vereinfachten Beispiel habe ich ein einfaches scrollbares div:
%Vor%Ich habe die folgenden Chrome-Entwicklungseinstellungen aktiviert, um die Scroll-Funktion zu untersuchen:
- "Paint Rechtecke anzeigen" (gekennzeichnet durch rote rechteckige Umrisse)
- "Zeigen Sie mögliche Scroll-Engpässe auf"
Wenn ich die Webseite auf eine Nicht-Retina-Anzeige lade, repaintet sie das gesamte Container-Div auf jeder Schriftrolle und Chrome zeigt dies sogar an:
Aber wenn ich das Fenster auf meine Retina-Anzeige verschiebe und die Seite aktualisiere, verbessert sich die Scroll-Perfusion! Es repaint nur die Bildlaufleiste selbst (und manchmal auch Inhalte, die zuvor nicht im Bildlauffenster waren):
Das Verhalten mit hoher DPI scheint vorzuziehen, und das Scrollen ist schneller. Gibt es eine Möglichkeit, diese Leistung in Chrome unabhängig von DPI zu erreichen?
2 Antworten
Ich habe keinen Retina-Display-Computer, um dies zu testen. Ich schätze, Sie können den "translateZ Hack" auf .container ausprobieren?
%Vor%Nicht sicher, ob das funktioniert oder nicht. In bestimmten Situationen hilft es jedoch, das Neuzeichnen des Browsers zu bereinigen, indem das Element in seine eigene "Ebene" unterteilt wird.
Hoffe, das hilft!
Ich fand eine Erklärung dafür in einem Blogbeitrag des Postboteteams. Sie verwenden dieselbe Lösung, die oben aufgeführt ist, erklären aber, warum sie passiert. Versuchen Sie das unten stehende Snippet, um es für Sie zu reparieren.
%Vor%Tags und Links html css scroll dom google-chrome