Rich and Snappy Apps (No Scaling Required)

11,881 views

Published on

Presentation by Amy Hoy and Thomas Fuchs about front-end web application performance at Kings of Code, Amsterdam, June 2009.

Main topics are loading-time performance, JavaScript tuning and progress indication.

Note that without the audio this is probably not very useful and it's mainly intended for attendees of the talk.

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,881
On SlideShare
0
From Embeds
0
Number of Embeds
1,115
Actions
Shares
0
Downloads
58
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Rich and Snappy Apps (No Scaling Required)

  1. RICH AND SNAPPY APPS ( NO SCALING REQUIRED ) BY AMY HOY AND THOMAS FUCHS HTTP://SLASH7.COM/COMPANY
  2. @amyhoy @thomasfuchs
  3. PERF ORMA NCE
  4. “In A/B tests, we tried delaying the page in increments of 100 milliseconds and found that even very small delays would result in substantial and costly drops in revenue.” Greg Linden, Amazon.com
  5. Back-End 10% Front-End 90% (NOT SCIENTIFIC)
  6. 225+ PAGES
  7. <!DOCTYPE “xmlns:xsl=’http://www.w3.org/1999/XSŁ Transform’”><html xmlns:java_code=“xalan:// gov.blahblah.build.Utils2”><head><META http-equiv=“Content- Type” content=“text/html; charset=UTF-8”><title>Blahblah - Home </title><!--SYSTEM DEFINED METADATA--><META content=“IE=7” http-equiv=“X-UA-Compatible”><META NAME=“CMS Document Id” CONTENT=“120186”><META NAME=“dc.title” CONTENT=“NASA - Home”><META NAME=“dc.format” CONTENT=“text/html”><META NAME=“dc.date.modified” CONTENT=“2009-06-27”><META NAME=“dc.language” CONTENT=“en”><META NAME=“dc.publisher” CONTENT=“Foobar”><META NAME=“dc.description” CONTENT=“”><META NAME=“dc.identifier” CONTENT=“http://www.blahblah.gov/home/ index.html”><!--USER DEFINED METADATA--><META NAME=“dc.subject” CONTENT=“”><title>Blahblah - Home </title><!--Standard Includes--><script src=“/js/ 191918main_browser_message.js” type=“text/javascript” language=“javascript”></script> <link type=“text/css” rel=“stylesheet” href=“/css/ 205608main_allmodules_homepage.css”><script language=“javascript” type=“text/javascript” src=“/ templateimages/redesign/browser/js/conditionalBrowser.js”></ script>
  8. DOM MONSTER BOOKMARKLET
  9. 1. LOAD-TIME 2. RUN-TIME 3. FAKING IT
  10. LOAD-TIME #1 EXPIRATION HEADERS
  11. caching headers are good but expiration is wrong
  12. LOAD-TIME #2 CONCATENATION
  13. not so good optimized
  14. http://getsprockets.org
  15. //= require <prototype> //= require “css” //= require “fx” library_path/lib/prototype.js src/css.js src/fx.js 1 2 3 concatenated.js
  16. YUI Compressor concatenated.js concatenated.min.js http://developer.yahoo.com/yui/compressor/
  17. LOAD-TIME #3 GZIP
  18. . prototype .
  19. 138k 80k 24k Original Minified Minified+GZIP 5.7X compression
  20. more than a second faster on a 1MBit connection
  21. 1. LOAD-TIME 2. RUN-TIME 3. FAKING IT
  22. RUN-TIME #1 HTML COMPLEXITY
  23. source: http://tr.im/ffreflow
  24. RUN-TIME #2 INLINE FUNCTION CALLS
  25. function methodCall(){ function square(n){ return n*n }; var i=10000, sum = 0; while(i--) sum += square(i); } function inlinedMethod(){ var i=10000, sum = 0; while(i--) sum += i*i; }
  26. function methodCall(){ function square(n){ return n*n }; var i=10000, sum = 0; while(i--) sum += square(i); } function inlinedMethod(){ var i=10000, sum = 0; while(i--) sum += i*i; }
  27. function methodCall(){ function square(n){ return n*n }; var i=10000, sum = 0; while(i--) sum += square(i); } function inlinedMethod(){ var i=10000, sum = 0; while(i--) sum += i*i; }
  28. methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm, ahh, hmm† 0.128s 0.027s 0.016s
  29. IE8 THROWS THIS WARNING AFTER 1SEC
  30. RUN-TIME #3 EMBRACE THE LANGUAGE
  31. function literals(){ var a = [], o = {}; } function classic(){ var a = new Array, o = new Object; }
  32. classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
  33. var string = ‘2’; function implicit(){ return 1 * string; } function explicit(){ return parseInt(string); }
  34. explicit() implicit() 0.044s 0.054s 0.012s 0.004s 0.015s 0.036s 0.080s 0.060s
  35. RUN-TIME #4 GET RID OF LOOPS
  36. function normalLoop(){ var i=60, j=0; while(i--) j++; }
  37. function unrolledLoop(){ var j=0; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; }
  38. normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s 0.001s
  39. BEWARE OF ENGINE DIFFERENCES
  40. function test(){ return 1 * ‘2’; } alert(test.toString());
  41. function test(){ return 1 * ‘2’; } alert(test.toString());
  42. function test(){ return 1 * ‘2’; } alert(test.toString());
  43. 1. LOAD-TIME 2. RUN-TIME 3. FAKING IT
  44. ... AND GRANT ME THE SERENITY TO ACCEPT THE THINGS I CAN'T
  45. USERS WAIT FOR 5-8 SECONDS BEFORE GIVING UP † †Nah, F., "A study on tolerable waiting time: how long are Web users willing to wait?" Behaviour & Information Technology 23, no. 3 (2004): 153-163.
  46. OR UP TO HALF A MINUTE WITH A PROGRESS FEEDBACK
  47. More in http://jsrocks.com
  48. Q&A RICH AND SNAPPY APPS BY AMY HOY AND THOMAS FUCHS HTTP://SLASH7.COM/COMPANY

×