High-performance web platform 4-556 High-performance web platform Tobin Titus - @tobint Internet Explorer Program Manager tobint@microsoft.com

Agenda Physical Performance Limits Web Runtime Architecture Demos: Problems and Solutions

The Physics of Fast Physical Factors in Performance Decision Making

Network Utilization and Limits Source: Network Utilization and Limits Bandwidth, latency, and limited-data plans affect network performance

Speed and Responsiveness Effective utilization of resources affect both real and perceived performance Utilization CPU Time to Glass (.65 seconds) Elapsed Page Load Time (1.81 seconds) CPU Time (1.39 seconds) Idle CPU Time (0.42 seconds)

Memory Utilization Responsible memory management is crucial when targeting low-cost devices with your sites and apps

Power Consumption Let it rest! Power efficiency can drain your users’ battery and decrease satisfaction with your application VSync Utilization GPU Utilization CPU

Targets Matter It is increasingly imperative to identify your target devices, customers, and scenarios and prioritize the experience you want to deliver

Web Runtime Architecture

Web Runtime Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree 1 2 7 4 3 8 9 5 6 Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree Display Tree 1 2 7 4 3 8 9 5 6 Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Web Platform Architecture DMANIP Hit Testing CSS Cascade Input 1 2 7 4 3 8 9 5 6 DOM Tree 1 2 7 4 3 8 9 5 6 Display Tree Networking / Cache Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript

Event Tracing for Windows (ETW) Build 2012 11/17/2018 Event Tracing for Windows (ETW) Event Tracing for Windows (ETW) allows us to see how our the web platform architecture Session Control controller Enable / Disable Windows ETW Provider A Session Buffer Trace Files Provider B Provider C consumer © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

Measuring Performance F12 Developer Tools Testing tools help you analyze and measure performance Windows Performance Toolkit

Performance in the Real World Real-world problems and solutions

Network Optimization Getting your content to the user

Navigation Timing Prompt for Unload Redirect AppCache DNS TCP Request connectStart loadEventEnd navigationStart secureConnectionStart loadEventStart redirectStart connectEnd redirectEnd requestStart fetchStart responseStart responseEnd Prompt for Unload Redirect AppCache DNS TCP Request Response Processing Load Unload DOMContentLoaded unloadEventStart domainLookupStart unloadEventEnd domainLookupEnd domLoading domInteractive domComplete domContentLoadedEventStart domContentLoadedEventEnd

Average Payload 1.7 MB Total Size, 46% Cacheable Source: Average Payload 93 resource requests, 16 Hosts 1.7 MB Total Size, 46% Cacheable

Demos: Network Optimization

Speed and Responsiveness Effective processor and graphics card utilization

CPU/GPU: A Tale of Two News Sites 35 seconds 4.5 seconds

Demos: Speed and Responsiveness

Memory Management

Download Size vs Memory Size Dimensions: 683 x 1024 Color Space: RGBA Disk Size: 557 KB Memory: width * height * 4 Download sizes may seem small, but image memory adds up very quickly 2.67 MB Decoded

Images: Downloading Request Partial Response Received Decoding

Images: Continue Downloading Request Request Partial Response Received Partial Response Received Decoding

Images : Decoding Request Partial Response Received

Images: Processing Request Partial Response Received Decoding Processing

Images: Copy to the GPU Request Partial Response Received Copy to GPU Decoding Processing

Images: Download to Display Request Partial Response Received Partial Response Received Copy to GPU Display Decoding Processing

Images: Download to Display Request Partial Response Received Partial Response Received Copy to GPU Display Decoding Processing Downloads Stylesheet HTML Doc Image CPU Usage Decode UI Thread GPU Copy GPU Usage GPU Usage

RGB to YCbCr Color Conversion Image Formats Matter Image formats matter for both memory and CPU utilization RGB YCbCr (YUV) Encode & Save RGB to YCbCr Color Conversion Chroma Subsampling DCT / Quantization Huffman Encoding

JPEG – From Download to Display Copy to GPU Request Partial Data Display Processing Decoding IE 10 Before IE 11, JPEG images were decoded, upsampled and color-converted on the CPU before copying them to the GPU In IE11, we’ve hardware accelerated JPEG. Now JPEG has all the benefit of small file size as well as decreased CPU decoding, smaller graphics memory footprint, and faster GPU copy operations Copy to GPU Request Partial Data Display Decoding Processing IE 11 Huffman Decoding Dequantization / iDCT Chroma Upsampling YCbCr to RGB Color Conversion Decode

Demos: Memory Management

Summary

Resources Overview Concepts JavaScript Patterns Microsoft Guidance High Performance Websites Steve Souders, September 2007 Event Faster Websites: Best Practices Steve Souders, June 2009 High Performance Browser Networking Ilya Grigorik, September 2013 JavaScript Patterns High Performance JavaScript Nicholas Zakas, March 2010 JavaScript the Good Parts Douglas Crockford, May 2008 Stoyan Stefanov, September 2010 JavaScript Cookbook Shelley Powers, July 2010 Microsoft Guidance Windows Store App: JavaScript Best Practices MSDN, December 2012 Performance Tricks to Make Apps & Sites Faster Jatinder Mann, Build 2012 50 Performance Tricks for Windows Store Apps Jason Weber, Build 2011 Engineering Excellence Performance Guidance Jason Weber, EE Forum 2011 Internet Explorer Architectural Overview Jason Weber, PDC 2011 W3C Web Performance Web Performance Working Group Homepage Navigation Timing Specification Blog Posts Measuring Performance with ETW/XPerf Measuring Performance in Lab Environments Browser Subsystems Overview What Common Benchmarks Measure Tools Windows Performance Toolkit Fiddler Web Debugger Contact Tobin Titus Twitter: @tobint Email: tobint@microsoft.com

Your Feedback is Important Build 2014 11/17/2018 Your Feedback is Important Fill out an evaluation of this session and help shape future events. Scan the QR code to evaluate this session on your mobile device. You’ll also be entered into a daily prize drawing! © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

© 2014 Microsoft Corporation. All rights reserved © 2014 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.