1 / 69

Building High-Performance Web Applications and Sites

Building High-Performance Web Applications and Sites. John Hrvatin Lead Program Manager Internet Explorer johnhrv@microsoft.com. Objectives and Takeaways. Session objective(s) How to make your site faster today Principles to remember when building sites Key takeaways

kyoko
Download Presentation

Building High-Performance Web Applications and Sites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Building High-Performance Web Applications and Sites John Hrvatin Lead Program Manager Internet Explorer johnhrv@microsoft.com

  2. Objectives and Takeaways • 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

  3. Acknowledgements "If I have seen further it is only by standing on the shoulders of giants." - Isaac Newton

  4. Webpage PerformanceIE8 CPU usage: Top 100 sites

  5. Webpage PerformanceIE8 CPU usage: Top AJAX sites

  6. Topics • CSS performance • Optimizing symbol resolution • Javascript coding inefficiencies • HTTP performance

  7. Topics • CSS performance • Optimizing symbol resolution • Javascript coding inefficiencies • HTTP performance

  8. CSS PerformanceMinimize included styles • Unused styles increase download size • Browser must parse and match all selectors • Failures are expensive!

  9. CSS PerformanceSimplify 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 Better in IE8

  10. CSS PerformanceSimplify selectors • table tr td ulli {color: green;} • li#pass {color: green;} • ulli {color: purple;} • ul > li {color: purple;}

  11. CSS PerformanceDon't use expressions • Slow – evaluated frequently • Not supported in IE8 standards mode!

  12. CSS PerformanceMinimize page re-layouts • Poor user experience as content moves • Browser performs unnecessary work

  13. demo Minimize Page Re-layouts

  14. CSS PerformanceTakeaways • Minimize included styles • Use less-complicated selectors • Don’t use expressions • Minimize page re-layouts • Simplify!

  15. Topics • CSS Performance • Optimizing Symbol Resolution • JavaScript Coding Inefficiencies • HTTP Performance

  16. Optimizing Symbol ResolutionLookup chains • Scope • var name • Prototype • obj.name Cost DOM Global Prototype … Intermediate … Instance Local

  17. Optimizing Symbol ResolutionLocal variables • function WorkOnLocalVariable(){ • localVariable = foo(); • return ( localVariable + 1 ); • } localVariable localVariable

  18. Optimizing Symbol ResolutionLocal variables: Declare them as local • function WorkOnLocalVariable2(){ • var localVariable = foo(); • return ( localVariable + 1 ); • } varlocalVariable localVariable

  19. Optimizing Symbol ResolutionImplicit lookups • function BuildUI(){ • var elm = document.getElementById('ui'); • // Clear existing contentselm.innerHTML = ''; • // Generate UI • elm.innerHTML += BuildTitle();elm.innerHTML += BuildBody();elm.innerHTML += BuildFooter(); • } 7 innerHTML References = += += +=

  20. Optimizing Symbol ResolutionImplicit lookups: Batch changes • function BuildUI2(){ • var elm = document.getElementById('ui'); • // Generate UI • var contents = BuildTitle() • + BuildBody() • + BuildFooter(); • // Replace existing contents with UIelm.innerHTML = contents; • } 1 innerHTML Reference =

  21. Optimizing Symbol ResolutionMultiple DOM lookups • function CalculateSum(){ • // Retrieve Values • var lSide = document.body.all.lSide.value;var rSide = document.body.all.rSide.value; • // Generate Resultdocument.body.all.result.value = lSide • + rSide; • } document.body.all document.body.all document.body.all

  22. Optimizing Symbol ResolutionMultiple DOM lookups: Cache references • function CalculateSum2(){ • // Cache Element Collection • var elms = document.body.all; • // Retrieve Values • var lSide = elms.lSide.value;var rSide = elms.rSide.value; • // Generate Resultelms.result.value = lSide + rSide; • } var elms = document.body.all; elms elms elms

  23. Optimizing Symbol ResolutionFunction lookups • function IterateWorkOverCollection(){ • var length = myCollection.length; • for(var i = 0; i < length; i++){ • Work(myCollection[i]); • } • } Work

  24. Optimizing Symbol ResolutionFunction lookups: Cache pointers • function IterateWorkOverCollection2(){ • var funcWork = Work; • var length = myCollection.length; • for(var i = 0; i < length; i++){ • funcWork(myCollection[i]); • } • } varfuncWork = Work; funcWork

  25. Optimizing Symbol ResolutionTakeaways • Watch for expensive name lookups • Cache repeated lookups to local variables • Optimize only when needed • Consider maintainability

  26. demo IE8 JavaScript Profiler

  27. Visual Studio 2010 Profiler • New summary page depicting performance bottlenecks

  28. Visual Studio 2010 Profiler • Ajax/JScript Profiling is now integrated with Load Test Performance Sessions • See a demo at http://channel9.msdn.com/pdc2008/TL24/

  29. Topics • CSS Performance Considerations • Optimizing Symbol Resolution • JavaScript Coding Inefficiencies • HTTP Performance

  30. JavaScript Coding InefficienciesParsing JSON • With eval • Requires new script execution context (slow) • Less secure • With custom library • More secure, but even slower

  31. JavaScript Coding InefficienciesParsing JSON: Use the native methods New in IE8 • 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.jsbut faster

  32. demo JSON Performance

  33. JavaScript Coding InefficienciesThe switch statement • switch(option) • { • case 1: … • case 2: … • case 3: … • … • case 1000: … • } case 1000:

  34. JavaScript Coding InefficienciesThe switch statement: Use a lookup table • var lookup = { • 1: function(){…} • 2: function(){…} • 3: function(){…} • … • 1000: function(){…} • } • try { • lookup [option](); • } catch(e) { • // Default operation • } lookup[option]();

  35. JavaScript Coding InefficienciesProperty access methods • var property = foo(); • this.getProperty = function() • { • return property; • } • this.setProperty = function(value) • { • property = value; • }

  36. JavaScript Coding InefficienciesProperty access methods: Use direct access • this.property = foo();

  37. JavaScript Coding InefficienciesProperty access methods • Instantiating DOM functions • Problems: Costly (in CPU cycles) • Consider: Caching function pointers, batching changes • Why: Generic script interface Better in IE8

  38. JavaScript Coding InefficienciesMinimize DOM interaction • Scope • var name • Prototype • obj.name Cost DOM Global Prototype … Intermediate … Instance Local

  39. JavaScript Coding InefficienciesMinimize DOM interaction Better in IE8 • Scope • var name • Prototype • obj.name Cost DOM Global Prototype … Intermediate … Instance Local

  40. JavaScript Coding InefficienciesMinimize DOM interaction Trident (MSHTML) DOM JScript Engine

  41. JavaScript Coding InefficienciesMinimize DOM interaction function getElementsByClassName(className, node, tag) {       …       var elements = node.getElementsByTagName(tag);       var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");       for(var i = 0, j = 0; i < elements.length; i++) {             if (pattern.test(elements[i].className)) {                   classElements[j] = elements[i];  j++;             }       }       return classElements; } var elements = node.getElementsByTagName(tag); elements.length elements[i]

  42. JavaScript Coding InefficienciesMinimizeDOM interaction function getElementsByClassName(className, node, tag) { …       var results = node.getElementsByTagName(tag);       var elements = new Array(results.length);       while (length--) elements[length] = results[length];       var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");       for(var i = 0, j = 0; i < elements.length; i++) {             if (pattern.test(elements[i].className)) {                   classElements.push(results[i]);    j++;   }       }  return classElements; } • var elements = new Array(results.length); • while (length--) elements[length] = results[length]; elements.length elements[i]

  43. JavaScript Coding InefficienciesSmart 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. JavaScript Coding InefficienciesSmart 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. JavaScript Coding InefficienciesSmart use of DOM methods function LoopChildren2(elm) { • var node = elm.firstChild; • while(node != null) • { • … • node = node.nextSibling; • } • } node.nextSibling;

  46. JavaScript Coding InefficienciesUse querySelectorAll for groups New in IE8 function doValidation2() { • // Retrieve the required elements by using Selectors • // Selects all form fields with 'required' classes • var reqs = document.querySelectorAll(".required"); • // 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 == "") • missingRequiredField = true; • } } document.querySelectorAll

  47. JavaScript Coding InefficienciesTakeaways • 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

More Related