nicht angemeldet
Hallo,
sondern wenn jeder einzelne Repaint sehr teuer ist.
Das ist natürlich ein schlagendes Argument. Besonders bei langen oder "irre kompliziert" gebauten Seiten dürfte das zutreffen.
Ganz so schlimm ist es nicht. Kein Browser zeichnet notwendig die gesamte Seite neu, wenn sich ein bestimmter Stil eines Elements ändert. Die Browser sind recht gut darin, das Zeichnen zu optimieren. Man kann in der Timeline des Web Inspectors sehen, welche Bereiche neu gezeichnet werden.
Und viele Pixel zeichnen muss der Browser letztlich ohnehin, wenn sich die Styles vieler Elemente ändern, auch beim Setzen einer Klasse
Allerdings sorgt eine Stiländerung dazu, dass Style-Caches invalidiert werden, Regeln erneut angewendet werden und ggf. ein Reflow ausgelöst wird. Ein Reflow passiert, wenn sich die Größe oder Positionierung von Elementen geändert hat, dann müssen große Teile der Site neu gelayoutet und also auch neu gezeichnet werden.
Übrigens muss eine Schleife, die den Stil von n Elementen anfasst, nicht notwendig n Reflows und Repaints auslösen:
var elements = document.querySelectorAll('.foo');
for (var i = 0; l = elements.length; i < l; i++) {
elements[i].style.color = 'red';
}
Das *kann* ein Browser so optimieren, dass nach Ablauf der Schleife alle betroffenen Bereiche neu gezeichnet werden. Beim Setzen von fontSize o.ä., was einen Reflow auslöst, könnte es der Browser ebenfalls optimieren. Auf der sichereren Seite ist man jedoch mit der Klassenlösung.
Siehe auch http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/.
Mathias
Gunnar Bittersmann