Optimizing Perceived Performance

1,194 views
1,091 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,194
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide














































  • 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

    ×