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