Download pdf - Ignore the DOM

Transcript
Page 1: Ignore the DOM

Ignore the DOMPaul Bakaus, Liferay

Page 2: Ignore the DOM

Why is JavaScript slow?

2Paul Bakaus, Liferay

Page 3: Ignore the DOM

JS Performance Stack

3Paul Bakaus, Liferay

JavaScript

Rendering

DOM

CSS

Displayed in Browser

Page 4: Ignore the DOM

JS Performance Stack

4Paul Bakaus, Liferay

JavaScript

Parsing

DOM

CSS

Rendered representation

Page 5: Ignore the DOM

JS Performance Stack

‣ JavaScript itself is not what makes JavaScript slow

‣ If we could forget out the parsing/rendering, JavaScript would be lightning fast

5Paul Bakaus, Liferay

Awwww!How I hatethe DOM!

Page 6: Ignore the DOM

But if we were to do that..

6Paul Bakaus, Liferay

Page 7: Ignore the DOM

..we‘d have a beautiful command line application!

7Paul Bakaus, Liferay

Page 8: Ignore the DOM

So what can we do?

8Paul Bakaus, Liferay

Page 9: Ignore the DOM

Can we remove CSS?

‣ CSS makes our pages beautiful

‣ DOM Layer 2 for stylesheets is actually very fast

9Paul Bakaus, Liferay

No way!

Page 10: Ignore the DOM

How about DOM?

‣ The DOM gives us representations of objects in JS

‣ It is used for various tasks, most often to select and change an element

10Paul Bakaus, Liferay

Page 11: Ignore the DOM

Two systems

11Paul Bakaus, Liferay

Isolated environment Open environment

Externalsource

Externalsource

Page 12: Ignore the DOM

Two systems

12Paul Bakaus, Liferay

Isolated environment Open environment

Externalsource

Externalsource

Page 13: Ignore the DOM

Old School!

13Paul Bakaus, Liferay

Build custom solutions!

Wait!I don‘t have the time for that!

..then use a library!

..but that still consumestoo much time :(

does it really?

Page 14: Ignore the DOM

A sample application using jQuery

14Paul Bakaus, Liferay

Page 15: Ignore the DOM

Patterns

15Paul Bakaus, Liferay

Page 16: Ignore the DOM

Canvas

‣ Imagine you‘re in a <canvas> element

‣ No DOM

‣ No event system

16Paul Bakaus, Liferay

then plan what you explicitely need

Page 17: Ignore the DOM

Mutation events

‣ DOMNodeInserted

‣ DOMNodeRemoved

‣ DOMAttrModified

17Paul Bakaus, Liferay

‣ onpropertychange

W3C IE

Page 18: Ignore the DOM

..more

‣ Build your own event model (through delegation)

‣ Control the output - know, how many elements are on your page

18Paul Bakaus, Liferay

Page 19: Ignore the DOM

..even more

‣ Cache as much as possible

‣ In frameworks, reuse selectors and offsets

‣ Work with template nodes

19Paul Bakaus, Liferay

Page 20: Ignore the DOM

20Paul Bakaus, Liferay

Thanks for your attention!

Page 21: Ignore the DOM

Contact

‣ [email protected]

‣ paulbakaus.com

21Paul Bakaus, Liferay

mailto:[email protected]
mailto:[email protected]

Recommended

Animations 4.1 (black) 1 AA : 2 Aa : 1 aa complete dom/rec dom dom rec incomplete dominance dom blend dom-rec rec codominant dom1 dom1+ dom2
Animations 4.1 (black) 1 AA : 2 Aa : 1 aa complete dom/rec dom dom rec incomplete dominance dom blend dom-rec rec codominant dom1 dom1+ dom2 Documents
DOM and JavaScript Aryo Pinandito. HTML DOM DOM stands for the Document Object Model. The HTML DOM is the Document Object Model for HTML. The HTML
DOM and JavaScript Aryo Pinandito. HTML DOM DOM stands for the Document Object Model. The HTML DOM is the Document Object Model for HTML. The HTML Documents
Kiwok Bodykom Oslo 2007 ver 3 - SINTEF · Select heart beat templates > Detect Ignore Detect Ignore Detect Ignore Detect Ignore Detect Ignore Detect Ignore
Kiwok Bodykom Oslo 2007 ver 3 - SINTEF · Select heart beat templates > Detect Ignore Detect Ignore Detect Ignore Detect Ignore Detect Ignore Detect Ignore Documents
The Dom Dom Pigs Save the Star Tower
The Dom Dom Pigs Save the Star Tower Documents
Document Object Model (DOM): Objects and … Object Model (DOM): Objects and Collections . 2 ... Document Object Model to create dynamic web pages. The concept of DOM nodes and DOM
Document Object Model (DOM): Objects and … Object Model (DOM): Objects and Collections . 2 ... Document Object Model to create dynamic web pages. The concept of DOM nodes and DOM Documents
Don't ignore Google+
Don't ignore Google+ Social Media
Never Ignore Safety
Never Ignore Safety Health & Medicine
Manipulating the DOM
Manipulating the DOM Documents
The DOM tree
The DOM tree Documents
SECURITY, QUALITY, DOM. QUALITY, DOM. MECHANICAL LOCKING SYSTEMS DOM ix HT ... The precision interlocking of ... 333 BK · 333 KL · 333 TKL
SECURITY, QUALITY, DOM. QUALITY, DOM. MECHANICAL LOCKING SYSTEMS DOM ix HT ... The precision interlocking of ... 333 BK · 333 KL · 333 TKL Documents
HTML DOM. The HTML DOM defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree- structure
HTML DOM. The HTML DOM defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree- structure Documents
DOM - Revista da Fundação Dom Cabral
DOM - Revista da Fundação Dom Cabral Documents
The (Mobile) Readers We Ignore
The (Mobile) Readers We Ignore Mobile
DOM-Sicherheitstechnik - Elektronische Zutrittskontrolle ...€¦ · DOM Protector® 6 Varianten für alle Anforderungen, Bauformen 7 DOM Protector®EE + DK 8 DOM Protector® PP +
DOM-Sicherheitstechnik - Elektronische Zutrittskontrolle ...€¦ · DOM Protector® 6 Varianten für alle Anforderungen, Bauformen 7 DOM Protector®EE + DK 8 DOM Protector® PP + Documents
Kingsmead Technology College · 2 [8] M3. (wbc) ingest / digest pathogens / bacteria / viruses allow eat germs ignore swallow germs ignore ingest the disease ignore attack / kill
Kingsmead Technology College · 2 [8] M3. (wbc) ingest / digest pathogens / bacteria / viruses allow eat germs ignore swallow germs ignore ingest the disease ignore attack / kill Documents
Ignore the DOM (German)
Ignore the DOM (German) Technology
Dom Virgil Michel and the Liturgical Movement in the USAhpsimao/Support/TheologicalReflections/Dom... · March 19, 2007 Dom Virgil Michel 2 Outline • Motivation • Biographical
Dom Virgil Michel and the Liturgical Movement in the USAhpsimao/Support/TheologicalReflections/Dom... · March 19, 2007 Dom Virgil Michel 2 Outline • Motivation • Biographical Documents
The Transition Of Dom!
The Transition Of Dom! Documents