21
Ignore the DOM Paul Bakaus, Liferay

Ignore the DOM

Embed Size (px)

DESCRIPTION

Since there\'s the DOM, JavaScript is a hated language. But strangely JavaScript itself is even though it\'s so dynamic pretty fast and powerful - only the forced connection to the document object model makes it horribly slow at some times. In this session you don\'t learn how to optimize DOM access using jQuery for example, but how to almost completely be able to ignore it.

Citation preview

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