Building a high performance front end is a balancing act. You need to understand all the different moving parts and subsystems in the browser and how they interact with each other. Small changes can significantly impact page and app load time, memory consumption, and processor use which has a huge impact on your user’s experience! In this session, we will dive into the subsystems of the browser and learn to optimize performance on sites and in web apps. We will also deep dive into the new performance analyzing tools available expose good and bad run-time patterns for your sites and web apps, and provide users with a fast and fluid experience.

1. The Perf
Doctor
josh holmes
joshholmes.com
@joshholmes
josh.holmes@microsoft.com

2. Josh Holmes
@joshholmes
josh.holmes@microsoft.com
http://www.joshholmes.com
http://slideshare.net/joshholmes

3. #zen

4. #yum

5. #yum

6. #yum

7. #hero

8. #hero

9. #hero

10. #holycowdidthatjusthappen

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

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

15. • 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
YUIjQuery Prototype ExtJS OtherScriptaculous

16. • 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
YUIjQuery Prototype ExtJS OtherScriptaculous

17. • 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
YUIjQuery Prototype ExtJS Scriptaculous Other

18. • 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
YUIjQuery Prototype ExtJS Scriptaculous Other

19. • 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
YUIjQuery Prototype ExtJS Scriptaculous Other

20. • 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
YUIjQuery Prototype ExtJS Scriptaculous Other

21. • 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
YUIjQuery Prototype ExtJS OtherScriptaculous

22. Which site is fastest?

23. • 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
YUIjQuery Prototype ExtJS Scriptaculous Other

24. Which site is slowest?

25. • 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
YUIjQuery Prototype ExtJS Scriptaculous Other

26. Web Performance Factors
What Makes Sites Faster?

27. Core1 Core2
Core3 Core4
GPU

28. Web Runtime
Architecture

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

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

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

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

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

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

35. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

36. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

37. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

38. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

39. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

40. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

41. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

42. Networking Parsers
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display
Tree
Compositing
DOM API
&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade

43. Always start with a good profiler
Windows Performance Toolkit
http://aka.ms/WinPerfKit
F12 UI Responsiveness Tool

44. Event Tracing for
Windows (ETW)
allows us to see into
the web platform
architecture
Event Tracing for Windows (ETW)
controller
ProviderA
ProviderB
ProviderC
TraceFiles
Session
Buffer
Windows
consumer
ETW
Enable /
Disable
Session Control

45. F12 Developer Tools

46. F12 Developer Tools

47. F12 Developer Tools

48. F12 Developer Tools

49. 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/MeasureBrowser
Perf

50. Where’s IE11 now?
• Dev preview
• Win 8.1
• Windows 7 - No perf tools just yet but coming with RTM
• New features
• F12 Dev Tools (like you just saw)
• UA string change
Site compatibility just works
• WebGL is awesome
• Evergreen updates
• More standards
• More GPU
• More awesomesauce

53. The Internet Explorer userAgent community recognizes,
supports, and connects passionate web developers to raise
awareness of web standards and the importance of delighting
users with rich interoperable web experiences.
http://userAgents.ie

54. #thanks

55. http://www.flickr.com/photos/-bast-/349497988/
josh holmes
joshholmes.com
@joshholmes
josh.holmes@microsoft.com