Download
1 / 69

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


  • 63 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


Webpage performance ie8 cpu usage top 100 sites
Webpage PerformanceIE8 CPU usage: Top 100 sites


Webpage performance ie8 cpu usage top ajax sites
Webpage PerformanceIE8 CPU usage: Top AJAX sites


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


Minimize page re layouts

demo

Minimize Page Re-layouts


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


Ie8 javascript profiler

demo

IE8 JavaScript Profiler


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


Json performance

demo

JSON Performance


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 interaction2
JavaScript Coding InefficienciesMinimize DOM interaction

Trident (MSHTML)

DOM

JScript Engine


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


    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


    © 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