Ignore the DOM (German)

1.434 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.434
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×