Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

3,019 views

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
  • Be the first to comment

  • Be the first to like this

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

×