Für ein Projekt von mir (siehe BigPictu.re oder bigpicture.js GitHub-Projekt ) muss ich mich möglicherweise mit einem sehr, sehr, sehr großen <div>Container befassen .
Ich wusste, dass bei dem einfachen Ansatz, den ich verwende, das Risiko einer schlechten Leistung besteht, aber ich hatte nicht erwartet, dass er hauptsächlich mit ... nur Chrome vorhanden ist!
Wenn Sie diese kleine Seite testen (siehe Code unten), lautet das Schwenken (Klicken + Ziehen) wie folgt:
- Normal / glatt bei Firefox
- Normal / glatt auch im Internet Explorer
- Sehr langsam (fast abstürzend) auf Chrome!
Natürlich könnte ich (in meinem Projekt) Code hinzufügen, um dies zu tun. Wenn Sie viel hineingezoomt haben, wird Text mit möglicherweise sehr großer Schriftgröße ausgeblendet. Aber warum gehen Firefox und Internet Explorer richtig damit um und nicht mit Chrome?
Gibt es in JavaScript, HTML oder CSS eine Möglichkeit, den Browser anzuweisen, nicht zu versuchen , die gesamte Seite (die hier 10000 Pixel breit ist) für jede Aktion zu rendern? (Nur das aktuelle Ansichtsfenster rendern!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body {
overflow: hidden;
min-height: 100%; }
#container {
position: absolute;
min-height: 100%;
min-width: 100%; }
.text {
font-family: "Arial";
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
<div class="text" style="font-size: 600000px; left:10000px; top:10000px">Very big text</div>
</div>
<script>
var container = document.getElementById('container'), dragging = false, previousmouse;
container.x = 0; container.y = 0;
window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }
window.onmouseup = function() { dragging = false; }
window.ondragstart = function(e) { e.preventDefault(); }
window.onmousemove = function(e) {
if (dragging) {
container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
container.style.left = container.x + 'px'; container.style.top = container.y + 'px';
previousmouse = {x: e.pageX, y: e.pageY};
}
}
</script>
</body>
</html>
quelle
Antworten:
Der Wechsel zu
position: fixedscheint die Dinge zu beschleunigen.quelle
fixedDas Layout ist offensichtlich weniger komplex und sie können möglicherweise mehr Optimierungen vornehmen. Aber ich habe mir den Quellcode der Rendering-Engine nicht angesehen, wenn du das meinstVerwenden Sie
transformanstelle vontop/left:Eine Live-Demo bei jsFiddle .
quelle
fixeddas Element aus dem Textfluss entfernt wird, sparen Sie viel Rendering. In der Dokumentation vontransformMDN heißt es: "... wird ein Stapelkontext erstellt. In diesem Fall fungiert das Objekt als enthaltender Block für position: feste Elemente, die es enthält."<div style="position:relative;min-height: 900px;">Your's divs</div>jsFiddle auchposition:relativeist also wahrscheinlich auf die Antwort von geert3 zurückzuführenDurch die Kombination von Teemu- und geert3-Antworten - mithilfe von Transformation und Position: Fixed - funktioniert Chrome auch bei großen Schriftarten viel schneller.
Maximale Schriftgröße: http://jsfiddle.net/74w7yL0a/
quelle
font-sizeund dies könnte der Grund für die Nicht-Langsamkeit von FF sein. Aber dann hätte es auch im IE sehr langsam sein sollen, aber es ist nicht ... seltsam!Zusätzlich zu Teemus Antwort auf die Verwendung von translate:
Welche Sie auch andere Herstellerpräfixe verwenden sollten, können Sie einfach beheben, indem Sie dies auf dem Körper verwenden:
und das auf html:
Dadurch wird jedoch das Scrollen deaktiviert. Ich würde also
mousedowndem Body ein Ereignis hinzufügen und diese Stile mit einer CSS-Klasse anwenden, wenn siemousedownausgelöst wird, und diese Klasse entfernenmouseup.quelle
style.transformoder mit zu verwendentransform?). Danke übrigens für deine Antwort @Prisoner!@Teemus 'Antwort macht fast alles.
Verwenden Sie
transformmittranslate3danstelle vontop/left.translate3daktiviert die Hardwarebeschleunigung.Eine Live-Demo bei jsFiddle .
quelle
Ich habe dies analysiert und festgestellt, dass das ursprüngliche Problem mit der Chrome-Anzeigearchitektur und der Verwendung von Hintergrundthreads zum Rendern der Seite zusammenhängt.
Wenn Sie schnell rendern möchten, gehen Sie zu chrome: flags, scrollen Sie zur Einstellung Impl-side paint und setzen Sie "Disabled". Starten Sie dann den Browser neu - die Mausbewegung wird reibungslos ausgeführt.
Wenn Sie den FPS-Zähler aktivieren, ist der gemeldete FPS-Wert in diesem Szenario immer noch sehr hoch, obwohl die tatsächliche Bildschirmleistung sehr niedrig ist. Meine vorläufige Erklärung (kein Experte für Chrome-Anzeigearchitektur) lautet: Wenn sich der UI-Thread und die Anzeige in separaten Threads befinden, kann es beim Rendern des Div zu Konflikten kommen - in dem Fall, in dem sich der UI-Thread und der Rendering-Thread auf dem befinden Im selben Thread kann der UI-Thread keine Nachrichten schneller senden, als der UI-Thread rendern kann.
Ich würde vorschlagen, dass dies als Chrome-Fehler abgelegt wird.
quelle
Verwenden Sie
display: tableundtable-layout:fixedauf dem div oder eine Tabelle, die das div umschließt. In HTML:und CSS:
Verweise
quelle