ignore the dom
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.TRANSCRIPT
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
‣ paulbakaus.com
21Paul Bakaus, Liferay