Measuring Performance of AngularJS applications

Opbeat for AngularJS

1. Measuring Performance of AngularJS apps San Francisco, December 2015 Kenneth @auchenberg
2. Soo, performance?
3. Page load
4. Steve Souders
6. YSlow
7. PageSpeed
8. We build API’s to help us
9. Navigation Timing API https://blogs.windows.com/buildingapps/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api/
10. Resource Timing API http://www.stevesouders.com/blog/2014/11/25/serious-confusion-with-resource-timing/
11. Server Initial payload Browser Server-side web apps
12. The web has changed
13. Application runtime
15. Server/CDN Initial payload Browser Client-side web apps API App Page load App boot
16. Client-side frameworks
17. Application performance Browser
18. Application performance
19. Chrome DevTools: Timeline
20. Chrome DevTools: CPU Profiler
21. Where is “my app” timeline?
23. for AngularJS
24. Framework specific
25. Trace levels App framework Browser primitives App Template Caching Storage HTTP XHR/WebSocket MutationObservers LocalStorage Reflow Paint Rasterize Compose viewport engine
26. Error logging + Performance
27. Installation
28. Error logging window.onError + “magic”
29. Error logging 1. Error parsing 2. Stack frame generation 3. Stack frame normalization
30. Code instrumentation Performance
32. Challenges
33. What is “app load”? (Pageload)
34. What is “app ready”? (DOMcontentReady)
35. What is “view changed”? (onhashchange)
36. AngularJS Page cyclus Bootstrap Router $routeChangeStart $stateChangeSuccess Controller Services $viewContentLoaded Directives View UI Router ng-route (ngView)
37. What to instrument? AngularJS $resource $http $templateRequest $httpBackend $compile $module $service $controller $cacheFactory $templateCache $directives ngBind, ngClass, ngMode, ngIf, ngInclude, ngRepeat, ngSrc, ngStyle, ngSwitch, ngTransclude
38. $decorate to instrument
39. Bootstrap module.config $decorate $rootScope $viewContentLoaded Router Route controller $stateChangeSuccess $routeChangeStart Start transaction Instrument TraceBuffer ngOpbeat TransactionStore ngView $viewContentLoaded End transaction $routeChangeStart opbeatFunctionWrapper new Trace() Transport scheduler Processing Instrumentation flow
40. <DEMO>
41. Our breakdown
42. Behind the scenes
44. AngularJS $injection system …
45. $injection toString() madness
46. Replicate function arguments
47. Resolve loaded modules
48. V8 + Arguments
49. V8 + Arguments optimized Source: https://github.com/GoogleChrome/devtools-docs/issues/53#issuecomment-51941358 Explanation: http://stackoverflow.com/questions/29198195/whats-the-deal-with-optimising-arguments
50. Error stack frame normalization Firefox Chrome
51. SpiderMonkey naming convention Source: https://developer.mozilla.org/en-US/docs/Tools/Debugger-API/Debugger.Object#Accessor_Properties_of_the_Debugger.Object_prototype
52. Error stack frame normalization Normalized
53. opbeat.com/angularjs
54. github.com/opbeat/opbeat-js Open Source
56. Thanks