• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Optimizing Perceived Performance
 

Optimizing Perceived Performance

on

  • 2,109 views

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

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

Statistics

Views

Total Views
2,109
Views on SlideShare
2,103
Embed Views
6

Actions

Likes
3
Downloads
8
Comments
0

3 Embeds 6

http://spkr8.local 2
http://www.slideshare.net 2
http://lanyrd.com 2

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Optimizing Perceived Performance Optimizing Perceived Performance Presentation Transcript

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