Paul Bakaus, Liferay
Ignore the DOM

Why is JavaScript
slow?
Paul Bakaus, Liferay 2

JS Performance Stack
CSS
JavaScript Displayed in Browser
DOM
Rendering
Paul Bakaus, Liferay 3

JS Performance Stack
CSS
Rendered
JavaScript representation
DOM
Parsing
Paul Bakaus, Liferay 4

JS Performance Stack
‣ JavaScript itself is not what
makes JavaScript slow
‣ If we could forget out the
parsing/rendering, Awwww!
JavaScript would be How I hate
the DOM!
lightning fast
Paul Bakaus, Liferay 5

But if we were to do
that..
Paul Bakaus, Liferay 6

..we‘d have a beautiful
command line application!
Paul Bakaus, Liferay 7

So what can we do?
Paul Bakaus, Liferay 8

Can we remove CSS?
‣ CSS makes our pages
beautiful
‣ DOM Layer 2 for stylesheets
is actually very fast
No way!
Paul Bakaus, Liferay 9

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
Paul Bakaus, Liferay 10

Two systems
Isolated environment Open environment
External
source
External
source
Paul Bakaus, Liferay 11

Two systems
Isolated environment Open environment
External
source
External
source
Paul Bakaus, Liferay 12

Old School!
Build custom solutions!
Wait!
I don‘t have the time for that!
..then use a library!
..but that still consumes
too much time :(
does it really?
Paul Bakaus, Liferay 13

A sample application
using jQuery
Paul Bakaus, Liferay 14

Patterns
Paul Bakaus, Liferay 15

Canvas
‣ Imagine you‘re in a
<canvas> element
‣ No DOM
‣ No event system
then plan what you
explicitely need
Paul Bakaus, Liferay 16

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

..more
‣ Build your own event
model (through
delegation)
‣ Control the output -
know, how many
elements are on your
page
Paul Bakaus, Liferay 18

..even more
‣ Cache as much as possible
‣ In frameworks, reuse selectors and offsets
‣ Work with template nodes
Paul Bakaus, Liferay 19

Thanks for your
attention!
Paul Bakaus, Liferay 20

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