Downloaded 20 times
More Related Content
Similar to A rough guide to JavaScript Performance
A rough guide to JavaScript Performance
- 1. A ROUGH GUIDEto JavaScript Performance by Mark Perkins, July 2010
- 2.
- 3. A *rough* guide.... Generalprinciples for you to take and build on
- 4. A *rough* guide.... Generalprinciples for you to take and build on 3 tips for loadtime performance
- 5. A *rough* guide.... Generalprinciples for you to take and build on 3 tips for loadtime performance 3 principles for speedy runtimes
- 6. A *rough* guide.... Generalprinciples for you to take and build on 3 tips for loadtime performance 3 principles for speedy runtimes Seconds, not milliseconds (possibly...)
- 7. We’re NOT goingto cover (much...)
- 8. We’re NOT goingto cover (much...) General frontend performance topics
- 9. We’re NOT goingto cover (much...) General frontend performance topics Crazy language optimisations eg. ~~( 1*‘12.34’ )
- 10. We’re NOT goingto cover (much...) General frontend performance topics Crazy language optimisations eg. ~~( 1*‘12.34’ ) Advanced testing tools
- 14.
- 15.
- 16. “Only 10-20% of the end user response time is spent downloading the HTML document. The other 80-90% is spent ’ Golden Rule Steve Souders
- 17. Some facts oflife
- 18. Some facts oflife HTTP requests are expensive
- 19. Some facts oflife HTTP requests are expensive Browsers are single threaded (ignoring web workers)
- 20. Some facts oflife HTTP requests are expensive Browsers are single threaded (ignoring web workers) 2-4 resources downloaded in parallel per host
- 21. Some facts oflife HTTP requests are expensive Browsers are single threaded (ignoring web workers) 2-4 resources downloaded in parallel per host <script> tags disable parallel downloads and block all rendering below them
- 22. JS 1 JS 2 IMAGE 1 IMAGE 2 time
- 23. <script> 1. Move <script>tags to the bottom (of the page)
- 27.
- 30.
- 31.
- 32.
- 33. Concatenation Less HTTP requests=== :-) But... rarely used scripts may be better off loaded where appropriate.
- 34. Concatenation Less HTTP requests=== :-) But... rarely used scripts may be better off loaded where appropriate. Automate: Sprockets, php-sprockets etc
- 35.
- 36. Minification Strips whitespace andcomments out, shortens variables in functions
- 37. Minification Strips whitespace andcomments out, shortens variables in functions Minify, don’t Pack!
- 38. Minification Strips whitespace andcomments out, shortens variables in functions Minify, don’t Pack! Anything that obfuscates code and requires eval’ing has a performance hit. Avoid!
- 39.
- 40. GZip your JS! GZipis the way forward. Use it.
- 41. GZip your JS! GZipis the way forward. Use it. Can reduce file size by up to 70%
- 42. GZip your JS! GZipis the way forward. Use it. Can reduce file size by up to 70% No whitespace removal or variable alteration - easy to debug
- 43. GZip your JS! GZipis the way forward. Use it. Can reduce file size by up to 70% No whitespace removal or variable alteration - easy to debug Configure once and forget about it, all taken care of by the server
- 44. GZip your JS! GZipis the way forward. Use it. Can reduce file size by up to 70% No whitespace removal or variable alteration - easy to debug Configure once and forget about it, all taken care of by the server
- 45. 3. Load scriptsin a non-blocking way
- 47.
- 48. Dynamic scripts Add <script>tags via DOM methods to avoid blocking of other page processes
- 49. Dynamic scripts Add <script>tags via DOM methods to avoid blocking of other page processes Only FF and Opera guarantee execution order (concatenation can help with this)
- 50. Dynamic scripts Add <script>tags via DOM methods to avoid blocking of other page processes Only FF and Opera guarantee execution order (concatenation can help with this) Use onload callbacks to tell us when it’s loaded, can nest to ensure execution order is respected
- 53. A little helpfrom your friends...
- 54. A little helpfrom your friends... Lazy Loader: http://github.com/rgrove/ lazyload/
- 55. A little helpfrom your friends... Lazy Loader: http://github.com/rgrove/ lazyload/ LabJS: http://labjs.com
- 56. A little helpfrom your friends... Lazy Loader: http://github.com/rgrove/ lazyload/ LabJS: http://labjs.com
- 57.
- 58. Loadtime recap! 1. Move<script> tags to the bottom of the page
- 59. Loadtime recap! 1. Move<script> tags to the bottom of the page 2. Concatenate, Minimise, GZip
- 60. Loadtime recap! 1. Move<script> tags to the bottom of the page 2. Concatenate, Minimise, GZip 3. Load scripts in a non-blocking way
- 61.
- 62. 1. Be afraidof the DOM!
- 63.
- 64. About that DOM... TheDOM is a language independent API for working with XML/HTML documents.
- 65. About that DOM... TheDOM is a language independent API for working with XML/HTML documents. The JS engine and the DOM are implemented separately in browsers.
- 66. About that DOM... TheDOM is a language independent API for working with XML/HTML documents. The JS engine and the DOM are implemented separately in browsers. Every time you touch the DOM you incur a performance penalty.
- 67. Big DOM: Scary! Little DOM: Not so scary.
- 68. Keep bridge crossingsto a minimum! DOM-LAND JAVASCRIPT- VILLE
- 70. ‘Cache’ your DOM selectionresults for re-use
- 72. Minimise this kindof DOM insertion wherever possible
- 74.
- 75. 2. Write lazycode
- 76. Lazy code doesas little work as possible, without repetition
- 77. Lazy code doesas little work as possible, without repetition
- 78. Lazy code doesas little work as possible, without repetition
- 79. Lazy code doesas little work as possible, without repetition
- 80. Lazy code doesas little work as possible, without repetition
- 81. 3. Keep yourAjax under control
- 82.
- 83. Caching is King!! UseGET requests
- 84. Caching is King!! UseGET requests Tailor URLs to the user where possible:
- 85. Caching is King!! UseGET requests Tailor URLs to the user where possible: http://mydomain/ajax/info.php? user_id=129473
- 86. Caching is King!! UseGET requests Tailor URLs to the user where possible: http://mydomain/ajax/info.php? user_id=129473 Ensure appropriate headers are sent by the server
- 87. Caching is King!! UseGET requests Tailor URLs to the user where possible: http://mydomain/ajax/info.php? user_id=129473 Ensure appropriate headers are sent by the server (ie. a far future Expires header)
- 88. Caching is King!! UseGET requests Tailor URLs to the user where possible: http://mydomain/ajax/info.php? user_id=129473 Ensure appropriate headers are sent by the server (ie. a far future Expires header)
- 89. Be smart aboutreturn data
- 90. Be smart aboutreturn data HTML > JSONP > JSON > XML
- 91. Be smart aboutreturn data HTML > JSONP > JSON > XML Return HTML wherever possible - templating in JS is slow, your server is fast, use it!
- 92. Be smart aboutreturn data HTML > JSONP > JSON > XML Return HTML wherever possible - templating in JS is slow, your server is fast, use it! JSONP - no parse time, already in a native format
- 93. Be smart aboutreturn data HTML > JSONP > JSON > XML Return HTML wherever possible - templating in JS is slow, your server is fast, use it! JSONP - no parse time, already in a native format JSON - needs parsing/evaluating first
- 94. Be smart aboutreturn data HTML > JSONP > JSON > XML Return HTML wherever possible - templating in JS is slow, your server is fast, use it! JSONP - no parse time, already in a native format JSON - needs parsing/evaluating first
- 95.
- 96. Runtime recap! 1. Beafraid of the DOM
- 97. Runtime recap! 1. Beafraid of the DOM 2. Write lazy code
- 98. Runtime recap! 1. Beafraid of the DOM 2. Write lazy code 3. Keep your Ajax under control
- 99. Additional Resources Books: High PerformanceWebsites: http://amzn.to/bbBTln Even Faster Websites: http://amzn.to/a7iJmo High Performance JavaScript: http://amzn.to/9CgsfA JavaScript Rocks! http://javascriptrocks.com/performance/ Interwebs: Steve Souders HPWS blog: http://stevesouders.com/ Yahoo Exceptional Performance resources: http://developer.yahoo.com/ performance/ YUI blog (performance category): http://yuiblog.com/blog/category/ performance Understanding site load waterfalls: http://bit.ly/9KkmN1 Nokia JS Performance best practices: http://bit.ly/aYLXLU Velocity Conference: http://en.oreilly.com/velocity2010 My ‘performance’ tag on Delicious: http://delicious.com/allmarkedup/ performance