profiler.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import $ from 'jquery';
  2. import angular from 'angular';
  3. export class Profiler {
  4. panelsRendered: number;
  5. enabled: boolean;
  6. panelsInitCount: any;
  7. timings: any;
  8. digestCounter: any;
  9. $rootScope: any;
  10. scopeCount: any;
  11. init(config, $rootScope) {
  12. this.enabled = config.buildInfo.env === 'development';
  13. this.timings = {};
  14. this.timings.appStart = { loadStart: new Date().getTime() };
  15. this.$rootScope = $rootScope;
  16. if (!this.enabled) {
  17. return;
  18. }
  19. $rootScope.$watch(() => {
  20. this.digestCounter++;
  21. return false;
  22. }, () => {});
  23. $rootScope.onAppEvent('refresh', this.refresh.bind(this), $rootScope);
  24. $rootScope.onAppEvent('dashboard-fetch-end', this.dashboardFetched.bind(this), $rootScope);
  25. $rootScope.onAppEvent('dashboard-initialized', this.dashboardInitialized.bind(this), $rootScope);
  26. $rootScope.onAppEvent('panel-initialized', this.panelInitialized.bind(this), $rootScope);
  27. }
  28. refresh() {
  29. this.timings.query = 0;
  30. this.timings.render = 0;
  31. setTimeout(() => {
  32. console.log('panel count: ' + this.panelsInitCount);
  33. console.log('total query: ' + this.timings.query);
  34. console.log('total render: ' + this.timings.render);
  35. console.log('avg render: ' + this.timings.render / this.panelsInitCount);
  36. }, 5000);
  37. }
  38. dashboardFetched() {
  39. this.timings.dashboardLoadStart = new Date().getTime();
  40. this.panelsInitCount = 0;
  41. this.digestCounter = 0;
  42. this.panelsInitCount = 0;
  43. this.panelsRendered = 0;
  44. this.timings.query = 0;
  45. this.timings.render = 0;
  46. }
  47. dashboardInitialized() {
  48. setTimeout(() => {
  49. console.log("Dashboard::Performance Total Digests: " + this.digestCounter);
  50. console.log("Dashboard::Performance Total Watchers: " + this.getTotalWatcherCount());
  51. console.log("Dashboard::Performance Total ScopeCount: " + this.scopeCount);
  52. var timeTaken = this.timings.lastPanelInitializedAt - this.timings.dashboardLoadStart;
  53. console.log("Dashboard::Performance All panels initialized in " + timeTaken + " ms");
  54. // measure digest performance
  55. var rootDigestStart = window.performance.now();
  56. for (var i = 0; i < 30; i++) {
  57. this.$rootScope.$apply();
  58. }
  59. console.log("Dashboard::Performance Root Digest " + ((window.performance.now() - rootDigestStart) / 30));
  60. }, 3000);
  61. }
  62. getTotalWatcherCount() {
  63. var count = 0;
  64. var scopes = 0;
  65. var root = $(document.getElementsByTagName('body'));
  66. var f = function (element) {
  67. if (element.data().hasOwnProperty('$scope')) {
  68. scopes++;
  69. angular.forEach(element.data().$scope.$$watchers, function () {
  70. count++;
  71. });
  72. }
  73. angular.forEach(element.children(), function (childElement) {
  74. f($(childElement));
  75. });
  76. };
  77. f(root);
  78. this.scopeCount = scopes;
  79. return count;
  80. }
  81. renderingCompleted(panelId, panelTimings) {
  82. // add render counter to root scope
  83. // used by phantomjs render.js to know when panel has rendered
  84. this.panelsRendered = (this.panelsRendered || 0) + 1;
  85. this.$rootScope.panelsRendered = this.panelsRendered;
  86. if (this.enabled) {
  87. panelTimings.renderEnd = new Date().getTime();
  88. this.timings.query += panelTimings.queryEnd - panelTimings.queryStart;
  89. this.timings.render += panelTimings.renderEnd - panelTimings.renderStart;
  90. }
  91. }
  92. panelInitialized() {
  93. if (!this.enabled) {
  94. return;
  95. }
  96. this.panelsInitCount++;
  97. this.timings.lastPanelInitializedAt = new Date().getTime();
  98. }
  99. }
  100. var profiler = new Profiler();
  101. export {profiler};