nicht angemeldet
CSS Optimierung der Browser Performance
Hallo,
kann mir jemand mit einer guten Anleitung/Link weiterhelfen, wie man CSS Performance Killer in der Seitendarstellung finden kann. Ich bin auf der Suche nach Moeglichkeiten, die Darstellung relative grosser/komplexer DOM's zu optimieren. Aus Erfahrung ist mir bekannt, dass selbst einfache Webseiten mit 'falscher' CSS Deklarierung den Browser 'erstarren' lassen. Mir geht es darum, dass das Scrollen und andere Interaktion fluessig wirkt. Mich wuerde auch interessieren, wie man so etwas messen koennte, um auszutesten, welche CSS-Einstellungen am sinnvollsten fuer bestimmte Darstellungsscenarien sind.
Gruss,
Steffen
-
Meine Herren!
Mir geht es darum, dass das Scrollen und andere Interaktion fluessig wirkt.
Google Chromes Entwicklertools bieten die Möglichkeit Repainting-Flaschenhälse zu identifizieren: (STRG-Shift+i) -> Options (Zahnrad unten rechts) -> General -> Häkchen bei "Force accelerated compositing". Speziell für das Scrollen gibt es sogar die Option "Show potential scroll bottlenecks". Bei der Verwendung dieser Tools, muss man sich aber darüber klaren sein, dass sie nur für die hauseigene Implementation arbeiten – Flaschenhälse in anderen Browser sind damit nicht abgedeckt.
--
“All right, then, I'll go to hell.” – Huck Finn -
Hallo,
http://jankfree.org/ ist eine Liste von aktuellen Vorträgen, Artikeln und Tutorials. Dort geht es auch meist um die Nutzung der bereits genannten Chrome Dev Tools, um Performance konkret zu messen und zu verbessern. Eine kleine Auswahl:
http://www.html5rocks.com/en/tutorials/speed/scrolling/
http://www.html5rocks.com/en/tutorials/speed/parallax/
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-case-studies
http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/Mathias
-
Meine Herren!
Dort geht es auch meist um die Nutzung der bereits genannten Chrome Dev Tools
Was wenig verwunderlich ist, wenn man sich die Autoren ansieht: Addy Osmani, Paul Irish und Paul Lewis arbeiten alle drei bei Google ;) Ob das Absicht von dir war!?
--
“All right, then, I'll go to hell.” – Huck Finn-
Dort geht es auch meist um die Nutzung der bereits genannten Chrome Dev Tools
Was wenig verwunderlich ist, wenn man sich die Autoren ansieht
Klar, die Seite ist vom Chrome-Entwicklerteam. Genauso wie HTML5Rocks. Google ist hier gerade am aktivsten, was Developer-Relations angeht, und hat alle, die zu dem Thema arbeiten, kurzerhand eingestellt. Performance ist ja sowieso Googles Thema. Chrome hat auch tatsächlich die besten Tools für Performance-Untersuchungen. Es ist enorm, wieviel sich da alleine letztes Jahr getan hat.
Mathias
-
Meine Herren!
Es ist enorm, wieviel sich da alleine letztes Jahr getan hat.
ACK. Sagte der Newbie, der erst seit 2012 produktiv im Web arbeitet.
Das Trio hat übrigens sein eigenes Vlog, das ich leider vergessen habe im letzten Beitrag zu verlinken. Paul Lewis sitzt zwar "nur" auf der Ersatzbank, ist aber trotzdem eine Bereicherung.
--
“All right, then, I'll go to hell.” – Huck Finn
-
-
-
Besten Dank,
das sollte in der Tat einen guten Einstieg bieten, um neben DOM Veränderungen auch CSS optimieren zu koennen. Sehr hilfreich.
Gruss,
Steffen O.PS: Was machen die nur bei Firefox? Die Dev tools bei Chrome sind neben der Browsergeschwindigkeit schon auch eine Klasse fuer sich.
-