Your SlideShare is downloading. ×
0
Paul Bakaus, Liferay

Ignore the DOM
Why is JavaScript
                             slow?


Paul Bakaus, Liferay                       2
JS Performance Stack

                           CSS




  JavaScript                         Displayed in Browser
       ...
JS Performance Stack

                          CSS


                                   Rendered
  JavaScript            ...
JS Performance Stack

‣ JavaScript itself is not what
     makes JavaScript slow
‣ If we could forget out the
     parsing...
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


      ...
How about DOM?

         ‣ The DOM gives us representations of objects
             in JS
         ‣ It is used for variou...
Two systems
 Isolated environment          Open environment

                                External
                    ...
Two systems
 Isolated environment          Open environment

                                External
                    ...
Old School!

      Build custom solutions!
                                             Wait!
                            ...
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
      ...
Mutation events

                 W3C                   IE

   ‣ DOMNodeInserted           ‣ onpropertychange
   ‣ DOMNode...
..more

‣ Build your own event
     model (through
     delegation)
‣ Control the output -
     know, how many
     elemen...
..even more

‣ Cache as much as possible
‣ In frameworks, reuse selectors and offsets
‣ Work with template nodes




Paul ...
Thanks for your
                         attention!



Paul Bakaus, Liferay                     20
Contact



 ‣ paul.bakaus@gmail.com
 ‣ paulbakaus.com




Paul Bakaus, Liferay             21
Upcoming SlideShare
Loading in...5
×

Ignore the DOM

1,536

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,536
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×