CODE MASH 2011 DEVELOPING HIGHPERFORMANCE WEB       APPS      Timothy Fisher       Compuware     January 14, 2011
WHO AM I?                              Timothy Fisher                              Technical Consultant                   ...
AGENDA• Why   Front-end Performance Matters• Optimize   Page Load• Responsive   Interfaces• Loading   and Executing JavaSc...
AGENDA• DOM     Scripting• Tools• Performance    Monitoring• QuestionsAn overview to spark thought and further investigation
TRAIL BLAZERS• Steve   Souders• Nicholas   Zakas• Stoyan    Stefanov• Patrick   Meenan• Sergey    Chernyshev
Why Front-endPerformance matters
According to Yahoo:“80% of end-user response time isspent on the front-end”According to Steve Souders (Google performance ...
Ads                                     CDN’s   Services          Syndicated ContentIntegration is happening on the client...
OPTIMIZING FRONT END•   Majority of end user response time spent on front end•   Easier to optimize front end•   Time spen...
OPTIMIZE PAGE LOAD
PAGE LOAD TIME              IS IMPORTANTPage load time is critical to the success of a web site/app         Google: +500 m...
BEST PRACTICES•   Reduce HTTP Requests    •   reduce overhead of page load    •   combine javascript and css into less num...
BEST PRACTICES•   Make Pages Cacheable    •   add expires header to pages    •   use on all static content    •   reduces ...
BEST PRACTICES•   Place Stylesheets at the Top    •   browser needs style info first to avoid repaints/reflows later        ...
BEST PRACTICES•   Minify JavaScript and CSS    •   save bandwidth / download time    •   lots of tools to automate this fo...
BEST PRACTICES•   Maximize Paralell Downloads•   Split components across domains•   each browser limits paralell downloads...
CSS SPRITES•   One image contains    multiple web images•   CSS styles used to    display correct web    image, i.e. posit...
RESPONSIVE INTERFACES
A SINGLE BROWSER THREAD
SINGLE THREAD                   IMPLICATIONS• Single   UI Thread for both UI updates and JavaScript execution  • only   on...
“0.1 second is about the limit for having the user feel that a system is reacting instantaneoulsy”   - Jakob Nielsen, Usab...
No limit to how long this can run...  function processData(items, processor, callback) {      for (var i=0, len=items.leng...
WEB WORKERS• Commonly     associated with HTML5• Allow   for asynchronous JavaScript execution• JS   runs in a seperate th...
Calling a Web Worker    var worker = new Worker("worker.js");    // Watch for messages from the worker    worker.onmessage...
LOADING & EXECUTING     JAVASCRIPT
WHY JAVASCRIPT?•   Poorly written JavaScript is the most common reason    for slow client-side performance    • Loading   ...
TYPICAL JAVASCRIPT             PLACEMENT<html>    <head>        <link href=”style.css” rel=”stylesheet” type=”text/css”/> ...
BETTER JAVASCRIPT           PLACEMENT<html>    <head>        <link href=”style.css” rel=”stylesheet” type=”text/css”/>    ...
COMBINE JAVASCRIPT FILES•   Each script request requires HTTP performance overhead•   Minimize overhead by combining scrip...
MINIFY JAVASCRIPT• Removes     all unecessary space/comments from your JS files• Replace   variables with short names• Easy...
NON-BLOCKING LOADS• AddJavaScript to a page in a way that does not block the browser thread ‣ Dynamic Script Elements ‣ Sc...
DYNAMIC SCRIPT ELEMENTS• JavaScript          is downloaded and executed without blocking other page processes.  var script...
SCRIPT INJECTION• Use Ajax to get script• Can control when script is parsed/executed• JavaScript must be served from same ...
RECOMMENDED       NONBLOCKING LOAD• Include the code necessary to dynamically load the the rest of the JS required for pag...
REAL WORLD USE• This     technique is used by many JavaScript libraries including YUI and Dojo.   <script type="text/javas...
OPEN SOURCE JS LOADERSLots of libraries available to help with the JS load problem:         •   ControlJS         •   LabJ...
CONTROLJS• Progessive   Enhancement is core to ControlJS philosophy• downloads    scripts asynchronously• delays   script ...
CONTROLJS                    Async JS Loading        var cjsscript = document.createElement(script);        cjsscript.src ...
CONTROLJS                          Delayed Execution<script data-cjsexec=false type="text/cjs" data-cjssrc="jquery.min.js"...
LABJS                   Async JS Loading<script src="LAB.js"></script>Load these scripts asynchronously:$LAB.script(mootoo...
SUMMARY• Browser    UI and JS share a single thread• Code  execution blocks other browser processes such as UI painting• P...
DATA ACCESS
ACCESSING DATAHow you store and access data can have a significantimpact on performance...         JavaScript Scope Chain
SCOPE CHAINBad (deeper scope chain referencing repeatedly)function innerHTMLLoop() {    document.getElementById(ctrl1).inn...
DOM SCRIPTING
DOCUMENT OBJECT MODEL • Document Object Model (DOM) is a language  independent API for working with HTML and XML • DOM  Sc...
DOM/JS ISOLATION•   DOM and JavaScript implementations are independent    of each other in all major browsers•   This caus...
BAD DOM SCRIPTINGBad (we cross the bridge 1500 times!)function innerHTMLLoop() {    for (var count = 0; count < 1500; coun...
REPAINTS AND REFLOWS  A reflow occurs whenever you change the  geometry of an element that is displayed on the  page.  A re...
AVOIDING REPAINTS/REFLOWS  This will potentially cause 3 repaints/reflows...  var el = document.getElementById(mydiv);  el....
TOOLS
TOOLS ARE YOUR FRIENDThe right tools can help a developer identify and fixperformance problems related to client-side behav...
FIREBUG•Firefox plugin•Debug JavaScript•View page load waterfall:
PAGE SPEED•Extension to Firebug from Google•Provides tips for improving page performance
Y-SLOW•Extension to Firebug from Yahoo•tips for improving page performance
DYNATRACE AJAX EDITION•extension for IE, coming soon for Firefox•deeper client-side tracing than the firebug extensions
SPEED TRACER•performance extension for Google Chrome•similar features to Dynatrace Ajax
YUI PROFILER•profile JavaScript performance•developer must insert JS code
MORE TOOLS...Internet Explorer Developer ToolsSafari Web InspectorChrome Developer ToolsLots of developer tools to debug p...
PERFOMANCE MONITORING
SHOWSLOW collects:   YSlow   PageSpeed   DyantraceIntegrate withWebPageTestto run tests.                 http://www.showsl...
WEB PAGE TESTTests againstdedicated nodes.Agent deployedon test nodes.Image capture                     http://www.webpage...
BOOMERANG                              <html>                                <head>JavaScript library for Real            ...
W3C WEB PERFORMANCENew W3C Working Group focused on web performance.First recommendations: Navigation Timing - how fast do...
DON’T WANT TO DOALL OF THIS YOURSELF???
End-to-end application performance monitoring
RESOURCES•   Yahoo Exceptional Performance    http://developer.yahoo.com/performance/•   Google Web Performance    http://...
QUESTIONS
Developing High Performance Web Apps - CodeMash 2011
Upcoming SlideShare
Loading in...5
×

Developing High Performance Web Apps - CodeMash 2011

12,954

Published on

Talk given at CodeMash 2011

Published in: Technology, Design
6 Comments
46 Likes
Statistics
Notes
  • i will like u to tell me what u like and what u dislike, tell me everything i need to know about u i will also tell you about my self in the next mail if i eventually see your reply.please if you are interested write me back at (( alicedavids72@yahoo.com ))
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice info........keep updation
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • techzarinfo keep smiling
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice info its useful for me......Techzarinfo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Recommandé par @edasfr
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
12,954
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
439
Comments
6
Likes
46
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Accessing a DOM element always comes at a price. \nIt is not the same as accessing any other local or global variable in JavaScript.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Developing High Performance Web Apps - CodeMash 2011

    1. 1. CODE MASH 2011 DEVELOPING HIGHPERFORMANCE WEB APPS Timothy Fisher Compuware January 14, 2011
    2. 2. WHO AM I? Timothy Fisher Technical Consultant CTO Office - Emerging Technologies @tfisher tim.fisher@compuware.com www.timothyfisher.comDownload this presentation at: http://www.slideshare.net/timothyf
    3. 3. AGENDA• Why Front-end Performance Matters• Optimize Page Load• Responsive Interfaces• Loading and Executing JavaScript• Data Access
    4. 4. AGENDA• DOM Scripting• Tools• Performance Monitoring• QuestionsAn overview to spark thought and further investigation
    5. 5. TRAIL BLAZERS• Steve Souders• Nicholas Zakas• Stoyan Stefanov• Patrick Meenan• Sergey Chernyshev
    6. 6. Why Front-endPerformance matters
    7. 7. According to Yahoo:“80% of end-user response time isspent on the front-end”According to Steve Souders (Google performance guru):“80-90% of end-user responsetime is spent on the front-end”
    8. 8. Ads CDN’s Services Syndicated ContentIntegration is happening on the client-side
    9. 9. OPTIMIZING FRONT END• Majority of end user response time spent on front end• Easier to optimize front end• Time spent optimizing here will have greatest impact
    10. 10. OPTIMIZE PAGE LOAD
    11. 11. PAGE LOAD TIME IS IMPORTANTPage load time is critical to the success of a web site/app Google: +500 ms → -20% traffic Yahoo: +400 ms → -5-9% full-page traffic Amazon: +100 ms → -1% salesSmall performance flucutations affect traffic and sales!!!
    12. 12. BEST PRACTICES• Reduce HTTP Requests • reduce overhead of page load • combine javascript and css into less number of files • combine images into sprites• Use a Content Delivery Network (CDN) • static content delivered by fast distributed network with low latency • content delivered closer to “last mile”
    13. 13. BEST PRACTICES• Make Pages Cacheable • add expires header to pages • use on all static content • reduces HTTP requests• Use GZIP Page Compression • all modern browsers support GZIP compression • 60-80% savings on text-based content • No code changes required!
    14. 14. BEST PRACTICES• Place Stylesheets at the Top • browser needs style info first to avoid repaints/reflows later CSS • keep stylesheets external • use <link>, do not use @import• Place Scripts at the Bottom • allow page content to be rendered first • keep scripts external to allow caching JavaScript
    15. 15. BEST PRACTICES• Minify JavaScript and CSS • save bandwidth / download time • lots of tools to automate this for you• Post/pre Load Components • consider how you are loading content and scripts
    16. 16. BEST PRACTICES• Maximize Paralell Downloads• Split components across domains• each browser limits paralell downloads per domain• enables browser to load more stuff in parallel• Optimize Images • avoid high-res images unless it is intentional • don’t let the browser scale your images • combine into sprites
    17. 17. CSS SPRITES• One image contains multiple web images• CSS styles used to display correct web image, i.e. position, background-position
    18. 18. RESPONSIVE INTERFACES
    19. 19. A SINGLE BROWSER THREAD
    20. 20. SINGLE THREAD IMPLICATIONS• Single UI Thread for both UI updates and JavaScript execution • only one of these can happen at a time! • Reason: JavaScript may cause UI updates... Page downloading and rendering must stop and wait for scripts to be downloaded and executed
    21. 21. “0.1 second is about the limit for having the user feel that a system is reacting instantaneoulsy” - Jakob Nielsen, Usability ExpertTranslation: No single JavaScript should execute formore than 100 mS to ensure a responsive UI.
    22. 22. No limit to how long this can run... function processData(items, processor, callback) { for (var i=0, len=items.length; i<len; i++) { processor(items[i]); } callback(); }Will run no more than 50 mS... funcion timedProcessData(items, processor, callback) { var todo = items.concat(); // clone items setTimeout(funcion() { var start = new Date(); do { processor(todo.shift()); } while (todo.length > 0 && (new Date() - start < 50)); if (todo.length > 0) { setTimeout(arguments.callee, 25); } else { callback(items); } }, 25); }
    23. 23. WEB WORKERS• Commonly associated with HTML5• Allow for asynchronous JavaScript execution• JS runs in a seperate thread isolated from the DOM• Does not delay UI updates• Data can be passed to/from Web Workers
    24. 24. Calling a Web Worker var worker = new Worker("worker.js"); // Watch for messages from the worker worker.onmessage = function(e){ // The message from the client: e.data }; worker.postMessage("start");The Web Worker client (worker.js) onmessage = function(e){ if ( e.data === "start" ) { // Do some computation done() } }; function done(){ // Send back the results to the parent page postMessage("done"); }
    25. 25. LOADING & EXECUTING JAVASCRIPT
    26. 26. WHY JAVASCRIPT?• Poorly written JavaScript is the most common reason for slow client-side performance • Loading • Parsing • Execution
    27. 27. TYPICAL JAVASCRIPT PLACEMENT<html> <head> <link href=”style.css” rel=”stylesheet” type=”text/css”/> <script src=”myscript.js” type=”text/javascript”></script> <script src=”myscript.js” type=”text/javascript”></script> <script> function hello_world() { alert(‘hello world’); } var complex_data = // some complex calculation // </script> </head> <body> ... </body></html>
    28. 28. BETTER JAVASCRIPT PLACEMENT<html> <head> <link href=”style.css” rel=”stylesheet” type=”text/css”/> </head> <body> ... <script src=”myscript.js” type=”text/javascript”></script> <script src=”myscript.js” type=”text/javascript”></script> <script> function hello_world() { alert(‘hello world’); } var complex_data = // some complex calculation </script> </body></html>
    29. 29. COMBINE JAVASCRIPT FILES• Each script request requires HTTP performance overhead• Minimize overhead by combining scripts file.js file1.js file2.js file3.js => Browser Browser
    30. 30. MINIFY JAVASCRIPT• Removes all unecessary space/comments from your JS files• Replace variables with short names• Easy to do at built-time with a tool• Checkout YUI Compressor, Closure Compiler... Avoid manual code-size optimization!
    31. 31. NON-BLOCKING LOADS• AddJavaScript to a page in a way that does not block the browser thread ‣ Dynamic Script Elements ‣ Script Injection
    32. 32. DYNAMIC SCRIPT ELEMENTS• JavaScript is downloaded and executed without blocking other page processes. var script = document.createElement(‘script’); script.type = “text/javascript”; script.src = “file1.js”; document.getElementsByTagName(“head”)[0].appendChild(script);
    33. 33. SCRIPT INJECTION• Use Ajax to get script• Can control when script is parsed/executed• JavaScript must be served from same domain var xhr = XMLHttpRequest(); xhr.open(“get”, “file.js”, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { var script = document.createElement(“script”); script.type = “text/javascript”; script.text = xhr.responseText; document.body.appendChild(script); } } }; xhr.send(null);
    34. 34. RECOMMENDED NONBLOCKING LOAD• Include the code necessary to dynamically load the the rest of the JS required for page init <script type="text/javascript" src="loader.js"></script> <script type="text/javascript"> loadScript("the-rest.js", function(){ Application.init(); }); </script> Optionally include the loadScript function directly in the page
    35. 35. REAL WORLD USE• This technique is used by many JavaScript libraries including YUI and Dojo. <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js"></script> YUI().use("dom", function(Y){ Y.DOM.addClass(document.body, "loaded"); }); Dynamically loads the DOM utility and calls ‘loaded’ function when loading is complete.
    36. 36. OPEN SOURCE JS LOADERSLots of libraries available to help with the JS load problem: • ControlJS • LabJS • RequireJS
    37. 37. CONTROLJS• Progessive Enhancement is core to ControlJS philosophy• downloads scripts asynchronously• delays script execution until aftr the page has rendered• allows scripts to be downloaded and not executed
    38. 38. CONTROLJS Async JS Loading var cjsscript = document.createElement(script); cjsscript.src = "control.js"; var cjssib = document.getElementsByTagName(script)[0]; cjssib.parentNode.insertBefore(cjsscript, cjssib);Replace these script includes:<script type="text/javascript" src="main.js"></script>with:<script type="text/cjs" data-cjssrc="main.js"></script>
    39. 39. CONTROLJS Delayed Execution<script data-cjsexec=false type="text/cjs" data-cjssrc="jquery.min.js"></script><script data-cjsexec=false type="text/cjs" data-cjssrc="fg.menu.js"></script> Execute at a later time... examplesbtn.onclick = function() { CJS.execScript("jquery.min.js"); CJS.execScript("fg.menu.js", createExamplesMenu); };
    40. 40. LABJS Async JS Loading<script src="LAB.js"></script>Load these scripts asynchronously:$LAB.script(mootools-1.3.js);$LAB.script(mootools-1.3.js).wait() .script(mootools-dependent-script.js);
    41. 41. SUMMARY• Browser UI and JS share a single thread• Code execution blocks other browser processes such as UI painting• Put script tags at the bottom of page• Load as much JS dynamically as possible• Minimize and compress your JS
    42. 42. DATA ACCESS
    43. 43. ACCESSING DATAHow you store and access data can have a significantimpact on performance... JavaScript Scope Chain
    44. 44. SCOPE CHAINBad (deeper scope chain referencing repeatedly)function innerHTMLLoop() { document.getElementById(ctrl1).innerHTML += a; document.getElementById(ctrl1).innerHTML += b; document.getElementById(ctrl1).innerHTML += c;}Better (save globals to local variables)function innerHTMLLoop2() { var el = document.getElementById(ctrl1); el.innerHTML += a; el.innerHTML += b; el.innerHTML += ‘c’;}
    45. 45. DOM SCRIPTING
    46. 46. DOCUMENT OBJECT MODEL • Document Object Model (DOM) is a language independent API for working with HTML and XML • DOM Scripting is expensive and a common cause of performance problems
    47. 47. DOM/JS ISOLATION• DOM and JavaScript implementations are independent of each other in all major browsers• This causes overhead performance costs as these two pieces of code must interface JavaScri DOM pt Minimize how many times you cross this bridge
    48. 48. BAD DOM SCRIPTINGBad (we cross the bridge 1500 times!)function innerHTMLLoop() { for (var count = 0; count < 1500; count++) { document.getElementById(here).innerHTML += a; }}Good (we cross the bridge 1 time)function innerHTMLLoop2() { var content = ; for (var count = 0; count < 1500; count++) { content += a; } document.getElementById(here).innerHTML += content;}
    49. 49. REPAINTS AND REFLOWS A reflow occurs whenever you change the geometry of an element that is displayed on the page. A repaint occurs whenever you change the content of an element that is displayed on the screen.These are both expensive operations in terms of performance!
    50. 50. AVOIDING REPAINTS/REFLOWS This will potentially cause 3 repaints/reflows... var el = document.getElementById(mydiv); el.style.borderLeft = 1px; el.style.borderRight = 2px; el.style.padding = 5px; Better... 1 repaint/reflow var el = document.getElementById(mydiv); el.style.cssText = border-left: 1px; border-right: 2px; padding: 5px;; or... var el = document.getElementById(mydiv); el.className = active;
    51. 51. TOOLS
    52. 52. TOOLS ARE YOUR FRIENDThe right tools can help a developer identify and fixperformance problems related to client-side behaviour. Profiling Timing functions and operations during script execution Network Analysis Examine loading of images, stylesheets, and scripts and their effect on page load and rendering
    53. 53. FIREBUG•Firefox plugin•Debug JavaScript•View page load waterfall:
    54. 54. PAGE SPEED•Extension to Firebug from Google•Provides tips for improving page performance
    55. 55. Y-SLOW•Extension to Firebug from Yahoo•tips for improving page performance
    56. 56. DYNATRACE AJAX EDITION•extension for IE, coming soon for Firefox•deeper client-side tracing than the firebug extensions
    57. 57. SPEED TRACER•performance extension for Google Chrome•similar features to Dynatrace Ajax
    58. 58. YUI PROFILER•profile JavaScript performance•developer must insert JS code
    59. 59. MORE TOOLS...Internet Explorer Developer ToolsSafari Web InspectorChrome Developer ToolsLots of developer tools to debug performance!
    60. 60. PERFOMANCE MONITORING
    61. 61. SHOWSLOW collects: YSlow PageSpeed DyantraceIntegrate withWebPageTestto run tests. http://www.showslow.com/
    62. 62. WEB PAGE TESTTests againstdedicated nodes.Agent deployedon test nodes.Image capture http://www.webpagetest.org/
    63. 63. BOOMERANG <html> <head>JavaScript library for Real <script src="boomerang.js" type="text/javascript"></script> <script type="text/javascript"> BOOMR.init({User Monitoring (RUM) beacon_url: "http://yoursite.com/path/to/beacon.php" }); BOOMR.plugins.RT.startTimer("t_head"); </script>Released by Yahoo in <title>page title</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8">2010 <link rel="stylesheet" type="text/css" href="../boomerang-docs.css"> <script type="text/javascript"> BOOMR.plugins.RT.endTimer("t_head").startTimer("t_body"); </script> </head>Beacon metrics to a <body> page body herecentral server <script type="text/javascript"> BOOMR.plugins.RT.endTimer("t_body"); </script> </body> </html> https://github.com/yahoo/boomerang
    64. 64. W3C WEB PERFORMANCENew W3C Working Group focused on web performance.First recommendations: Navigation Timing - how fast does the page load Resource Timing - how fast do page resources load User Timing - user defined custom timing events http://www.w3.org/2010/webperf/
    65. 65. DON’T WANT TO DOALL OF THIS YOURSELF???
    66. 66. End-to-end application performance monitoring
    67. 67. RESOURCES• Yahoo Exceptional Performance http://developer.yahoo.com/performance/• Google Web Performance http://code.google.com/speed• JavaScript: The Good Parts by Douglas Crockford• High Performance JavaScript by Nicholas Zakas• Even Faster Websites by Steve Souders• Steve Souders Site http://www.stevesouders.com• John Resig’s Blog http://www.ejohn.org
    68. 68. QUESTIONS
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×