Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Optimizing
                 Perceived Performance
Monday, March 23, 2009
About Me



Monday, March 23, 2009
My Startup



Monday, March 23, 2009
DBDB



Monday, March 23, 2009
http://github.com/
                              dce/dbdb


Monday, March 23, 2009
http://github.com/
                              dce/dbdb
                          public/javascripts/application.js


Mo...
def bagfactor
                      sleep(2)
                      rand(50) / 10.0
                    end

Monday, March ...
It could happen
                              to you


Monday, March 23, 2009
First Impressions



Monday, March 23, 2009
Up to...

     0.1 second          instantaneous
     1 second            responsive
     10 seconds          slow
     > ...
Bring in the AJAX



Monday, March 23, 2009
Some
                         Definitions


Monday, March 23, 2009
Progressive
                         Enhancement


Monday, March 23, 2009
Unobtrusive
                          Javascript


Monday, March 23, 2009
HIJAX


Monday, March 23, 2009
jQuery



Monday, March 23, 2009
class DbsController < ApplicationController
      def show
        @db = Db.find(params[:id])
        respond_to do |forma...
$(quot;.db-list aquot;).click(function() {
                       link = $(this);
                       $.ajax({url: $(th...
Make It Snappy



Monday, March 23, 2009
$(quot;.db-list aquot;).click(function() {
            link = $(this);
            link.parents(quot;dtquot;).after('<dd c...
Take Advantage
                           of Downtime


Monday, March 23, 2009
Monday, March 23, 2009
$(quot;.db-list aquot;).each(function() {
            $(this).parents(quot;dtquot;).after(quot;<dd class=quot;spinnerquot;...
jQuery.fn.loadContentInOrder = function() {
            link = this;
            $.ajax({url: this.attr(quot;hrefquot;),
 ...
Isolate Bottlenecks



Monday, March 23, 2009
Monday, March 23, 2009
JSON



Monday, March 23, 2009
{ quot;dbquot;: {
         quot;idquot;: 13,
         quot;namequot;: quot;Tyler Hansbroughquot;,
         quot;occupation...
class DbsController < ApplicationController
     def show
       @db = Db.find(params[:id])
       respond_to do |format|
...
$(quot;img.spinner:firstquot;).each(function() {
         $(this).loadBagfactor();
       });

       jQuery.fn.loadBagfac...
The best solution?



Monday, March 23, 2009
The worst solution?



Monday, March 23, 2009
New Problem



Monday, March 23, 2009
PYTHONISTAS
                            It's my way or f--k you.



Monday, March 23, 2009
Remove Blocking
                           Operations


Monday, March 23, 2009
The Usual Way

           •Hidden iFrame
           •Second form w/ iFrame as
            target
           •Server sends ...
Something
                         Sorta Nuts


Monday, March 23, 2009
$(quot;a#ajax-uploadsquot;).click(function() {
             $(quot;input[type=file]quot;).replaceWith(
               '<if...
<% form_for @avatar, :html => { :multipart => true } do |f| %>
        <%= f.file_field :image %>
      <% end %>

      <...
<%= image_tag @avatar.image.url(:thumb) %>

            <% javascript_tag do %>
              $(quot;formquot;, top.docume...
Cool? Lame?



Monday, March 23, 2009
Conclusion



Monday, March 23, 2009
Consider perceived
                           performance


Monday, March 23, 2009
Write your own JS



Monday, March 23, 2009
Thank You
                         http://speakerrate.com/events/64




Monday, March 23, 2009
Questions?



Monday, March 23, 2009
Upcoming SlideShare
Loading in …5
×

Optimizing Perceived Performance

1,307 views

Published on

As Phil Karlton said, “there are only two hard things in Computer Science: cache invalidation and naming things.” Despite enormous advances in the field of web development over the last five years, it remains difficult to use caching to allow sites to scale for expanding user bases. Fortunately, the last few years have also seen the rise of JavaScript libraries that take a lot of the pain out of client-side programming. In this talk, we’ll explore techniques for making your sites feel faster, without resorting to complicated caching schemes, while maintaining strict separation of content, style, and behavior.

Associated code is available at http://github.com/dce/dbdb

Published in: Technology, News & Politics
  • Be the first to comment

Optimizing Perceived Performance

  1. 1. Optimizing Perceived Performance Monday, March 23, 2009
  2. 2. About Me Monday, March 23, 2009
  3. 3. My Startup Monday, March 23, 2009
  4. 4. DBDB Monday, March 23, 2009
  5. 5. http://github.com/ dce/dbdb Monday, March 23, 2009
  6. 6. http://github.com/ dce/dbdb public/javascripts/application.js Monday, March 23, 2009
  7. 7. def bagfactor sleep(2) rand(50) / 10.0 end Monday, March 23, 2009
  8. 8. It could happen to you Monday, March 23, 2009
  9. 9. First Impressions Monday, March 23, 2009
  10. 10. Up to... 0.1 second instantaneous 1 second responsive 10 seconds slow > 10 seconds gone – About Face 3 Monday, March 23, 2009
  11. 11. Bring in the AJAX Monday, March 23, 2009
  12. 12. Some Definitions Monday, March 23, 2009
  13. 13. Progressive Enhancement Monday, March 23, 2009
  14. 14. Unobtrusive Javascript Monday, March 23, 2009
  15. 15. HIJAX Monday, March 23, 2009
  16. 16. jQuery Monday, March 23, 2009
  17. 17. class DbsController < ApplicationController def show @db = Db.find(params[:id]) respond_to do |format| format.html format.js do render :partial => quot;profilequot;, :locals => { :db => @db } end end end end Monday, March 23, 2009
  18. 18. $(quot;.db-list aquot;).click(function() { link = $(this); $.ajax({url: $(this).attr(quot;hrefquot;), success: function(src) { link.parents(quot;dtquot;).after(src); link.unbind('click').click(function() { $(this).parents(quot;dtquot;).next(quot;ddquot;).toggle(); return false; }) } }); return false; }); Monday, March 23, 2009
  19. 19. Make It Snappy Monday, March 23, 2009
  20. 20. $(quot;.db-list aquot;).click(function() { link = $(this); link.parents(quot;dtquot;).after('<dd class=quot;spinnerquot;></dd>'); link.unbind(quot;clickquot;).click(function() { link.parents(quot;dtquot;).next(quot;ddquot;).slideToggle(); return false; }); $.ajax({url: link.attr(quot;hrefquot;), success: function(src) { link.parents(quot;dtquot;).next(quot;ddquot;).replaceWith(src); } }); return false; }); Monday, March 23, 2009
  21. 21. Take Advantage of Downtime Monday, March 23, 2009
  22. 22. Monday, March 23, 2009
  23. 23. $(quot;.db-list aquot;).each(function() { $(this).parents(quot;dtquot;).after(quot;<dd class=quot;spinnerquot;></dd>quot;) .next(quot;ddquot;).hide(); }); $(quot;.db-list aquot;).click(function() { $(this).parents(quot;dtquot;).next(quot;ddquot;).slideToggle(); return false; }); $(quot;.db-list a:firstquot;).each(function() { $(this).loadContentInOrder(); }); Monday, March 23, 2009
  24. 24. jQuery.fn.loadContentInOrder = function() { link = this; $.ajax({url: this.attr(quot;hrefquot;), success: function(src) { link.parents(quot;dtquot;).next(quot;ddquot;).replaceWith(src).next(quot;dtquot;) .find(quot;aquot;).loadContentInOrder(); } }); }; Monday, March 23, 2009
  25. 25. Isolate Bottlenecks Monday, March 23, 2009
  26. 26. Monday, March 23, 2009
  27. 27. JSON Monday, March 23, 2009
  28. 28. { quot;dbquot;: { quot;idquot;: 13, quot;namequot;: quot;Tyler Hansbroughquot;, quot;occupationquot;: quot;UNC Basketball Playerquot;, quot;bagfactorquot;: 1.3, quot;avatar_idquot;: 61 } } Monday, March 23, 2009
  29. 29. class DbsController < ApplicationController def show @db = Db.find(params[:id]) respond_to do |format| format.html format.js { ... } format.json do render :json => { :bagfactor => @db.bagfactor } end end end end Monday, March 23, 2009
  30. 30. $(quot;img.spinner:firstquot;).each(function() { $(this).loadBagfactor(); }); jQuery.fn.loadBagfactor = function() { img = this; $.ajax({url: this.parents(quot;ddquot;).prev(quot;dtquot;) .find(quot;aquot;).attr(quot;hrefquot;), data: { format: quot;jsonquot; }, dataType: quot;jsonquot;, success: function(db) { img.replaceWith(db.bagfactor); $(quot;img.spinner:firstquot;).loadBagfactor(); } }); }; Monday, March 23, 2009
  31. 31. The best solution? Monday, March 23, 2009
  32. 32. The worst solution? Monday, March 23, 2009
  33. 33. New Problem Monday, March 23, 2009
  34. 34. PYTHONISTAS It's my way or f--k you. Monday, March 23, 2009
  35. 35. Remove Blocking Operations Monday, March 23, 2009
  36. 36. The Usual Way •Hidden iFrame •Second form w/ iFrame as target •Server sends back JS to update page Monday, March 23, 2009
  37. 37. Something Sorta Nuts Monday, March 23, 2009
  38. 38. $(quot;a#ajax-uploadsquot;).click(function() { $(quot;input[type=file]quot;).replaceWith( '<iframe src=quot;/avatars/newquot;></iframe>'); return false; }); Monday, March 23, 2009
  39. 39. <% form_for @avatar, :html => { :multipart => true } do |f| %> <%= f.file_field :image %> <% end %> <% javascript_tag do %> $(quot;inputquot;).change(function() { $(this).hide().after('<%= image_tag quot;spinner.gifquot; %>') .parents('form').submit(); }); <% end %> Monday, March 23, 2009
  40. 40. <%= image_tag @avatar.image.url(:thumb) %> <% javascript_tag do %> $(quot;formquot;, top.document).append( '<%= hidden_field_tag quot;db[avatar_id]quot;, @avatar.id %>'); <% end %> Monday, March 23, 2009
  41. 41. Cool? Lame? Monday, March 23, 2009
  42. 42. Conclusion Monday, March 23, 2009
  43. 43. Consider perceived performance Monday, March 23, 2009
  44. 44. Write your own JS Monday, March 23, 2009
  45. 45. Thank You http://speakerrate.com/events/64 Monday, March 23, 2009
  46. 46. Questions? Monday, March 23, 2009

×