Web Runtime Performance

Tobin TitusProgram Manager3-068

Defining PerformanceWeb Runtime ArchitecturePerformance Measurement Tools

Walkthroughs / Demos

Agenda

Performance Exercise

How much do you know about performance?

Anonymized data from each of the travel sites

Travel Site ContentTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Total size differs by almost a factor of four

Travel Site Content – Total SizeTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Constructed DOM elements differs by over a factor of four

Travel Site Content – Number ElementsTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Total CSS rules vary by nearly a factor of five

Travel Site Content – CSS RulesTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

The image files downloaded on the sites vary by a factor of eleven

Travel Site Content – Image FilesTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Formatted JavaScript lines vary by almost a factor of eight

Travel Site Content – Script LinesTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Every site uses jQuery at the minimum but sites #1 and #2 are using additional libraries and frameworks as well.

Travel Site Content – Script LibrariesTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Which site is fastest?

Site #5 is the fastest despite having three times more script lines than sites #3 and #4

Site #5 Is FastestTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Which site is slowest?

Site #2 is the slowest despite having relatively low number of elements and staying in the middle of the pack on the other metrics.

Site #2 is SlowestTotal

Size (k)

Number Element

s

CSS Rules

Image Files

Script Lines (F)

Script Librarie

s

Site #1 3,697 1,504 1,392 41 77,768

Site #2 2,278 1,100 5,325 29 39,183

Site #3 1,061 2,673 1,105 66 12,643

Site #4 1,812 4,252 1,672 12 10,284

Site #5 1,372 900 3,902 6 38,269

YUIjQuery Prototype ExtJS OtherScriptaculous

Web Performance Factors

What Makes Sites Faster?

Core 1 Core 2

Core 3 Core 4

GPU

Web Runtime Architecture

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

JavaScript

Touch

Hit Testing

InputCSS Cascade

Event Tracing for Windows (ETW) allows us to see into the web platform architecture

Event Tracing for Windows (ETW)

controller

Provider A

Provider B

Provider C

Trace Files

Session

Buffer

Windows

consumer

ETW

Enable / Disable

Session Control

Windows Performance Toolkit

Windows Performance Toolkit contains an ETW controller (Windows Performance Recorder) and an ETW consumer (Windows Performance Analyzer) that we can use to analyze performance.

Windows Performance Toolkit:http://aka.ms/performance Measuring Browser Performance:http://aka.ms/MeasureBrowserPerf

Exposing Runtime Performance Patterns with Windows Performance Toolkit

Demos

Understanding the web platform architecture is critical to performance

WPT is a powerful measurement tool

Profiling your site can help you identify your sites characteristics

Summary

Related Build Presentations

• 2-066 New IE Developer Tools

• 2-067 New Platform Capabilities for Advancing Web Development

• 3-069 Web Compatibility and Same Markup

• 3-071 Lighting up your site on Windows 8.1

• 4-072 Hyper-fast web graphics with WebGL

• 4-073 Inspecting & Debugging Using IE’s New F12 Developer Tools 

• 3-089: Building media streaming apps and sites without plug-ins using MPEG-DASH

Additional IE Talks

Resources

Overview ConceptsHigh Performance WebsitesSteve Souders, September 2007

Event Faster Websites: Best PracticesSteve Souders, June 2009

JavaScript PatternsHigh Performance JavaScriptNicholas Zakas, March 2010

JavaScript the Good PartsDouglas Crockford, May 2008

JavaScript PatternsStoyan Stefanov, September 2010

JavaScript CookbookShelley Powers, July 2010

Microsoft GuidanceWindows Store App: JavaScript Best Practices MSDN, December 2012

Performance Tricks to Make Apps & Sites FasterJatinder Mann, Build 2012

50 Performance Tricks for Windows Store AppsJason Weber, Build 2011

Engineering Excellence Performance GuidanceJason Weber, EE Forum 2011

Internet Explorer Architectural OverviewJason Weber, PDC 2011

W3C Web PerformanceWeb Performance Working Group HomepagePerformance Timeline SpecificationNavigation Timing Specification

Blog Posts1) Measuring Performance with ETW/XPerf2) Measuring Performance in Lab Environments3) Browser Subsystems Overview4) What Common Benchmarks Measure

ToolsWPT Standalone SDKWindows Performance ToolkitFiddler Web Debugger

Tobin TitusTwitter: @tobint

Email: tobint@microsoft.comQuestions?

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

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