Embed Size (px)
DESCRIPTION
Seitdem es das DOM gibt, ist JavaScript eine gehasste Sprache. Dabei ist JavaScript selbst eigentlich trotz seiner Flexibilität extrem performant - nur die Zusammenarbeit mit dem Document Object Model bremst die Performance. In dieser Session lernen Sie nicht, wie sie den Zugriff auf Elemente im DOM z.B. mit jQuery optimieren, sondern wie sie ihn fast komplett von der Liste streichen können.
Citation preview
Ignore the DOMPaul Bakaus, Liferay
Warum ist JavaScript langsam?
2Paul Bakaus, Liferay
JS Performance Stack
3Paul Bakaus, Liferay
JavaScript
Rendering
DOM
CSS
Im Browser angezeigt
JS Performance Stack
4Paul Bakaus, Liferay
JavaScript
Parsing
DOM
CSS
Gerenderte Representation
JS Performance Stack
‣ JavaScript selbst macht JavaScript nicht langsam
‣ Wenn wir Parsing/Rendering vergessen könnten, wäre JavaScript extrem schnell
5Paul Bakaus, Liferay
Awwww!How I hatethe DOM!
Aber wenn wir das wirklich versuchten..
6Paul Bakaus, Liferay
..hätten wir eine wunderschöne command line application!
7Paul Bakaus, Liferay
Was können wir machen?
8Paul Bakaus, Liferay
Können wir CSS entfernen?
‣ CSS macht unsere Seiten hübsch
‣ DOM Layer 2 für Stylesheets ist eigentlich ziemlich schnell
9Paul Bakaus, Liferay
No way!
Was ist mit dem DOM?
‣ Das DOM gibt uns Repräsentationen unserer sichtbaren Elemente in JS
‣ Es wird für eine Vielzahl von Anwendungen benutzt, sehr häufig um Elemente zu selektieren und zu verändern
10Paul Bakaus, Liferay
Two systems
11Paul Bakaus, Liferay
Isolierte Umgebung Offene Umgebung
ExterneQuelle
Externe Quelle
Two systems
12Paul Bakaus, Liferay
Isolierte Umgebung Offene Umgebung
Externalsource
Externalsource
Old School!
13Paul Bakaus, Liferay
Bau dir angepasste Lösungen!
Warte mal!Für sowas hab ich keine Zeit!
..dann benutz ne Library!
..aber das frisst immer nochzu viel Zeit :(
denkste!
Ein Beispiel mit jQuery
14Paul Bakaus, Liferay
Patterns
15Paul Bakaus, Liferay
Canvas
‣ Stell dir vor du arbeitest in einem <canvas> Element
‣ Kein DOM
‣ Kein Event System
16Paul Bakaus, Liferay
plane jetzt, was du wirklich brauchst
Mutation events
‣ DOMNodeInserted
‣ DOMNodeRemoved
‣ DOMAttrModified
17Paul Bakaus, Liferay
‣ onpropertychange
W3C IE
..mehr
‣ Bau dir dein eigenes Event Model (durch Delegation)
‣ Controlliere den Output - merke dir, wieviele Elemente dein Script hinzufügt
18Paul Bakaus, Liferay
..noch mehr
‣ Soviel wie möglich cachen
‣ In Frameworks/Libraries Selektoren und Offsets weiterverwenden
‣ Mit Template Nodes arbeiten
19Paul Bakaus, Liferay
20Paul Bakaus, Liferay
Vielen Dank für die Aufmerksamkeit!
Kontakt
‣ paulbakaus.com
21Paul Bakaus, Liferay
