Ignore the DOM
•
0 likes•559 views
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.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Ignore the DOM
- 1. Paul Bakaus, Liferay Ignore the DOM
- 2. Why is JavaScript slow? Paul Bakaus, Liferay 2
- 3. JS Performance Stack CSS JavaScript Displayed in Browser DOM Rendering Paul Bakaus, Liferay 3
- 4. JS Performance Stack CSS Rendered JavaScript representation DOM Parsing Paul Bakaus, Liferay 4
- 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. But if we were to do that.. Paul Bakaus, Liferay 6
- 7. ..we‘d have a beautiful command line application! Paul Bakaus, Liferay 7
- 8. So what can we do? Paul Bakaus, Liferay 8
- 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. 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. Two systems Isolated environment Open environment External source External source Paul Bakaus, Liferay 11
- 12. Two systems Isolated environment Open environment External source External source Paul Bakaus, Liferay 12
- 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. A sample application using jQuery Paul Bakaus, Liferay 14
- 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. Mutation events W3C IE ‣ DOMNodeInserted ‣ onpropertychange ‣ DOMNodeRemoved ‣ DOMAttrModified Paul Bakaus, Liferay 17
- 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. ..even more ‣ Cache as much as possible ‣ In frameworks, reuse selectors and offsets ‣ Work with template nodes Paul Bakaus, Liferay 19
- 20. Thanks for your attention! Paul Bakaus, Liferay 20
- 21. Contact ‣ paul.bakaus@gmail.com ‣ paulbakaus.com Paul Bakaus, Liferay 21