JavaScript Performance Optimization - From Server to Client
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

JavaScript Performance Optimization - From Server to Client

on

  • 1,510 views

Presentation from

Presentation from

Statistics

Views

Total Views
1,510
Views on SlideShare
1,508
Embed Views
2

Actions

Likes
2
Downloads
12
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

JavaScript Performance Optimization - From Server to Client Presentation 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