ignore the dom

Ignore the DOMPaul Bakaus, Liferay

Why is JavaScript slow?

2Paul Bakaus, Liferay

JS Performance Stack

3Paul Bakaus, Liferay

JavaScript

Rendering

DOM

CSS

Displayed in Browser

JS Performance Stack

4Paul Bakaus, Liferay

JavaScript

Parsing

DOM

CSS

Rendered representation

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!

But if we were to do that..

6Paul Bakaus, Liferay

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

7Paul Bakaus, Liferay

So what can we do?

8Paul Bakaus, Liferay

Can we remove CSS?

‣ CSS makes our pages beautiful

‣ DOM Layer 2 for stylesheets is actually very fast

9Paul Bakaus, Liferay

No way!

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

Two systems

11Paul Bakaus, Liferay

Isolated environment Open environment

Externalsource

Externalsource

Two systems

12Paul Bakaus, Liferay

Isolated environment Open environment

Externalsource

Externalsource

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?

A sample application using jQuery

14Paul Bakaus, Liferay

Patterns

15Paul Bakaus, Liferay

Canvas

‣ Imagine you‘re in a <canvas> element

‣ No DOM

‣ No event system

16Paul Bakaus, Liferay

then plan what you explicitely need

Mutation events

‣ DOMNodeInserted

‣ DOMNodeRemoved

‣ DOMAttrModified

17Paul Bakaus, Liferay

‣ onpropertychange

W3C IE

..more

‣ Build your own event model (through delegation)

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

18Paul Bakaus, Liferay

..even more

‣ Cache as much as possible

‣ In frameworks, reuse selectors and offsets

‣ Work with template nodes

19Paul Bakaus, Liferay

20Paul Bakaus, Liferay

Thanks for your attention!

Contact

‣ paul.bakaus@gmail.com

‣ paulbakaus.com

21Paul Bakaus, Liferay