slide1
Download
Skip this Video
Download Presentation
Building High-Performance Web Applications and Sites

Loading in 2 Seconds...

play fullscreen
1 / 69

T53F: Building High-Performance Web Applications and Sites - PowerPoint PPT Presentation


  • 64 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'T53F: Building High-Performance Web Applications and Sites' - kyoko


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
building high performance web applications and sites

Building High-Performance Web Applications and Sites

John Hrvatin

Lead Program Manager

Internet Explorer

[email protected]

objectives and takeaways
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
acknowledgements
Acknowledgements

"If I have seen further it is only by standing on the shoulders of giants."

- Isaac Newton

topics
Topics
  • CSS performance
  • Optimizing symbol resolution
  • Javascript coding inefficiencies
  • HTTP performance
topics1
Topics
  • CSS performance
  • Optimizing symbol resolution
  • Javascript coding inefficiencies
  • HTTP performance
css performance minimize included styles
CSS PerformanceMinimize included styles
  • Unused styles increase download size
  • Browser must parse and match all selectors
    • Failures are expensive!
css performance simplify selectors
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

css performance simplify selectors1
CSS PerformanceSimplify selectors
  • table tr td ulli {color: green;}
  • li#pass {color: green;}
  • ulli {color: purple;}
  • ul > li {color: purple;}
css performance don t use expressions
CSS PerformanceDon\'t use expressions
  • Slow – evaluated frequently
  • Not supported in IE8 standards mode!
css performance minimize page re layouts
CSS PerformanceMinimize page re-layouts
  • Poor user experience as content moves
  • Browser performs unnecessary work
css performance takeaways
CSS PerformanceTakeaways
  • Minimize included styles
  • Use less-complicated selectors
  • Don’t use expressions
  • Minimize page re-layouts
  • Simplify!
topics2
Topics
  • CSS Performance
  • Optimizing Symbol Resolution
  • JavaScript Coding Inefficiencies
  • HTTP Performance
optimizing symbol resolution lookup chains
Optimizing Symbol ResolutionLookup chains
  • Scope
    • var name
  • Prototype
    • obj.name

Cost

DOM

Global

Prototype

Intermediate

Instance

Local

optimizing symbol resolution local variables
Optimizing Symbol ResolutionLocal variables
  • function WorkOnLocalVariable(){
    • localVariable = foo();
    • return ( localVariable + 1 );
  • }

localVariable

localVariable

optimizing symbol resolution local variables declare them as local
Optimizing Symbol ResolutionLocal variables: Declare them as local
  • function WorkOnLocalVariable2(){
    • var localVariable = foo();
    • return ( localVariable + 1 );
  • }

varlocalVariable

localVariable

optimizing symbol resolution implicit lookups
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

=

+=

+=

+=

optimizing symbol resolution implicit lookups batch changes
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

=

optimizing symbol resolution multiple dom lookups
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

optimizing symbol resolution multiple dom lookups cache references
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

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

Work

optimizing symbol resolution function lookups cache pointers
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

optimizing symbol resolution takeaways
Optimizing Symbol ResolutionTakeaways
  • Watch for expensive name lookups
  • Cache repeated lookups to local variables
  • Optimize only when needed
  • Consider maintainability
visual studio 2010 profiler
Visual Studio 2010 Profiler
  • New summary page depicting performance bottlenecks
visual studio 2010 profiler1
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/
topics3
Topics
  • CSS Performance Considerations
  • Optimizing Symbol Resolution
  • JavaScript Coding Inefficiencies
  • HTTP Performance
javascript coding inefficiencies parsing json
JavaScript Coding InefficienciesParsing JSON
  • With eval
    • Requires new script execution context (slow)
    • Less secure
  • With custom library
    • More secure, but even slower
javascript coding inefficiencies parsing json use the native methods
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
javascript coding inefficiencies the switch statement
JavaScript Coding InefficienciesThe switch statement
  • switch(option)
  • {
  • case 1: …
  • case 2: …
  • case 3: …
  • case 1000: …
  • }

case 1000:

javascript coding inefficiencies the switch statement use a lookup table
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]();

javascript coding inefficiencies property access methods
JavaScript Coding InefficienciesProperty access methods
  • var property = foo();
  • this.getProperty = function()
  • {
  • return property;
  • }
  • this.setProperty = function(value)
  • {
  • property = value;
  • }
javascript coding inefficiencies property access methods use direct access
JavaScript Coding InefficienciesProperty access methods: Use direct access
  • this.property = foo();
javascript coding inefficiencies property access methods1
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

javascript coding inefficiencies minimize dom interaction
JavaScript Coding InefficienciesMinimize DOM interaction
  • Scope
    • var name
  • Prototype
    • obj.name

Cost

DOM

Global

Prototype

Intermediate

Instance

Local

javascript coding inefficiencies minimize dom interaction1
JavaScript Coding InefficienciesMinimize DOM interaction

Better in IE8

  • Scope
    • var name
  • Prototype
    • obj.name

Cost

DOM

Global

Prototype

Intermediate

Instance

Local

javascript coding inefficiencies minimize dom interaction3
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]

javascript coding inefficiencies minimize dom interaction4
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]

javascript coding inefficiencies smart use of dom methods
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
javascript coding inefficiencies smart use of dom methods1
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];

javascript coding inefficiencies smart use of dom methods2
JavaScript Coding InefficienciesSmart use of DOM methods

function LoopChildren2(elm)

{

    • var node = elm.firstChild;
    • while(node != null)
    • {
      • node = node.nextSibling;
    • }
  • }

