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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JavaScript Performance Optimization - From Server to Client

  • 1,193 views
Published

Presentation from

Presentation from

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,193
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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