Upload
ciaran-caldwell
View
67
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Web Runtime Performance. Tobin Titus Program Manager 3-068. Agenda. Defining Performance Web Runtime Architecture Performance Measurement Tools Walkthroughs / Demos. Performance Exercise. How much do you know about performance?. Travel Site Content. - PowerPoint PPT Presentation
Citation preview
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: [email protected]?
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.