node.nextSibling;

javascript coding inefficiencies use queryselectorall for groups
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

javascript coding inefficiencies takeaways
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
topics4
Topics
  • CSS Performance
  • Optimizing Symbol Resolution
  • JavaScript Coding Inefficiencies
  • HTTP Performance
http performance typical visit
HTTP PerformanceTypical visit
  • Request from server/cache
    • JavaScript
    • CSS
    • Images
    • HTML
  • In browser
    • Layout
    • Execute script
    • Additional downloads
http performance http compression use it
HTTP PerformanceHTTP compression: Use it

Request

Response

HTTP/1.1 200 OK

Content-Length: 3479

Expires: -1

Date: Tue, 24 Apr 2007 21:30:46 GMT

Content-Type: text/html; charset=utf-8

Pragma: no-cache

Content-Encoding: gzip

GET / HTTP/1.1

Accept: */*

Accept-Language: en-us

UA-CPU: x86

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 7.0)

Host: www.live.com

  • Accept-Encoding: gzip, deflate
  • Content-Encoding: gzip
http performance scaled images
HTTP PerformanceScaled images
  • <html>
    • <head>
      • <title>Test</title>
    • </head>
    • <body>
      • <!-- icon.gif dimensions: 500 x 400 -->
      • <imgsrc="icon.gif" width="50" height="40" />
    • </body>
  • </html>

500 x 400

width="50" height="40"

http performance scaled images use sized copies
HTTP PerformanceScaled images: Use sized copies
  • <html>
    • <head>
      • <title>Test</title>
    • </head>
    • <body>
      • <!-- icon2.gif dimensions: 50 x 40 -->
      • <imgsrc="icon2.gif" width="50" height="40" />
    • </body>
  • </html>

50 x 40

width="50" height="40"

http performance file linking
HTTP PerformanceFile linking
  • <html>
    • <head>
      • <title>Test</title>
      • <script src= type="text/javascript"></script>
    • </head>
    • <body>
    • </body>
  • </html>

<script src=“1.js” … ></script>

<script src=“2.js” … ></script>

<link href=“1.css” … ></link>

<link href=“2.css” … ></link>

http performance file linking link one css file and one js file
HTTP PerformanceFile linking: Link one CSS file and one JS file
  • <html>
    • <head>
      • <title>Test</title>
      • <script type="text/javascript"></script>
    • </head>
    • <body>
    • </body>
  • </html>

<script src=“1+2.js” … ></script>

<link href=“1+2.css” … ></link>

http performance many images
HTTP PerformanceMany images
  • <html>
    • <head>
      • <title>Test</title>
    • </head>
    • <body>
      • <imgsrc="a.gif" /> Item 1
      • <imgsrc="b.gif" /> Item 2
    • </body>
  • </html>

<imgsrc="a.gif" />

<imgsrc="b.gif" />

http performance many images combine and mask sprites
HTTP PerformanceMany images: Combine and mask (sprites)
  • <head>
    • <title>Test</title>
    • <style type="text/css">
      • .a, .b { width: 10; height: 10 }
      • .a, .b { background-image: "abc.gif" }
      • .a { background-position: 0 0 }
      • .b { background-position: 0 -10 }
    • </style>
  • </head>
  • <body>
    • <div class="a"></div> Item 1
    • <div class="b"></div> Item 2
  • </body>

.a, .b { width: 10; height: 10 }

.a, .b { background-image: "abc.gif" }

.a { background-position: 0 0 }

.b { background-position: 0 -10 }

<div class="a"></div>

<div class="b"></div>

http performance repeat visits
HTTP PerformanceRepeat 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
http performance repeat visits use conditional requests

HTTP/1.1 304 Not Modified

Content-Type: image/jpeg

Last-Modified:

Wed, 22 Feb 2006 04:15:54 GMT

GET /images/banner.jpg HTTP/1.1

Host: www.microsoft.com

If-Modified-Since:

Wed, 22 Feb 2006 04:15:54 GMT

HTTP PerformanceRepeat visits: Use conditional requests

Request

Response

http performance repeat visits provide cacheable content

GET /images/banner.jpg HTTP/1.1

HTTP/1.1 200 OK

Content-Type: image/jpeg

Expires: Fri, 12 Jun 2009 02:50:50 GMT

GET /images/banner.jpg HTTP/1.1

Host: www.microsoft.com

HTTP PerformanceRepeat visits: Provide cacheable content

Request

Response

Request

Response

No response:

Request serviced from cache

http performance script blocking
HTTP PerformanceScript blocking

Better in IE8

  • <html>
    • <head>
      • <title>Test</title>
      • <script type="text/javascript"></script>
    • </head>
    • <body>
    • </body>
  • </html>

<script src=“1+2.js” … ></script>

http performance script blocking1
HTTP PerformanceScript blocking
  • <html>
    • <head>
      • <title>Test</title>
    • </head>
    • <body>
    • </body>
  • </html>

<script src=“1+2.js” … ></script>

http performance tools
HTTP PerformanceTools
  • Fiddler
    • Inspect network traffic
    • www.fiddler2.com
  • neXpert
    • Fiddler plug-in to aid performance testing
    • http://www.fiddler2.com/fiddler2/addons/neXpert.asp

NEW!!!

http performance takeaways
HTTP PerformanceTakeaways
  • 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
summary
Summary
  • 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
slide68

Please Complete an Evaluation FormYour feedback is important!

  • Evaluation forms can be found on each chair
  • Temp Staff at the back of the room have additional evaluation form copies
slide69

© 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.

ad