@shopgate/pwa-benchmark 7.12.3 → 7.20.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +17 -17
- package/keyFigure.js +4 -4
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -2,9 +2,19 @@ function _classCallCheck(instance,Constructor){if(!(instance instanceof Construc
|
|
|
2
2
|
* Benchmark controller.
|
|
3
3
|
*/var BenchmarkController=/*#__PURE__*/function(){/**
|
|
4
4
|
* Init
|
|
5
|
-
*/function BenchmarkController(){_classCallCheck(this,BenchmarkController)
|
|
5
|
+
*/function BenchmarkController(){_classCallCheck(this,BenchmarkController);/**
|
|
6
|
+
* Sorts measured actions descending.
|
|
7
|
+
* @param {Array} actions Measured actions.
|
|
8
|
+
* @param {Function} getA Getter to get left side.
|
|
9
|
+
* @param {Function} getB Getter to get right side.
|
|
10
|
+
* @returns {Array}
|
|
11
|
+
*/_defineProperty(this,"sortMeasure",function(actions,getA,getB){return actions.sort(function(a,b){var measureA=getA(a);var measureB=getB(b);if(measureA<measureB){return-1;}if(measureA>measureB){return 1;}return 0;});});/**
|
|
12
|
+
* Takes measure from all actions / components and adds it to a total.
|
|
13
|
+
* @param {Array} measure List of measures.
|
|
14
|
+
* @returns {Array}
|
|
15
|
+
*/_defineProperty(this,"getTotals",function(measure){var result=[];Object.keys(measure).forEach(function(action){return Object.keys(measure[action]).forEach(function(component){var found=result.find(function(r){return r.name===component;});if(found){found.render+=measure[action][component].render;found.renderTime+=measure[action][component].renderTime;return;}result.push({name:component,render:measure[action][component].render,renderTime:measure[action][component].renderTime});});});return result;});this.keyFigures={};}/**
|
|
6
16
|
* Startsup the controller
|
|
7
|
-
*/_createClass(BenchmarkController,[{key:"startup",value:function startup(){// Redux key figures.
|
|
17
|
+
*/return _createClass(BenchmarkController,[{key:"startup",value:function startup(){// Redux key figures.
|
|
8
18
|
this.addKeyFigure('ActionCount',new KeyFigure(KEY_FIGURE_MODE_ADD,KEY_FIGURE_METHOD_COUNT));this.addKeyFigure('ActionTime',new KeyFigure(KEY_FIGURE_MODE_ADD,KEY_FIGURE_METHOD_TIME));this.addKeyFigure('ActionEvents',new KeyFigure(KEY_FIGURE_MODE_ADD,KEY_FIGURE_METHOD_OBSERVER));this.addKeyFigure('GlobalEvents',new KeyFigure(KEY_FIGURE_MODE_ADD,KEY_FIGURE_METHOD_OBSERVER));// Add global events.
|
|
9
19
|
this.getKeyFigure('GlobalEvents').startMeasure('global');}/**
|
|
10
20
|
* Adds a key figure.
|
|
@@ -17,28 +27,18 @@ this.getKeyFigure('GlobalEvents').startMeasure('global');}/**
|
|
|
17
27
|
* @returns {Object}
|
|
18
28
|
*/},{key:"getKeyFigure",value:function getKeyFigure(name){return this.keyFigures[name];}/**
|
|
19
29
|
* Benchmark debug log;
|
|
20
|
-
*/},{key:"debug",value:function debug(){console.log('=========================');console.log('Benchmark Debug Log');console.log('=========================');console.log(this.keyFigures);}
|
|
21
|
-
* Sorts measured actions descending.
|
|
22
|
-
* @param {Array} actions Measured actions.
|
|
23
|
-
* @param {Function} getA Getter to get left side.
|
|
24
|
-
* @param {Function} getB Getter to get right side.
|
|
25
|
-
* @returns {Array}
|
|
26
|
-
*/},{key:"printMostCalledActions",/**
|
|
30
|
+
*/},{key:"debug",value:function debug(){console.log('=========================');console.log('Benchmark Debug Log');console.log('=========================');console.log(this.keyFigures);}},{key:"printMostCalledActions",value:/**
|
|
27
31
|
* Prints most called actions.
|
|
28
|
-
*/
|
|
32
|
+
*/function printMostCalledActions(){// Most called actions.
|
|
29
33
|
var _this$getKeyFigure=this.getKeyFigure('ActionCount'),measure=_this$getKeyFigure.measure;var actions=Object.keys(measure.inclusive);var sortedAction=this.sortMeasure(actions,function(a){return measure.inclusive[a];},function(b){return measure.inclusive[b];});console.log('%cMost called actions',HEADLINE_STYLE);console.table(sortedAction.map(function(action){return{Action:action,Count:measure.inclusive[action]};}).reverse().slice(0,10));}/**
|
|
30
34
|
* Prints the highest execution time per action on average.
|
|
31
35
|
* @param {string} type "inclusive" or "exclusive"
|
|
32
36
|
*/},{key:"printHighestAverageAction",value:function printHighestAverageAction(){var type=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'inclusive';// Highest average execution time
|
|
33
37
|
var _this$getKeyFigure2=this.getKeyFigure('ActionTime'),measure=_this$getKeyFigure2.measure;var _this$getKeyFigure3=this.getKeyFigure('ActionCount'),measureCount=_this$getKeyFigure3.measure;var actions=Object.keys(measure[type]);var sortedAction=this.sortMeasure(actions,function(a){return measure[type][a]/measureCount[type][a];},function(b){return measure[type][b]/measureCount[type][b];});console.log("%cHighest average execution time (".concat(type,")"),HEADLINE_STYLE);console.table(sortedAction.map(function(action){return{Action:action,Time:measure[type][action]/measureCount[type][action]};}).reverse().slice(0,10));}/**
|
|
34
38
|
* Prints most rendering actions.
|
|
35
|
-
*/},{key:"printsActionsWithMostRenders",value:function printsActionsWithMostRenders(){var measure=this.getKeyFigure('ActionEvents').measure.inclusive;var actions=Object.keys(measure).map(function(action){return Object.keys(measure[action]).reduce(function(acc,current){return{action:action,render:measure[action][current].render+acc.render,renderTime:measure[action][current].renderTime+acc.renderTime};},{action:action,render:0,renderTime:0});});var sortedAction=this.sortMeasure(actions,function(a){return a.render;},function(b){return b.render;});console.log('%cAction that caused most renders',HEADLINE_STYLE);console.table(sortedAction.map(function(action){return{Action:action.action,Renders:action.render,SumRenderTime:action.renderTime,AvgRenderTime:action.render>0?action.renderTime/action.render:0};}).reverse().slice(0,10),['Action','Renders','SumRenderTime','AvgRenderTime']);}
|
|
36
|
-
* Takes measure from all actions / components and adds it to a total.
|
|
37
|
-
* @param {Array} measure List of measures.
|
|
38
|
-
* @returns {Array}
|
|
39
|
-
*/},{key:"printsMostRenderedComponents",/**
|
|
39
|
+
*/},{key:"printsActionsWithMostRenders",value:function printsActionsWithMostRenders(){var measure=this.getKeyFigure('ActionEvents').measure.inclusive;var actions=Object.keys(measure).map(function(action){return Object.keys(measure[action]).reduce(function(acc,current){return{action:action,render:measure[action][current].render+acc.render,renderTime:measure[action][current].renderTime+acc.renderTime};},{action:action,render:0,renderTime:0});});var sortedAction=this.sortMeasure(actions,function(a){return a.render;},function(b){return b.render;});console.log('%cAction that caused most renders',HEADLINE_STYLE);console.table(sortedAction.map(function(action){return{Action:action.action,Renders:action.render,SumRenderTime:action.renderTime,AvgRenderTime:action.render>0?action.renderTime/action.render:0};}).reverse().slice(0,10),['Action','Renders','SumRenderTime','AvgRenderTime']);}},{key:"printsMostRenderedComponents",value:/**
|
|
40
40
|
* Prints the most rendering components.
|
|
41
|
-
*/
|
|
41
|
+
*/function printsMostRenderedComponents(){var measure=this.getKeyFigure('GlobalEvents').measure.inclusive;var result=this.getTotals(measure);var sortedAction=this.sortMeasure(result,function(a){return a.render;},function(b){return b.render;});console.log('%cMost rendered Components',HEADLINE_STYLE);console.table(sortedAction.map(function(action){return{Component:action.name,Renders:action.render,SumRenderTime:action.renderTime,AvgRenderTime:action.render>0?action.renderTime/action.render:0};}).reverse().slice(0,10),['Component','Renders','SumRenderTime','AvgRenderTime']);}/**
|
|
42
42
|
* Prints summary.
|
|
43
43
|
*/},{key:"printTotals",value:function printTotals(){var measure=this.getKeyFigure('GlobalEvents').measure.inclusive;var result=this.getTotals(measure);var sumRenders=result.reduce(function(current,acc){return current+acc.render;},0);var sumRenderTime=result.reduce(function(current,acc){return current+acc.renderTime;},0);var avgRenderTime=sumRenderTime/sumRenders;console.log('%cRender total',HEADLINE_STYLE);console.log("%cRenders: ".concat(sumRenders,"; Execution Time: ").concat(sumRenderTime,"ms; Average Execution Time: ").concat(avgRenderTime,"ms"),'font-size: 16px; margin-bottom: 12px;');}/**
|
|
44
44
|
* Pretty prints result.
|
|
@@ -46,4 +46,4 @@ var _this$getKeyFigure2=this.getKeyFigure('ActionTime'),measure=_this$getKeyFigu
|
|
|
46
46
|
* Starts benchmarking all key figures.
|
|
47
47
|
*/},{key:"startAll",value:function startAll(){var _this=this;Object.keys(this.keyFigures).forEach(function(keyFigure){return _this.keyFigures[keyFigure].setStarted(true);});this.getKeyFigure('GlobalEvents').startMeasure('global');}/**
|
|
48
48
|
* Stops benchmarking all key figures.
|
|
49
|
-
*/},{key:"stopAll",value:function stopAll(){var _this2=this;this.getKeyFigure('GlobalEvents').stopMeasure('global');Object.keys(this.keyFigures).forEach(function(keyFigure){return _this2.keyFigures[keyFigure].setStarted(false);});}}]);
|
|
49
|
+
*/},{key:"stopAll",value:function stopAll(){var _this2=this;this.getKeyFigure('GlobalEvents').stopMeasure('global');Object.keys(this.keyFigures).forEach(function(keyFigure){return _this2.keyFigures[keyFigure].setStarted(false);});}}]);}();window.benchmark=new BenchmarkController();export default window.benchmark;
|
package/keyFigure.js
CHANGED
|
@@ -10,7 +10,7 @@ export var KEY_FIGURE_METHOD_OBSERVER='observer';/**
|
|
|
10
10
|
*/function KeyFigure(mode,method){_classCallCheck(this,KeyFigure);this.mode=mode;this.method=method;this.setStarted(true);}/**
|
|
11
11
|
* Toggles the status of the benchmark and also clears the result.
|
|
12
12
|
* @param {bool} started Whether benchmark is running or not.
|
|
13
|
-
*/_createClass(KeyFigure,[{key:"setStarted",value:function setStarted(started){if(started){this.measure={exclusiveTimers:[],timings:{},observers:{},inclusive:{},exclusive:{}};}this.started=true;}/**
|
|
13
|
+
*/return _createClass(KeyFigure,[{key:"setStarted",value:function setStarted(started){if(started){this.measure={exclusiveTimers:[],timings:{},observers:{},inclusive:{},exclusive:{}};}this.started=true;}/**
|
|
14
14
|
* Starts measuring.
|
|
15
15
|
* @param {string} key Unique identifier for action.
|
|
16
16
|
*/},{key:"startMeasure",value:function startMeasure(key){if(!this.started)return;// Prepare storage for key if not existing yet.
|
|
@@ -30,7 +30,7 @@ if(this.method===KEY_FIGURE_METHOD_OBSERVER){/*
|
|
|
30
30
|
* the event callback is called for each event.
|
|
31
31
|
* - The event callback is not executed at all but `takeRecords`
|
|
32
32
|
* will return all events.
|
|
33
|
-
*/var _this$measure$
|
|
33
|
+
*/var _this$measure$observe2=this.measure.observers[key].pop(),instance=_this$measure$observe2.instance,stored=_this$measure$observe2.stored;var records=instance.takeRecords();var events=records.length===0?stored:records;instance.disconnect();// Stops observing, free memory etc.
|
|
34
34
|
// We have to parse the event name to figure out what kind of action it was.
|
|
35
35
|
var renders=events.filter(function(event){return event.entryType==='measure';}).filter(function(event){return event.name.endsWith('[update]');}).map(function(event){return{duration:event.duration,componentName:event.name.replace('⚛','').replace(/ /g,'').replace('[update]','')};});var mounts=events.filter(function(event){return event.entryType==='measure';}).filter(function(event){return event.name.endsWith('.componentDidMount');}).map(function(event){return{duration:event.duration,componentName:event.name.replace('⚛','').replace(/ /g,'').replace('.componentDidMount','')};});// Process renders that happened for each component during the benchmark.
|
|
36
36
|
renders.forEach(function(_ref){var componentName=_ref.componentName,duration=_ref.duration;// For the first time component rendered we need to start at 1.
|
|
@@ -46,5 +46,5 @@ var currentMeasure={inclusive:time,exclusive:time};/**
|
|
|
46
46
|
* Calculates exclusive timings by removing other executions that
|
|
47
47
|
* were running at the same time.
|
|
48
48
|
* https://stackoverflow.com/a/17902682
|
|
49
|
-
*/if(this.measure.exclusiveTimers.length>=2){var _this$measure$
|
|
50
|
-
if(this.measure.exclusiveTimers.length===1){this.measure.exclusiveTimers=[];}}this.measure.inclusive[key]+=currentMeasure.inclusive;this.measure.exclusive[key]+=currentMeasure.exclusive;}}}]);
|
|
49
|
+
*/if(this.measure.exclusiveTimers.length>=2){var _this$measure$exclusi2=_toArray(this.measure.exclusiveTimers),first=_this$measure$exclusi2[0],remaining=_this$measure$exclusi2.slice(1);this.measure.exclusiveTimers=remaining;currentMeasure.exclusive-=first.time;// Reset if callstack reached last call.
|
|
50
|
+
if(this.measure.exclusiveTimers.length===1){this.measure.exclusiveTimers=[];}}this.measure.inclusive[key]+=currentMeasure.inclusive;this.measure.exclusive[key]+=currentMeasure.exclusive;}}}]);}();export{KeyFigure as default};
|