Download presentation
Presentation is loading. Please wait.
2
High-performance web platform
4-556 High-performance web platform Tobin Titus Internet Explorer Program Manager
3
Agenda Physical Performance Limits Web Runtime Architecture
Demos: Problems and Solutions
4
The Physics of Fast Physical Factors in Performance Decision Making
5
Network Utilization and Limits
Source: Network Utilization and Limits Bandwidth, latency, and limited-data plans affect network performance
6
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)
7
Memory Utilization Responsible memory management is crucial when targeting low-cost devices with your sites and apps
8
Power Consumption Let it rest! Power efficiency can drain your users’ battery and decrease satisfaction with your application VSync Utilization GPU Utilization CPU
9
Targets Matter It is increasingly imperative to identify your target devices, customers, and scenarios and prioritize the experience you want to deliver
10
Web Runtime Architecture
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
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
24
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
25
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.
26
Measuring Performance
F12 Developer Tools Testing tools help you analyze and measure performance Windows Performance Toolkit
27
Performance in the Real World
Real-world problems and solutions
28
Network Optimization Getting your content to the user
29
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
30
Average Payload 1.7 MB Total Size, 46% Cacheable
Source: Average Payload 93 resource requests, 16 Hosts 1.7 MB Total Size, 46% Cacheable
31
Demos: Network Optimization
32
Speed and Responsiveness
Effective processor and graphics card utilization
33
CPU/GPU: A Tale of Two News Sites
35 seconds 4.5 seconds
34
Demos: Speed and Responsiveness
35
Memory Management
36
Download Size vs Memory Size
Dimensions: x 1024 Color Space: RGBA Disk Size: KB Memory: width * height * 4 Download sizes may seem small, but image memory adds up very quickly 2.67 MB Decoded
37
Images: Downloading Request Partial Response Received Decoding
38
Images: Continue Downloading
Request Request Partial Response Received Partial Response Received Decoding
39
Images : Decoding Request Partial Response Received
40
Images: Processing Request Partial Response Received
Decoding Processing
41
Images: Copy to the GPU Request Partial Response Received
Copy to GPU Decoding Processing
42
Images: Download to Display
Request Partial Response Received Partial Response Received Copy to GPU Display Decoding Processing
43
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
44
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
45
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
46
Demos: Memory Management
47
Summary
48
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
49
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.
50
© 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.
Similar presentations
