Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Chapter 3:  DOM Scripting Stoyan Stefanov Yahoo! Search Bayjax – April 13, 2010
Tonight: DOM is slow <ul><li>How  slow? </li></ul><ul><li>Why   is it slow? </li></ul><ul><li>What  to do about it? </li><...
How  slow?
<ul><li>// bad  </li></ul><ul><li>var  count =  0 ; </li></ul><ul><li>for  (; count <  15000 ; count += 1) { </li></ul><ul...
<ul><li>// better </li></ul><ul><li>var  count =  0 , content =  '' ;  </li></ul><ul><li>for  (; count <  15000 ; count +=...
How  bad are we talking about?
Why  slow?
The bridge DOM land ECMA land
The browser
Dynatrace
Dynatrace
Speed tracer
bodystyle.color = 'red'; tmp = computed.backgroundColor; bodystyle.color = 'white'; tmp = computed.backgroundImage; bodyst...
What  to do about it?
10 commandments <ul><li>Don’t touch the DOM </li></ul><ul><li>Cache DOM references in local  var s </li></ul><ul><li>Use s...
Etcetera <ul><li>Blog: www.phpied.com </li></ul><ul><li>Email: [email_address] </li></ul><ul><li>Twitter: @stoyanstefanov ...
Nächste SlideShare
Wird geladen in …5
×

High-performance DOM scripting

5.735 Aufrufe

Veröffentlicht am

Bayjax meetup turned "High-Performancer JavaScript" book party at Yahoo! HQ

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

High-performance DOM scripting

  1. 1. Chapter 3: DOM Scripting Stoyan Stefanov Yahoo! Search Bayjax – April 13, 2010
  2. 2. Tonight: DOM is slow <ul><li>How slow? </li></ul><ul><li>Why is it slow? </li></ul><ul><li>What to do about it? </li></ul>
  3. 3. How slow?
  4. 4. <ul><li>// bad </li></ul><ul><li>var count = 0 ; </li></ul><ul><li>for (; count < 15000 ; count += 1) { </li></ul><ul><li>document . getElementById ( 'here' ). innerHTML += 'a' ; </li></ul><ul><li>} </li></ul><ul><li>// DOM access = (1 get + 1 set) * 15000 </li></ul>
  5. 5. <ul><li>// better </li></ul><ul><li>var count = 0 , content = '' ; </li></ul><ul><li>for (; count < 15000 ; count += 1) { </li></ul><ul><li>content += 'a' ; </li></ul><ul><li>} </li></ul><ul><li>document . getElementById ( 'here' ). innerHTML += content; </li></ul><ul><li>// DOM access: get + set </li></ul>
  6. 6. How bad are we talking about?
  7. 7. Why slow?
  8. 8. The bridge DOM land ECMA land
  9. 9. The browser
  10. 10. Dynatrace
  11. 11. Dynatrace
  12. 12. Speed tracer
  13. 13. bodystyle.color = 'red'; tmp = computed.backgroundColor; bodystyle.color = 'white'; tmp = computed.backgroundImage; bodystyle.color = 'green'; tmp = computed.backgroundAttachment; bodystyle.color = 'red'; bodystyle.color = 'white'; bodystyle.color = 'green'; tmp = computed.backgroundColor; tmp = computed.backgroundImage; tmp = computed.backgroundAttachment;
  14. 14. What to do about it?
  15. 15. 10 commandments <ul><li>Don’t touch the DOM </li></ul><ul><li>Cache DOM references in local var s </li></ul><ul><li>Use selectors API </li></ul><ul><li>Cache the length when looping collections </li></ul><ul><li>Update the DOM offline </li></ul><ul><li>Batch style changes </li></ul><ul><li>Don’t ask for layout info excessively </li></ul><ul><li>Minimize reflow areas </li></ul><ul><li>Use event delegation (see Y.delegate() ) </li></ul><ul><li>Don’t touch the DOM </li></ul>
  16. 16. Etcetera <ul><li>Blog: www.phpied.com </li></ul><ul><li>Email: [email_address] </li></ul><ul><li>Twitter: @stoyanstefanov </li></ul>YSlow 2.0

×