Ignore the DOM
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ignore the DOM

on

  • 2,772 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 ...

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.

Statistics

Views

Total Views
2,772
Views on SlideShare
2,769
Embed Views
3

Actions

Likes
0
Downloads
34
Comments
0

1 Embed 3

http://www.slideshare.net 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ignore the DOM Presentation Transcript

  • 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
  • 15. Patterns Paul Bakaus, Liferay 15
  • 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