Ignore the DOM (German)

Paul Bakaus, Liferay Ignore the DOM

Warum ist JavaScript langsam? Paul Bakaus, Liferay 2

JS Performance Stack CSS JavaScript Im Browser angezeigt DOM Rendering Paul Bakaus, Liferay 3

JS Performance Stack CSS Gerenderte JavaScript Representation DOM Parsing Paul Bakaus, Liferay 4

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

Aber wenn wir das wirklich versuchten.. Paul Bakaus, Liferay 6

..hätten wir eine wunderschöne command line application! Paul Bakaus, Liferay 7

Was können wir machen? Paul Bakaus, Liferay 8

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

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

Two systems Isolierte Umgebung Offene Umgebung Externe Quelle Externe Quelle Paul Bakaus, Liferay 11

Two systems Isolierte Umgebung Offene Umgebung External source External source Paul Bakaus, Liferay 12

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

Ein Beispiel mit jQuery Paul Bakaus, Liferay 14

Patterns Paul Bakaus, Liferay 15

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

Mutation events W3C IE ‣ DOMNodeInserted ‣ onpropertychange ‣ DOMNodeRemoved ‣ DOMAttrModified Paul Bakaus, Liferay 17

..mehr ‣ Bau dir dein eigenes Event Model (durch Delegation) ‣ Controlliere den Output - merke dir, wieviele Elemente dein Script hinzufügt Paul Bakaus, Liferay 18

..noch mehr ‣ Soviel wie möglich cachen ‣ In Frameworks/Libraries Selektoren und Offsets weiterverwenden ‣ Mit Template Nodes arbeiten Paul Bakaus, Liferay 19

Vielen Dank für die Aufmerksamkeit! Paul Bakaus, Liferay 20

Kontakt ‣ paul.bakaus@gmail.com ‣ paulbakaus.com Paul Bakaus, Liferay 21

Ignore the DOM (German)

0 comments

Notes on slide 1

Favorites, Groups & Events