Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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 ...
Próxima SlideShare
Cargando en…5
×

High-performance DOM scripting

5.736 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

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

×