Your SlideShare is downloading. ×

Building High Performance Web Applications and Sites

1,393

Published on

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

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,393
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
117
Comments
0
Likes
8
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. johnhrv@microsoft.com
  • 2. Layout, Rende ring, Formattin 16% g, … JScript & DOM 84%
  • 3. Layout, Rende ring, Formattin g, … 33% 67% JScript & DOM
  • 4. CSS performance Optimizing symbol resolution Javascript coding inefficiencies HTTP performance
  • 5. table tr td ul li {color: green;} li#pass {color: green;} ul li {color: purple;} ul > li {color: purple;}
  • 6. Minimize included styles Use less-complicated selectors Don’t use expressions Minimize page re-layouts
  • 7. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance
  • 8. DOM Global Prototype Intermediate … … Cost Instance Local
  • 9. function WorkOnLocalVariable() { localVariable = foo(); return ( localVariable + 1 ); }
  • 10. function WorkOnLocalVariable2() { var localVariable = foo(); return ( localVariable + 1 ); }
  • 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. 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. 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. 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. function IterateWorkOverCollection() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work Work(myCollection[i]); } }
  • 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. http://channel9.msdn.com/pdc2008/TL24/
  • 18. CSS Performance Considerations Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance
  • 19. http://wiki.ecmascript.org/doku.php?id=es3.1:json _support http://www.json.org/json_parser.js
  • 20. switch(option) { case 1: … case 2: … case 3: … … case 1000: … }
  • 21. var lookup = { 1: function(){…} 2: function(){…} 3: function(){…} … 1000: function(){…} } try { lookup[option](); lookup [option](); } catch(e) { // Default operation }
  • 22. var property = foo(); this.getProperty = function() { return property; } this.setProperty = function(value) { property = value; }
  • 23. this.property = foo();
  • 24. DOM Global Prototype Intermediate … … Cost Instance Local
  • 25. DOM Global Prototype Intermediate … … Cost Instance Local
  • 26. Trident (MSHTML) DOM JScript Engine
  • 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. 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. 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. function LoopChildren2(elm) { var node = elm.firstChild; while(node != null) { … node = node.nextSibling; } }
  • 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. Use the native JSON object Turn large switch statements into lookups Avoid property access methods Minimize DOM interaction Use querySelectorAll for groups
  • 33. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance
  • 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. <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. <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. <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. <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. <html> <head> <title>Test</title> </head> <body> … <img src=quot;a.gifquot; /> Item 1 <img src=quot;b.gifquot; /> Item 2 … </body> </html>
  • 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. 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. 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. <html> <head> <title>Test</title> <script src=“1+2.js” … ></script> <script type=quot;text/javascriptquot;></script> </head> <body> … </body> </html>
  • 44. <html> <head> <title>Test</title> </head> <body> … <script src=“1+2.js” … ></script> </body> </html>
  • 45. www.fiddler2.com http://www.fiddler2.com/fiddler2/addons/neXper t.asp
  • 46. Your feedback is important!
  • 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.

×