Your SlideShare is downloading. ×
0
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
JavaScript Performance Optimization - From Server to Client
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Performance Optimization - From Server to Client

1,266

Published on

Presentation from

Presentation from

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide












  • Transcript

    • 1. JAVASCRIPT PERFORMANCE OPTIMIZATION FROM SERVER TO CLIENT Dan DeFelippi @ExpertDan http://driverdan.com
    • 2. From the server ...to runtime ...again and again
    • 3. SERVING IT UP - SERVER • gzip • static files / server caching • Expires headers, no Etag
    • 4. SERVING IT UP - CDN • S3 is not a CDN • Use libraries on a shared CDN? • Use your own!
    • 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. 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. EVERY TIME YOU DOCUMENT. WRITE() A RABID SEAL EATS SOME JAPANESE KIDS
    • 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. 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. RUNTIME PERFORMANCE Lots of functions may make your code easier to read, but they can hinder performance. http://jsperf.com/inline-vs-func
    • 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. QUESTIONS? Dan DeFelippi @ExpertDan http://driverdan.com

    ×