JAVASCRIPT PERFORMANCE
     OPTIMIZATION
    FROM SERVER TO CLIENT

           Dan DeFelippi
            @ExpertDan
      ...
From the server

...to runtime

...again and again
SERVING IT UP - SERVER


• gzip

• static   files / server caching

• Expires    headers, no Etag
SERVING IT UP - CDN


• S3   is not a CDN

• Use   libraries on a shared CDN?

• Use   your own!
IT’S ALMOST RUNTIME

• Don’t     put code inline unless absolutely necessary

• Move     all JS to the end of the body

• ...
JUST RUN ALREADY!
• Load    JS asynchronously

• Tools

  • LABjs   - http://labjs.com/

  • RequireJS - http://
   requir...
EVERY TIME
     YOU
 DOCUMENT.
    WRITE()
 A RABID SEAL
  EATS SOME
JAPANESE KIDS
RUNTIME FUNDAMENTALS
• Get   it working but don’t ignore performance.

• Don’t
      over think the little stuff until you...
RUNTIME PERFORMANCE
                                    Cache function results
// Bad way
if ($("#foo").val() === "") {
  ...
RUNTIME PERFORMANCE

Lots of functions may make your code easier to read,
          but they can hinder performance.

    ...
JS LOADED, NOW WHAT?


• You   did cache everything, right?

• How    about caching in HTML5 storage?

• What    about sta...
QUESTIONS?

    Dan DeFelippi
     @ExpertDan
 http://driverdan.com
Upcoming SlideShare
Loading in...5
×

JavaScript Performance Optimization - From Server to Client

1,284

Published on

Presentation from

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

No Downloads
Views
Total Views
1,284
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×