Skip to content

Commit

Permalink
[perf] Wasted time metrics
Browse files Browse the repository at this point in the history
This logs DOM ops for a given reconcile. Based on which components rendered and which ones *actually* caused DOM updates we can find
opportunities to add shouldComponentUpdate() methods.
  • Loading branch information
petehunt authored and zpao committed Feb 13, 2014
1 parent 94ef6c5 commit 75b58d2
Showing 1 changed file with 49 additions and 1 deletion.
50 changes: 49 additions & 1 deletion src/test/ReactDefaultPerf.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,16 +85,24 @@ function getExclusiveSummary(measurements) {
return arr;
}

function getInclusiveSummary(measurements) {
function getInclusiveSummary(measurements, onlyClean) {
var inclusiveTimes = {};
var displayName;

for (var i = 0; i < measurements.length; i++) {
var measurement = measurements[i];
var allIDs = merge(measurement.exclusive, measurement.inclusive);
var cleanComponents;

if (onlyClean) {
cleanComponents = getCleanComponents(measurement);
}

for (var id in allIDs) {
if (onlyClean && !cleanComponents[id]) {
continue;
}

displayName = measurement.displayNames[id];

// Inclusive time is not useful for many components without knowing where
Expand Down Expand Up @@ -129,6 +137,31 @@ function getInclusiveSummary(measurements) {
return arr;
}

function getCleanComponents(measurement) {
// For a given reconcile, look at which components did not actually
// render anything to the DOM and return a mapping of their ID to
// the amount of time it took to render the entire subtree.
var cleanComponents = {};
var dirtyLeafIDs = Object.keys(measurement.writes);
var allIDs = merge(measurement.exclusive, measurement.inclusive);

for (var id in allIDs) {
var isDirty = false;
// For each component that rendered, see if a component that triggerd
// a DOM op is in its subtree.
for (var i = 0; i < dirtyLeafIDs.length; i++) {
if (dirtyLeafIDs[i].indexOf(id) === 0) {
isDirty = true;
break;
}
}
if (!isDirty && measurement.counts[id] > 0) {
cleanComponents[id] = true;
}
}
return cleanComponents;
}

var ReactDefaultPerf = {
_allMeasurements: null, // last item in the list is the current one
_injected: false,
Expand Down Expand Up @@ -181,6 +214,21 @@ var ReactDefaultPerf = {
);
},

printByWasted: function(measurements) {
measurements = measurements || ReactDefaultPerf._allMeasurements;
var summary = getInclusiveSummary(measurements, true);
console.table(summary.map(function(item) {
return {
'Owner > component': item.componentName,
'Wasted time': item.inclusiveTime.toFixed(2) + ' ms'
};
}));
console.log(
'Total DOM time:',
getTotalDOMTime(measurements).toFixed(2) + ' ms'
);
},

_recordWrite: function(id, fnName, totalTime) {
var writes =
ReactDefaultPerf
Expand Down

0 comments on commit 75b58d2

Please sign in to comment.