Your SlideShare is downloading. ×
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Building High Perf Web Apps - IE8 Firestarter
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building High Perf Web Apps - IE8 Firestarter

1,683

Published on

Video recordings of this session can be found here: …

Video recordings of this session can be found here:
1. http://channel9.msdn.com/tags/IE%208%20Firestarter - (Developer)
2. http://edge.technet.com/Tags/IE+8+Firestarter/ - (IT Pro's)

If you need to download this file, or need more infomation contact Mithun Dhar via http://blogs.msdn.com/mithund

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,683
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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. 2
  • 2. 3
  • 3. Building High-Performance Web Applications and Sites John Hrvatin, Lead Program Manager johnhrv@microsoft.com 4
  • 4. Session Objective(s): How to make your site faster today Principles to remember when building sites Key Takeaways Suggestions help in ALL browsers No magic solutions Consider maintainability 5
  • 5. “…We are like dwarfs on the shoulders of giants, so that we can see more than they, and things at a greater distance, not by virtue of any sharpness of sight on our part, or any physical distinction, but because we are carried high and raised up by their giant size.quot; - Bernard of Chartres 1124 6
  • 6. IE8 CPU usage: Top 100 Sites Layout, Rende ring, Formattin 16% g, … JScript & DOM 84% 7
  • 7. IE8 CPU usage: Top AJAX Sites Layout, Rende ring, Formattin g, … 33% 67% JScript & DOM 8
  • 8. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance 9
  • 9. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance 10
  • 10. Minimize included styles Unused styles increase download size Browser must parse and match all selectors Failures are expensive! 11
  • 11. Simplify selectors Complex element selectors are slow When possible: Use class- or ID-based selectors Make element selectors as simple as possible Use child instead of descendent selectors Do not mix RTL and LTR styles Minimizing included styles makes this easier 12
  • 12. Simplify selectors table tr td ul li {color: green;} li#pass {color: green;} ul li {color: purple;} ul > li {color: purple;}
  • 13. Don't use expressions Slow – evaluated frequently Not supported in IE8 Standards Mode! 14
  • 14. Minimize Page Re-layouts Poor user experience as content moves Browser performs unnecessary work 15
  • 15. 16
  • 16. Takeaways Minimize included styles Use less-complicated selectors Don’t use expressions Minimize page re-layouts Simplify! 17
  • 17. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance 18
  • 18. Lookup chains Scope Prototype var name obj.name DOM Global Prototype Intermediate … … Cost Instance Local 19
  • 19. Local variables function WorkOnLocalVariable() { localVariable = foo(); return ( localVariable + 1 ); }
  • 20. Local variables: Declare them as local function WorkOnLocalVariable2() { var localVariable = foo(); return ( localVariable + 1 ); }
  • 21. Implicit lookups 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(); += }
  • 22. Implicit lookups: Batch changes 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; }
  • 23. Multiple DOM lookups 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; }
  • 24. Multiple DOM lookups: Cache references 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; }
  • 25. Function lookups function IterateWorkOverCollection() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work Work(myCollection[i]); } }
  • 26. Function lookups: Cache pointers function IterateWorkOverCollection2() { var funcWork = Work; var funcWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork funcWork(myCollection[i]); } }
  • 27. Takeaways Watch for expensive name lookups Cache repeated lookups to local variables Optimize only when needed Consider maintainability 28
  • 28. 29
  • 29. CSS Performance Considerations Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance 30
  • 30. Parsing JSON With eval Requires new script execution context (slow) Less secure With custom library More secure, but even slower 31
  • 31. Parsing JSON: Use the native methods Built-in JSON methods: JSON.parse() JSON.stringify() toJSON() on prototypes of Date, Number, String, and Boolean Native equivalent of the reference parser from http://wiki.ecmascript.org/doku.php?id=es3.1:json _support As safe as http://www.json.org/json_parser.js but faster 32
  • 32. 33
  • 33. The switch statement switch(option) { case 1: … case 2: … case 3: … … case 1000: … }
  • 34. The switch statement: Use a lookup table var lookup = { 1: function(){…} 2: function(){…} 3: function(){…} … 1000: function(){…} } try { lookup[option](); lookup [option](); } catch(e) { // Default operation }
  • 35. Property access methods var property = foo(); this.getProperty = function() { return property; } this.setProperty = function(value) { property = value; }
  • 36. Property access methods: Use direct access this.property = foo();
  • 37. Property access methods Instantiating DOM functions Problems: Costly (in CPU cycles) Consider: Caching function pointers, batching changes Why: Generic Script Interface 38
  • 38. Minimize DOM interaction Scope Prototype var name obj.name DOM Global Prototype Intermediate … … Cost Instance Local 39
  • 39. Minimize DOM interaction Scope Prototype var name obj.name DOM Global Prototype Intermediate … … Cost Instance Local 40
  • 40. Minimize DOM interaction Trident (MSHTML) DOM JScript Engine 41
  • 41. Minimize DOM interaction 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; }
  • 42. Minimize DOM interaction 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; }
  • 43. Smart use of DOM Methods Smart use of DOM methods can minimize overall DOM interaction nextSibling() better than childNodes[i] querySelectorAll() better for element groups 44
  • 44. Smart use of DOM methods function LoopChildren(elm) { var nodes = elm.childNodes; var length = nodes.length; for(var i = 0; i < length; i++) { var node = nodes[i]; nodes[i]; … } }
  • 45. Smart use of DOM methods function LoopChildren2(elm) { var node = elm.firstChild; while(node != null) { … node = node.nextSibling; } }
  • 46. Use querySelectorAll for groups 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; } }
  • 47. Takeaways Use the native JSON object Turn large switch statements into lookups Avoid property access methods Minimize DOM interaction Use querySelectorAll for groups Optimize only when needed Consider maintainability 49
  • 48. CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance 50
  • 49. Typical visit Request from Server / Cache JavaScript CSS Images HTML In Browser Layout Execute Script Additional downloads 51
  • 50. HTTP compression: Use it Response Request 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 52
  • 51. Scaled images <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>
  • 52. Scaled images: Use sized copies <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>
  • 53. File linking <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>
  • 54. File linking: link one CSS file and one JS file <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>
  • 55. Many images <html> <head> <title>Test</title> </head> <body> … <img src=quot;a.gifquot; /> Item 1 <img src=quot;b.gifquot; /> Item 2 … </body> </html>
  • 56. Many images: Combine and mask (sprites) <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>
  • 57. Repeat visits Conditional HTTP Requests Plain HTTP Request Pragma: no-cache Time Conditional If-modified-since: date,time Provide cacheable content Time Conditional Expires: date,time Max-age: #seconds 59
  • 58. Repeat visits: Use conditional requests 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 60
  • 59. Repeat visits: Provide cacheable content 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 61
  • 60. Script blocking <html> <head> <title>Test</title> <script src=“1+2.js” … ></script> <script type=quot;text/javascriptquot;></script> </head> <body> … </body> </html>
  • 61. Script blocking <html> <head> <title>Test</title> </head> <body> … <script src=“1+2.js” … ></script> </body> </html>
  • 62. Tools Fiddler Inspect network traffic www.fiddler2.com neXpert Fiddler plug-in to aid performance testing http://www.fiddler2.com/fiddler2/addons/neXper t.asp 64
  • 63. Takeaways Reduce the number of requests Combine external scripts, styles, and images Use caching Reduce the size of requests Use HTTP compression Use conditional requests Avoid blocking factors Put script at end of HTML 65
  • 64. Identify the performance bottleneck Network / Bandwidth – using Fiddler JavaScript – using Developer Tools Aggressive DOM access – using Developer Tools Reduce, Simplify, Re-factor Reduce the bytes sent between the client/server Simplify your code to avoid costly JavaScript and CSS constructs Cache DOM properties and function pointers 66

×