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
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 |format|
format.html
format.js do
render :partial => \"profile\", :locals => { :db => @db }
end
end
end
end
Monday, March 23, 2009

$(\".db-list a\").click(function() {
link = $(this);
$.ajax({url: $(this).attr(\"href\"),
success: function(src) {
link.parents(\"dt\").after(src);
link.unbind('click').click(function() {
$(this).parents(\"dt\").next(\"dd\").toggle();
return false;
})
}
});
return false;
});
Monday, March 23, 2009

Make It Snappy
Monday, March 23, 2009

$(\".db-list a\").click(function() {
link = $(this);
link.parents(\"dt\").after('<dd class=\"spinner\"></dd>');
link.unbind(\"click\").click(function() {
link.parents(\"dt\").next(\"dd\").slideToggle();
return false;
});
$.ajax({url: link.attr(\"href\"),
success: function(src) {
link.parents(\"dt\").next(\"dd\").replaceWith(src);
}
});
return false;
});
Monday, March 23, 2009

Take Advantage
of Downtime
Monday, March 23, 2009

Monday, March 23, 2009

$(\".db-list a\").each(function() {
$(this).parents(\"dt\").after(\"<dd class=\\\"spinner\\\"></dd>\")
.next(\"dd\").hide();
});
$(\".db-list a\").click(function() {
$(this).parents(\"dt\").next(\"dd\").slideToggle();
return false;
});
$(\".db-list a:first\").each(function() {
$(this).loadContentInOrder();
});
Monday, March 23, 2009

jQuery.fn.loadContentInOrder = function() {
link = this;
$.ajax({url: this.attr(\"href\"),
success: function(src) {
link.parents(\"dt\").next(\"dd\").replaceWith(src).next(\"dt\")
.find(\"a\").loadContentInOrder();
}
});
};
Monday, March 23, 2009

Isolate Bottlenecks
Monday, March 23, 2009

Monday, March 23, 2009

JSON
Monday, March 23, 2009

{ \"db\": {
\"id\": 13,
\"name\": \"Tyler Hansbrough\",
\"occupation\": \"UNC Basketball Player\",
\"bagfactor\": 1.3,
\"avatar_id\": 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

$(\"img.spinner:first\").each(function() {
$(this).loadBagfactor();
});
jQuery.fn.loadBagfactor = function() {
img = this;
$.ajax({url: this.parents(\"dd\").prev(\"dt\")
.find(\"a\").attr(\"href\"),
data: { format: \"json\" }, dataType: \"json\",
success: function(db) {
img.replaceWith(db.bagfactor);
$(\"img.spinner:first\").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

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

<% form_for @avatar, :html => { :multipart => true } do |f| %>
<%= f.file_field :image %>
<% end %>
<% javascript_tag do %>
$(\"input\").change(function() {
$(this).hide().after('<%= image_tag \"spinner.gif\" %>')
.parents('form').submit();
});
<% end %>
Monday, March 23, 2009

<%= image_tag @avatar.image.url(:thumb) %>
<% javascript_tag do %>
$(\"form\", top.document).append(
'<%= hidden_field_tag \"db[avatar_id]\", @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