Web Runtime Performance

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