Optimizing Perceived Performance

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 Monday, March 23, 2009

def bagfactor sleep(2) rand(50) / 10.0 end Monday, March 23, 2009

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 > 10 seconds gone – About Face 3 Monday, March 23, 2009

Bring in the AJAX Monday, March 23, 2009

Some Deﬁnitions 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 |format| format.html format.js do render :partial => quot;profilequot;, :locals => { :db => @db } end end end end Monday, March 23, 2009

$(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

Make It Snappy Monday, March 23, 2009

$(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

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;></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

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

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;occupationquot;: quot;UNC Basketball Playerquot;, quot;bagfactorquot;: 1.3, quot;avatar_idquot;: 61 } } Monday, March 23, 2009

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

$(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

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 back JS to update page Monday, March 23, 2009

Something Sorta Nuts Monday, March 23, 2009

$(quot;a#ajax-uploadsquot;).click(function() { $(quot;input[type=file]quot;).replaceWith( '<iframe src=quot;/avatars/newquot;></iframe>'); return false; }); Monday, March 23, 2009

<% 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

<%= 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

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

Optimizing Perceived Performance

by David Eisinger

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 6

Statistics