Your SlideShare is downloading. ×
0
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Optimizing Perceived Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Optimizing Perceived Performance

980

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 …

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
980
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
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. Optimizing Perceived Performance Monday, March 23, 2009
    • 2. About Me Monday, March 23, 2009
    • 3. My Startup Monday, March 23, 2009
    • 4. DBDB Monday, March 23, 2009
    • 5. http://github.com/ dce/dbdb Monday, March 23, 2009
    • 6. http://github.com/ dce/dbdb public/javascripts/application.js Monday, March 23, 2009
    • 7. def bagfactor sleep(2) rand(50) / 10.0 end Monday, March 23, 2009
    • 8. It could happen to you Monday, March 23, 2009
    • 9. First Impressions Monday, March 23, 2009
    • 10. Up to... 0.1 second instantaneous 1 second responsive 10 seconds slow > 10 seconds gone – About Face 3 Monday, March 23, 2009
    • 11. Bring in the AJAX Monday, March 23, 2009
    • 12. Some Definitions Monday, March 23, 2009
    • 13. Progressive Enhancement Monday, March 23, 2009
    • 14. Unobtrusive Javascript Monday, March 23, 2009
    • 15. HIJAX Monday, March 23, 2009
    • 16. jQuery Monday, March 23, 2009
    • 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. $(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. Make It Snappy Monday, March 23, 2009
    • 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. Take Advantage of Downtime Monday, March 23, 2009
    • 22. Monday, March 23, 2009
    • 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. 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. Isolate Bottlenecks Monday, March 23, 2009
    • 26. Monday, March 23, 2009
    • 27. JSON Monday, March 23, 2009
    • 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. 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. $(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. The best solution? Monday, March 23, 2009
    • 32. The worst solution? Monday, March 23, 2009
    • 33. New Problem Monday, March 23, 2009
    • 34. PYTHONISTAS It's my way or f--k you. Monday, March 23, 2009
    • 35. Remove Blocking Operations Monday, March 23, 2009
    • 36. The Usual Way •Hidden iFrame •Second form w/ iFrame as target •Server sends back JS to update page Monday, March 23, 2009
    • 37. Something Sorta Nuts Monday, March 23, 2009
    • 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. <% 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. <%= 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. Cool? Lame? Monday, March 23, 2009
    • 42. Conclusion Monday, March 23, 2009
    • 43. Consider perceived performance Monday, March 23, 2009
    • 44. Write your own JS Monday, March 23, 2009
    • 45. Thank You http://speakerrate.com/events/64 Monday, March 23, 2009
    • 46. Questions? Monday, March 23, 2009

    ×