JavaScript Performance Optimization - From Server to Client

1,342
-1

Published on

Presentation from

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,342
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide












  • JavaScript Performance Optimization - From Server to Client

    1. 1. JAVASCRIPT PERFORMANCE OPTIMIZATION FROM SERVER TO CLIENT Dan DeFelippi @ExpertDan http://driverdan.com
    2. 2. From the server ...to runtime ...again and again
    3. 3. SERVING IT UP - SERVER • gzip • static files / server caching • Expires headers, no Etag
    4. 4. SERVING IT UP - CDN • S3 is not a CDN • Use libraries on a shared CDN? • Use your own!
    5. 5. IT’S ALMOST RUNTIME • Don’t put code inline unless absolutely necessary • Move all JS to the end of the body • Minification is a must • Combine JS files • ...or should you?
    6. 6. JUST RUN ALREADY! • Load JS asynchronously • Tools • LABjs - http://labjs.com/ • RequireJS - http:// requirejs.org/ • Lazy loading • http://bit.ly/lazyloading From http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
    7. 7. EVERY TIME YOU DOCUMENT. WRITE() A RABID SEAL EATS SOME JAPANESE KIDS
    8. 8. RUNTIME FUNDAMENTALS • Get it working but don’t ignore performance. • Don’t over think the little stuff until you address the fudamentals. • The more rudimentary the faster it typically is. • When in doubt, test. • http://jsperf.com/ • http://broofa.com/Tools/JSLitmus/
    9. 9. RUNTIME PERFORMANCE Cache function results // Bad way if ($("#foo").val() === "") { ... } else if ($("#foo").val() === "bar") { ... } // Better way var foo = $("#foo"); Applies to the DOM too. if (foo.val() === "") { ... } else if (foo.val() === "bar") { http://jsperf.com/input-value-vs-var-value ... } // Best way var fooVal = $("#foo").val(); if (fooVal === "") { ... } else if (fooVal === "bar") { ... }
    10. 10. RUNTIME PERFORMANCE Lots of functions may make your code easier to read, but they can hinder performance. http://jsperf.com/inline-vs-func
    11. 11. JS LOADED, NOW WHAT? • You did cache everything, right? • How about caching in HTML5 storage? • What about stale cache? • Diffable - http://code.google.com/p/diffable/
    12. 12. QUESTIONS? Dan DeFelippi @ExpertDan http://driverdan.com

    ×