The Perf
Doctor
josh holmes
joshholmes.com
@joshholmes
josh.holmes@microsoft.com
Josh Holmes
@joshholmes
josh.holmes@microsoft.com
http://www.joshholmes.com
http://slideshare.net/joshholmes
#zen
#yum
#yum
#yum
#hero
#hero
#hero
#holycowdidthatjusthappen
Agenda
• Defining Performance
• Web Runtime Architecture
• Performance Measurement Tools
• Walkthroughs / Demos
Performance Exercise
How much do you know about
performance?
• Anonymized data
from each of the
travel sites
Travel Site Content
Total Size
(k)
Number
Elements
CSS
Rules
Image Files
S...
• Total size differs by
almost a factor of
four
Travel Site Content – Total Size
Total Size
(k)
Number
Elements
CSS
Rules
...
• Constructed DOM
elements differs by
over a factor of four
Travel Site Content – Number Elements
Total Size
(k)
Number
El...
• Total CSS rules vary
by nearly a factor of
five
Travel Site Content – CSS Rules
Total Size
(k)
Number
Elements
CSS
Rules...
• The image files
downloaded on the
sites vary by a
factor of eleven
Travel Site Content – Image Files
Total Size
(k)
Numb...
• Formatted
JavaScript lines vary
by almost a factor
of eight
Travel Site Content – Script Lines
Total Size
(k)
Number
Ele...
• Every site uses
jQuery at the
minimum but sites
#1 and #2 are using
additional libraries
and frameworks as
well.
Travel ...
Which site is fastest?
• Site #5 is the fastest
despite having
three times more
script lines than
sites #3 and #4
Site #5 Is Fastest
Total Size
(...
Which site is slowest?
• Site #2 is the
slowest despite
having relatively
low number of
elements and
staying in the
middle of the pack
on the oth...
Web Performance Factors
What Makes Sites Faster?
Core1 Core2
Core3 Core4
GPU
Web Runtime
Architecture
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
...
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
...
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
...
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
...
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
...
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
...
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
...
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
...
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
...
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
...
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
...
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
...
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
...
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
...
Always start with a good profiler
Windows Performance Toolkit
http://aka.ms/WinPerfKit
F12 UI Responsiveness Tool
Event Tracing for
Windows (ETW)
allows us to see into
the web platform
architecture
Event Tracing for Windows (ETW)
contro...
F12 Developer Tools
F12 Developer Tools
F12 Developer Tools
F12 Developer Tools
Windows Performance Toolkit
Windows Performance
Toolkit contains an ETW
controller (Windows
Performance Recorder)
and an E...
Where’s IE11 now?
• Dev preview
• Win 8.1
• Windows 7 - No perf tools just yet but coming with RTM
• New features
• F12 De...
The Internet Explorer userAgent community recognizes,
supports, and connects passionate web developers to raise
awareness ...
#thanks
http://www.flickr.com/photos/-bast-/349497988/
josh holmes
joshholmes.com
@joshholmes
josh.holmes@microsoft.com
BrazilJS Perf Doctor Talk
BrazilJS Perf Doctor Talk
BrazilJS Perf Doctor Talk
BrazilJS Perf Doctor Talk
Upcoming SlideShare
Loading in...5
×

BrazilJS Perf Doctor Talk

2,175

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,175
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://www.flickr.com/photos/theuntrainedeye/4650117274/sizes/m/in/photostream/
  • http://www.flickr.com/photos/joshholmes/4420045760/sizes/l/in/set-72157623387691473/I am Josh Holmes! 
  • BrazilJS Perf Doctor Talk

    1. 1. The Perf Doctor josh holmes joshholmes.com @joshholmes josh.holmes@microsoft.com
    2. 2. Josh Holmes @joshholmes josh.holmes@microsoft.com http://www.joshholmes.com http://slideshare.net/joshholmes
    3. 3. #zen
    4. 4. #yum
    5. 5. #yum
    6. 6. #yum
    7. 7. #hero
    8. 8. #hero
    9. 9. #hero
    10. 10. #holycowdidthatjusthappen
    11. 11. Agenda • Defining Performance • Web Runtime Architecture • Performance Measurement Tools • Walkthroughs / Demos
    12. 12. Performance Exercise How much do you know about performance?
    13. 13. • 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
    14. 14. • 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
    15. 15. • 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
    16. 16. • 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
    17. 17. • 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
    18. 18. • 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
    19. 19. • 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
    20. 20. Which site is fastest?
    21. 21. • 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
    22. 22. Which site is slowest?
    23. 23. • 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
    24. 24. Web Performance Factors What Makes Sites Faster?
    25. 25. Core1 Core2 Core3 Core4 GPU
    26. 26. Web Runtime Architecture
    27. 27. 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
    28. 28. 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
    29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. Always start with a good profiler Windows Performance Toolkit http://aka.ms/WinPerfKit F12 UI Responsiveness Tool
    42. 42. 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
    43. 43. F12 Developer Tools
    44. 44. F12 Developer Tools
    45. 45. F12 Developer Tools
    46. 46. F12 Developer Tools
    47. 47. 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
    48. 48. 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
    49. 49. 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
    50. 50. #thanks
    51. 51. http://www.flickr.com/photos/-bast-/349497988/ josh holmes joshholmes.com @joshholmes josh.holmes@microsoft.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×