Rich and Snappy Apps (No Scaling Required)

  • 6,899 views
Uploaded on

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

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,899
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
55
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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