BrazilJS Perf Doctor Talk
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

BrazilJS Perf Doctor Talk

on

  • 2,031 views

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. ...

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.

Statistics

Views

Total Views
2,031
Views on SlideShare
753
Embed Views
1,278

Actions

Likes
0
Downloads
7
Comments
0

25 Embeds 1,278

http://www.joshholmes.com 919
http://cirdes.com.br 171
http://localhost 41
http://cloud.feedly.com 38
http://braziljs.com.br 34
http://www.youtube.com 16
http://therichwebexperience.com 11
http://rss.joshholmes.com 9
http://lanyrd.com 7
http://digg.com 7
http://www.nofluffjuststuff.com 4
http://translate.googleusercontent.com 3
http://nofluffjuststuff.com 2
https://translate.googleusercontent.com 2
http://www.bingsandbox.com 2
http://summary 2
http://silverreader.com 2
http://gradlesummit.com 1
http://blog.eventick.com.br 1
http://feeds2.feedburner.com 1
http://www.newsblur.com 1
http://inoreader.com 1
http://newsblur.com 1
http://www.inoreader.com 1
http://clide2.rssing.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 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?
  • 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. • 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. • 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. • 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. • 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. • 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. • 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. Which site is fastest?
  • 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. Which site is slowest?
  • 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. Web Performance Factors What Makes Sites Faster?
  • 25. Core1 Core2 Core3 Core4 GPU
  • 26. Web Runtime Architecture
  • 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. 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. 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. Always start with a good profiler Windows Performance Toolkit http://aka.ms/WinPerfKit F12 UI Responsiveness Tool
  • 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. F12 Developer Tools
  • 44. F12 Developer Tools
  • 45. F12 Developer Tools
  • 46. F12 Developer Tools
  • 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. 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. 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. #thanks
  • 51. http://www.flickr.com/photos/-bast-/349497988/ josh holmes joshholmes.com @joshholmes josh.holmes@microsoft.com