High-performance DOM scripting
Download as PPT, PDF10 likes2,712 views
The document discusses DOM scripting performance. It begins by showing how accessing the DOM in a loop can be slow, performing thousands of get and set operations. It then discusses how the bridge between the DOM and JavaScript engines causes performance issues. Tools like Dynatrace can be used to analyze performance bottlenecks. The document concludes by providing some recommendations to improve DOM scripting performance, such as caching DOM references, updating DOM elements offline, and minimizing unnecessary reflows and repaints.
![Etcetera Blog: www.phpied.com Email: [email_address] Twitter: @stoyanstefanov YSlow 2.0](https://image.slidesharecdn.com/dom-scripting-100416154836-phpapp01/85/High-performance-DOM-scripting-16-320.jpg)
High-performance DOM scripting
- 1. Chapter 3: DOM Scripting Stoyan Stefanov Yahoo! Search Bayjax – April 13, 2010
- 2. Tonight: DOM is slow How slow? Why is it slow? What to do about it?
- 3. How slow?
- 4. // bad var count = 0 ; for (; count < 15000 ; count += 1) { document . getElementById ( 'here' ). innerHTML += 'a' ; } // DOM access = (1 get + 1 set) * 15000
- 5. // better var count = 0 , content = '' ; for (; count < 15000 ; count += 1) { content += 'a' ; } document . getElementById ( 'here' ). innerHTML += content; // DOM access: get + set
- 6. How bad are we talking about?
- 7. Why slow?
- 8. The bridge DOM land ECMA land
- 9. The browser
- 10. Dynatrace
- 11. Dynatrace
- 12. Speed tracer
- 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. What to do about it?
- 15. 10 commandments Don’t touch the DOM Cache DOM references in local var s Use selectors API Cache the length when looping collections Update the DOM offline Batch style changes Don’t ask for layout info excessively Minimize reflow areas Use event delegation (see Y.delegate() ) Don’t touch the DOM
- 16. Etcetera Blog: www.phpied.com Email: [email_address] Twitter: @stoyanstefanov YSlow 2.0