Ignore the DOM


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ignore the DOM

  1. 1. Paul Bakaus, Liferay Ignore the DOM
  2. 2. Why is JavaScript slow? Paul Bakaus, Liferay 2
  3. 3. JS Performance Stack CSS JavaScript Displayed in Browser DOM Rendering Paul Bakaus, Liferay 3
  4. 4. JS Performance Stack CSS Rendered JavaScript representation DOM Parsing Paul Bakaus, Liferay 4
  5. 5. 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
  6. 6. But if we were to do that.. Paul Bakaus, Liferay 6
  7. 7. ..we‘d have a beautiful command line application! Paul Bakaus, Liferay 7
  8. 8. So what can we do? Paul Bakaus, Liferay 8
  9. 9. Can we remove CSS? ‣ CSS makes our pages beautiful ‣ DOM Layer 2 for stylesheets is actually very fast No way! Paul Bakaus, Liferay 9
  10. 10. 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
  11. 11. Two systems Isolated environment Open environment External source External source Paul Bakaus, Liferay 11
  12. 12. Two systems Isolated environment Open environment External source External source Paul Bakaus, Liferay 12
  13. 13. 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
  14. 14. A sample application using jQuery Paul Bakaus, Liferay 14
  15. 15. Patterns Paul Bakaus, Liferay 15
  16. 16. Canvas ‣ Imagine you‘re in a <canvas> element ‣ No DOM ‣ No event system then plan what you explicitely need Paul Bakaus, Liferay 16
  17. 17. Mutation events W3C IE ‣ DOMNodeInserted ‣ onpropertychange ‣ DOMNodeRemoved ‣ DOMAttrModified Paul Bakaus, Liferay 17
  18. 18. ..more ‣ Build your own event model (through delegation) ‣ Control the output - know, how many elements are on your page Paul Bakaus, Liferay 18
  19. 19. ..even more ‣ Cache as much as possible ‣ In frameworks, reuse selectors and offsets ‣ Work with template nodes Paul Bakaus, Liferay 19
  20. 20. Thanks for your attention! Paul Bakaus, Liferay 20
  21. 21. Contact ‣ paul.bakaus@gmail.com ‣ paulbakaus.com Paul Bakaus, Liferay 21