Building High Performance Web Applications and Sites

1,582 views

Published on

Learn how to improve your Web application performance in the browser by avoiding common pitfalls in JavaScript, CSS, and HTTP caching techniques.

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,582
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
118
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Building High Performance Web Applications and Sites

  1. 1. johnhrv@microsoft.com
  2. 2. Layout, Rende ring, Formattin 16% g, … JScript & DOM 84%
  3. 3. Layout, Rende ring, Formattin g, … 33% 67% JScript & DOM
  4. 4. CSS performance Optimizing symbol resolution Javascript coding inefficiencies HTTP performance
  5. 5. table tr td ul li {color: green;} li#pass {color: green;} ul li {color: purple;} ul > li {color: purple;}
  6. 6. Minimize included styles Use less-complicated selectors Don’t use expressions Minimize page re-layouts
  7. 7. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance
  8. 8. DOM Global Prototype Intermediate … … Cost Instance Local
  9. 9. function WorkOnLocalVariable() { localVariable = foo(); return ( localVariable + 1 ); }
  10. 10. function WorkOnLocalVariable2() { var localVariable = foo(); return ( localVariable + 1 ); }
  11. 11. function BuildUI() { var elm = document.getElementById('ui'); // Clear existing contents elm.innerHTML = ''; 7 innerHTML References // Generate UI elm.innerHTML += BuildTitle(); += elm.innerHTML += BuildBody(); += elm.innerHTML += BuildFooter(); += }
  12. 12. function BuildUI2() { var elm = document.getElementById('ui'); 1 innerHTML // Generate UI Reference var contents = BuildTitle() + BuildBody() + BuildFooter(); // Replace existing contents with UI elm.innerHTML = contents; }
  13. 13. function CalculateSum() { // Retrieve Values document.body.all var lSide = document.body.all.lSide.value; document.body.all var rSide = document.body.all.rSide.value; // Generate Result document.body.all.result.value = lSide document.body.all + rSide; }
  14. 14. function CalculateSum2() { // Cache Element Collection var elms = document.body.all; // Retrieve Values elms var lSide = elms.lSide.value; elms var rSide = elms.rSide.value; // Generate Result elms elms.result.value = lSide + rSide; }
  15. 15. function IterateWorkOverCollection() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work Work(myCollection[i]); } }
  16. 16. function IterateWorkOverCollection2() { var funcWork = Work; var funcWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork funcWork(myCollection[i]); } }
  17. 17. http://channel9.msdn.com/pdc2008/TL24/
  18. 18. CSS Performance Considerations Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance
  19. 19. http://wiki.ecmascript.org/doku.php?id=es3.1:json _support http://www.json.org/json_parser.js
  20. 20. switch(option) { case 1: … case 2: … case 3: … … case 1000: … }
  21. 21. var lookup = { 1: function(){…} 2: function(){…} 3: function(){…} … 1000: function(){…} } try { lookup[option](); lookup [option](); } catch(e) { // Default operation }
  22. 22. var property = foo(); this.getProperty = function() { return property; } this.setProperty = function(value) { property = value; }
  23. 23. this.property = foo();
  24. 24. DOM Global Prototype Intermediate … … Cost Instance Local
  25. 25. DOM Global Prototype Intermediate … … Cost Instance Local
  26. 26. Trident (MSHTML) DOM JScript Engine
  27. 27. function getElementsByClassName(className, node, tag) { … var elements = node.getElementsByTagName(tag); var elements = node.getElementsByTagName(tag); var pattern = new RegExp(quot;(^|s)quot; + className + quot;(s|$)quot;); elements.length for(var i = 0, j = 0; i < elements.length; i++) { elements[i] if (pattern.test(elements[i].className)) { classElements[j] = elements[i]; j++; } } return classElements; }
  28. 28. function getElementsByClassName(className, node, tag) { … var results = node.getElementsByTagName(tag); var elements = new Array(results.length); var elements = new Array(results.length); while (length--) elements[length] = results[length]; while (length--) elements[length] = results[length]; var pattern = new RegExp(quot;(^|s)quot; + className + quot;(s|$)quot;); for(var i = 0, j = 0; i < elements.length i++) { elements.length; elements[i] if (pattern.test(elements[i].className)) { classElements.push(results[i]); j++; } } return classElements; }
  29. 29. function LoopChildren(elm) { var nodes = elm.childNodes; var length = nodes.length; for(var i = 0; i < length; i++) { var node = nodes[i]; nodes[i]; … } }
  30. 30. function LoopChildren2(elm) { var node = elm.firstChild; while(node != null) { … node = node.nextSibling; } }
  31. 31. function doValidation2() { // Retrieve the required elements by using Selectors // Selects all form fields with 'required' classes var reqs = document.querySelectorAll document.querySelectorAll(quot;.requiredquot;); // Set the flag to false by default var missingRequiredField = false; // Validate that the form data is not empty for (var i = 0; i < reqs.length; i++) { if (reqs[i].value == quot;quot;) missingRequiredField = true; } }
  32. 32. Use the native JSON object Turn large switch statements into lookups Avoid property access methods Minimize DOM interaction Use querySelectorAll for groups
  33. 33. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance
  34. 34. GET / HTTP/1.1 HTTP/1.1 200 OK Accept: */* Content-Length: 3479 Accept-Language: en-us Expires: -1 UA-CPU: x86 Date: Tue, 24 Apr 2007 21:30:46 GMT Content-Type: text/html; charset=utf-8 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0) Pragma: no-cache Host: www.live.com Content-Encoding: gzip gzip
  35. 35. <html> <head> <title>Test</title> </head> <body> … <!-- icon.gif dimensions: 500 x 400 --> <img src=quot;icon.gifquot; width=quot;50quot; height=quot;40quot; /> … </body> </html>
  36. 36. <html> <head> <title>Test</title> </head> <body> … <!-- icon2.gif dimensions: 50 x 40 --> <img src=quot;icon2.gifquot; width=quot;50quot; height=quot;40quot; /> … </body> </html>
  37. 37. <html> <head> <title>Test</title> <script src=“1.js” … ></script> <script src= type=quot;text/javascriptquot;></script> <script src=“2.js” … ></script> <link href=“1.css” … ></link> <link href=“2.css” … ></link> </head> <body> … </body> </html>
  38. 38. <html> <head> <title>Test</title> <script src=“1+2.js” … ></script> <script type=quot;text/javascriptquot;></script> <link href=“1+2.css” … ></link> </head> <body> … </body> </html>
  39. 39. <html> <head> <title>Test</title> </head> <body> … <img src=quot;a.gifquot; /> Item 1 <img src=quot;b.gifquot; /> Item 2 … </body> </html>
  40. 40. <head> <title>Test</title> <style type=quot;text/cssquot;> .a, .b { width: 10; height: 10 } .a, .b { background-image: quot;abc.gifquot; } .a { background-position: 0 0} .b { background-position: 0 -10 } .b { background-position: 0 -10 } </style> </head> <body> … <div class=quot;aquot;></div> Item 1 <div class=quot;aquot;></div> <div class=quot;bquot;></div> <div class=quot;bquot;></div> Item 2 … </body>
  41. 41. Request Response GET /images/banner.jpg HTTP/1.1 HTTP/1.1 304 Not Modified Host: www.microsoft.com Content-Type: image/jpeg If-Modified-Since: Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT Wed, 22 Feb 2006 04:15:54 GMT
  42. 42. Request Response GET /images/banner.jpg HTTP/1.1 HTTP/1.1 200 OK Host: www.microsoft.com Content-Type: image/jpeg Expires: Fri, 12 Jun 2009 02:50:50 GMT Request Response GET /images/banner.jpg HTTP/1.1 No response: Request serviced from cache
  43. 43. <html> <head> <title>Test</title> <script src=“1+2.js” … ></script> <script type=quot;text/javascriptquot;></script> </head> <body> … </body> </html>
  44. 44. <html> <head> <title>Test</title> </head> <body> … <script src=“1+2.js” … ></script> </body> </html>
  45. 45. www.fiddler2.com http://www.fiddler2.com/fiddler2/addons/neXper t.asp
  46. 46. Your feedback is important!
  47. 47. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×