1 / 43

Web Runtime Performance

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.

ciaran-caldwell
Download Presentation

Web Runtime Performance

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. Web Runtime Performance Tobin Titus Program Manager 3-068

  2. Agenda • Defining Performance • Web Runtime Architecture • Performance Measurement Tools • Walkthroughs / Demos

  3. Performance Exercise How much do you know about performance?

  4. Travel Site Content • Anonymized data from each of the travel sites Other jQuery YUI Prototype ExtJS Scriptaculous

  5. Travel Site Content – Total Size • Total size differs by almost a factor of four Other jQuery YUI Prototype ExtJS Scriptaculous

  6. Travel Site Content – Number Elements • Constructed DOM elements differs by over a factor of four Other jQuery YUI Prototype ExtJS Scriptaculous

  7. Travel Site Content – CSS Rules • Total CSS rules vary by nearly a factor of five Other jQuery YUI Prototype ExtJS Scriptaculous

  8. Travel Site Content – Image Files • The image files downloaded on the sites vary by a factor of eleven Other jQuery YUI Prototype ExtJS Scriptaculous

  9. Travel Site Content – Script Lines • Formatted JavaScript lines vary by almost a factor of eight Other jQuery YUI Prototype ExtJS Scriptaculous

  10. Travel Site Content – Script Libraries • Every site uses jQuery at the minimum but sites #1 and #2 are using additional libraries and frameworks as well. Other jQuery YUI Prototype ExtJS Scriptaculous

  11. Which site is fastest?

  12. Site #5 Is Fastest • Site #5 is the fastest despite having three times more script lines than sites #3 and #4 Other jQuery YUI Prototype ExtJS Scriptaculous

  13. Which site is slowest?

  14. Site #2 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. Other jQuery YUI Prototype ExtJS Scriptaculous

  15. Web Performance Factors What Makes Sites Faster?

  16. Core 1 Core 2 GPU Core 3 Core 4

  17. Web Runtime Architecture

  18. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  19. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  20. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  21. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  22. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  23. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  24. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  25. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  26. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  27. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  28. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  29. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  30. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  31. Touch Hit Testing CSS Cascade Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Compositing Painting 2 7 2 7 3 4 8 9 3 4 8 9 5 6 5 6 DOM API & Capabilities JavaScript

  32. Event Tracing for Windows (ETW) Session Control controller • Event Tracing for Windows (ETW) allows us to see into the web platform architecture Enable / Disable Windows ETW Session Buffer Provider A Trace Files Provider B Provider C consumer

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

  34. Demos • Exposing Runtime Performance Patterns with Windows Performance Toolkit

  35. Summary • 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

  36. Additional IE Talks • 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

  37. Resources

  38. Questions? • Tobin Titus Twitter: @tobint Email: tobint@microsoft.com

  39. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!

More Related