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,266 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,266
On SlideShare
0
From Embeds
0
Number of Embeds
9
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

    ×