BrazilJS Perf Doctor Talk

2,330
-1

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,330
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
15
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.

    ×