Make perf show all exclusive time, not just render time.
Currently require('ReactDefaultPerf').printExclusive() shows render time and aggregate componentMount time. This makes it show exclusive mount time by tracking a stack.
Josh Duck committed
May 12, 2014 at 16:30 UTC
29f3f74c527eac12afc6bf2a1be231214af3f76d
2 files changed
+30
-7
src/test/ReactDefaultPerf.js
+26
-7
@@ -30,8 +30,13 @@ function roundFloat(val) {
30
return Math.floor(val * 100) / 100;
31
}
32
33
+function addValue(obj, key, val) {
34
+ obj[key] = (obj[key] || 0) + val;
35
+}
36
+
37
var ReactDefaultPerf = {
38
_allMeasurements: [], // last item in the list is the current one
39
+ _mountStack: [0],
40
_injected: false,
41
42
start: function() {
@@ -58,8 +63,10 @@ var ReactDefaultPerf = {
63
return {
64
'Component class name': item.componentName,
65
'Total inclusive time (ms)': roundFloat(item.inclusive),
61
- 'Total exclusive time (ms)': roundFloat(item.exclusive),
62
- 'Exclusive time per instance (ms)': roundFloat(item.exclusive / item.count),
66
+ 'Exclusive mount time (ms)': roundFloat(item.exclusive),
67
+ 'Exclusive render time (ms)': roundFloat(item.render),
68
+ 'Mount time per instance (ms)': roundFloat(item.exclusive / item.count),
69
+ 'Render time per instance (ms)': roundFloat(item.render / item.count),
70
'Instances': item.count
71
};
72
}));
@@ -149,6 +156,7 @@ var ReactDefaultPerf = {
156
ReactDefaultPerf._allMeasurements.push({
157
exclusive: {},
158
inclusive: {},
159
+ render: {},
160
counts: {},
161
writes: {},
162
displayNames: {},
@@ -211,22 +219,33 @@ var ReactDefaultPerf = {
219
args[0] :
220
this._rootNodeID;
221
var isRender = fnName === '_renderValidatedComponent';
222
+ var isMount = fnName === 'mountComponent';
223
+
224
+ var mountStack = ReactDefaultPerf._mountStack;
225
var entry = ReactDefaultPerf._allMeasurements[
226
ReactDefaultPerf._allMeasurements.length - 1
227
];
228
229
if (isRender) {
219
- entry.counts[rootNodeID] = entry.counts[rootNodeID] || 0;
220
- entry.counts[rootNodeID] += 1;
230
+ addValue(entry.counts, rootNodeID, 1);
231
+ } else if (isMount) {
232
+ mountStack.push(0);
233
}
234
235
start = performanceNow();
236
rv = func.apply(this, args);
237
totalTime = performanceNow() - start;
238
227
- var typeOfLog = isRender ? entry.exclusive : entry.inclusive;
228
- typeOfLog[rootNodeID] = typeOfLog[rootNodeID] || 0;
229
- typeOfLog[rootNodeID] += totalTime;
239
+ if (isRender) {
240
+ addValue(entry.render, rootNodeID, totalTime);
241
+ } else if (isMount) {
242
+ var subMountTime = mountStack.pop();
243
+ mountStack[mountStack.length - 1] += totalTime;
244
+ addValue(entry.exclusive, rootNodeID, totalTime - subMountTime);
245
+ addValue(entry.inclusive, rootNodeID, totalTime);
246
+ } else {
247
+ addValue(entry.inclusive, rootNodeID, totalTime);
248
+ }
249
250
entry.displayNames[rootNodeID] = {
251
current: this.constructor.displayName,
src/test/ReactDefaultPerfAnalysis.js
+4
@@ -80,8 +80,12 @@ function getExclusiveSummary(measurements) {
80
componentName: displayName,
81
inclusive: 0,
82
exclusive: 0,
83
+ render: 0,
84
count: 0
85
};
86
+ if (measurement.render[id]) {
87
+ candidates[displayName].render += measurement.render[id];
88
+ }
89
if (measurement.exclusive[id]) {
90
candidates[displayName].exclusive += measurement.exclusive[id];
91
}