Ignore the DOM (German)

1,487 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,487
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ignore the DOM (German)

  1. 1. Paul Bakaus, Liferay Ignore the DOM
  2. 2. Warum ist JavaScript langsam? Paul Bakaus, Liferay 2
  3. 3. JS Performance Stack CSS JavaScript Im Browser angezeigt DOM Rendering Paul Bakaus, Liferay 3
  4. 4. JS Performance Stack CSS Gerenderte JavaScript Representation DOM Parsing Paul Bakaus, Liferay 4
  5. 5. JS Performance Stack ‣ JavaScript selbst macht JavaScript nicht langsam ‣ Wenn wir Parsing/ Rendering vergessen Awwww! könnten, wäre JavaScript How I hate the DOM! extrem schnell Paul Bakaus, Liferay 5
  6. 6. Aber wenn wir das wirklich versuchten.. Paul Bakaus, Liferay 6
  7. 7. ..hätten wir eine wunderschöne command line application! Paul Bakaus, Liferay 7
  8. 8. Was können wir machen? Paul Bakaus, Liferay 8
  9. 9. Können wir CSS entfernen? ‣ CSS macht unsere Seiten hübsch ‣ DOM Layer 2 für Stylesheets ist eigentlich ziemlich schnell No way! Paul Bakaus, Liferay 9
  10. 10. 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 Paul Bakaus, Liferay 10
  11. 11. Two systems Isolierte Umgebung Offene Umgebung Externe Quelle Externe Quelle Paul Bakaus, Liferay 11
  12. 12. Two systems Isolierte Umgebung Offene Umgebung External source External source Paul Bakaus, Liferay 12
  13. 13. Old School! Bau dir angepasste Lösungen! Warte mal! Für sowas hab ich keine Zeit! ..dann benutz ne Library! ..aber das frisst immer noch zu viel Zeit :( denkste! Paul Bakaus, Liferay 13
  14. 14. Ein Beispiel mit jQuery Paul Bakaus, Liferay 14
  15. 15. Patterns Paul Bakaus, Liferay 15
  16. 16. Canvas ‣ Stell dir vor du arbeitest in einem <canvas> Element ‣ Kein DOM ‣ Kein Event System plane jetzt, was du wirklich brauchst Paul Bakaus, Liferay 16
  17. 17. Mutation events W3C IE ‣ DOMNodeInserted ‣ onpropertychange ‣ DOMNodeRemoved ‣ DOMAttrModified Paul Bakaus, Liferay 17
  18. 18. ..mehr ‣ Bau dir dein eigenes Event Model (durch Delegation) ‣ Controlliere den Output - merke dir, wieviele Elemente dein Script hinzufügt Paul Bakaus, Liferay 18
  19. 19. ..noch mehr ‣ Soviel wie möglich cachen ‣ In Frameworks/Libraries Selektoren und Offsets weiterverwenden ‣ Mit Template Nodes arbeiten Paul Bakaus, Liferay 19
  20. 20. Vielen Dank für die Aufmerksamkeit! Paul Bakaus, Liferay 20
  21. 21. Kontakt ‣ paul.bakaus@gmail.com ‣ paulbakaus.com Paul Bakaus, Liferay 21

×