Prototype. ExtJS. Other. Scriptaculous. Web Performance Factors. What Makes Sites Faster? Core 1. Core 2. Core 3. Core 4. GPU. Web Runtime Architecture.

Alex2发布于2018/06/10 00:00

注脚

1.

2.Web Runtime Performance Tobin Titus Program Manager 3-068

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

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

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

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

7.Anonymized data from each of the travel sites Travel Site Content Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

8.Total size differs by almost a factor of four Travel Site Content – Total Size Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

9.Constructed DOM elements differs by over a factor of four Travel Site Content – Number Elements Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

10.Total CSS rules vary by nearly a factor of five Travel Site Content – CSS Rules Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

11.The image files downloaded on the sites vary by a factor of eleven Travel Site Content – Image Files Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

12.Formatted JavaScript lines vary by almost a factor of eight Travel Site Content – Script Lines Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

13.Every site uses jQuery at the minimum but sites #1 and #2 are using additional libraries and frameworks as well. Travel Site Content – Script Libraries Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

14.Which site is fastest?

15.Site #5 is the fastest despite having three times more script lines than sites #3 and #4 Site #5 Is Fastest Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

16.Which site is slowest?

17.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 Slowest Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries 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 YUI jQuery Prototype ExtJS Other Scriptaculous

18.Web Performance Factors What Makes Sites Faster?

19.Core 1 Core 2 Core 3 Core 4 GPU

20.Web Runtime Architecture

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

37.Exposing Runtime Performance Patterns with Windows Performance Toolkit Demos

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

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

40.Resources Overview Concepts High Performance Websites Steve Souders , September 2007 Event Faster Websites: Best Practices Steve Souders , June 2009 JavaScript Patterns High Performance JavaScript Nicholas Zakas , March 2010 JavaScript the Good Parts Douglas Crockford , May 2008 JavaScript Patterns 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 Performance Timeline Specification Navigation Timing Specification Blog Posts Measuring Performance with ETW/ XPerf Measuring Performance in Lab Environments Browser Subsystems Overview What Common Benchmarks Measure Tools WPT Standalone SDK Windows Performance Toolkit Fiddler Web Debugger

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

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

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

user picture
  • Alex2
  • Apparently, this user prefers to keep an air of mystery about them.

相关Slides