Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve scanning Profiler chart for deep renders

Browse Source
This commit is contained in:
Brian Vaughn
2019-05-15 14:20:36 -07:00
parent 6fd2e72b5e
commit f10a6b379c
10 changed files with 101 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/__tests__/__snapshots__/profilingCharts-test.js.snap
+7
View File
@@ -70,6 +70,10 @@ Object {
3 => 2,
},
"maxSelfDuration": 10,
"renderPathNodes": Set {
1,
3,
},
"rows": Array [
Array [
Object {
@@ -189,6 +193,9 @@ Object {
3 => 2,
},
"maxSelfDuration": 10,
"renderPathNodes": Set {
1,
},
"rows": Array [
Array [
Object {
src/devtools/views/Profiler/ChartNode.js
+5 -1
View File
@@ -13,6 +13,7 @@ type Props = {|
onClick: (event: SyntheticMouseEvent<*>) => mixed,
onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
placeLabelAboveNode?: boolean,
textStyle?: Object,
width: number,
x: number,
y: number,
@@ -27,6 +28,7 @@ export default function ChartNode({
label,
onClick,
onDoubleClick,
textStyle,
width,
x,
y,
@@ -57,7 +59,9 @@ export default function ChartNode({
}}
y={height < textHeight ? -textHeight : 0}
>
<div className={styles.Div}>{label}</div>
<div className={styles.Div} style={textStyle}>
{label}
</div>
</foreignObject>
)}
</g>
src/devtools/views/Profiler/CommitFlamegraph.css
+5
View File
@@ -3,3 +3,8 @@
height: 100%;
padding: 0.5rem;
}
.PatternPath {
stroke: var(--color-commit-did-not-render-pattern);
stroke-width: 1;
}
src/devtools/views/Profiler/CommitFlamegraph.js
+21 -2
View File
@@ -1,6 +1,6 @@
// @flow
import React, { useCallback, useContext, useMemo } from 'react';
import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList } from 'react-window';
import { ProfilerContext } from './ProfilerContext';
@@ -152,7 +152,7 @@ function CommitFlamegraph({
return (
<FixedSizeList
height={height}
innerElementType="svg"
innerElementType={InnerElementType}
itemCount={chartData.depth}
itemData={itemData}
itemSize={barHeight}
@@ -162,3 +162,22 @@ function CommitFlamegraph({
</FixedSizeList>
);
}
const InnerElementType = forwardRef(({ children, ...rest }, ref) => (
<svg ref={ref} {...rest}>
<defs>
<pattern
id="didNotRenderPattern"
patternUnits="userSpaceOnUse"
width="4"
height="4"
>
<path
d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
className={styles.PatternPath}
/>
</pattern>
</defs>
{children}
</svg>
));
src/devtools/views/Profiler/CommitFlamegraphListItem.js
+8 -2
View File
@@ -23,7 +23,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
selectFiber,
width,
} = data;
const { maxSelfDuration, rows } = chartData;
const { renderPathNodes, maxSelfDuration, rows } = chartData;
const handleClick = useCallback(
(event: SyntheticMouseEvent<*>, id: number, name: string) => {
@@ -76,9 +76,14 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
return null;
}
let color = 'var(--color-commit-did-not-render)';
let color = 'url(#didNotRenderPattern)';
let textColor = 'var(--color-commit-did-not-render-pattern-text)';
if (didRender) {
color = getGradientColor(selfDuration / maxSelfDuration);
textColor = 'var(--color-commit-gradient-text)';
} else if (renderPathNodes.has(id)) {
color = 'var(--color-commit-did-not-render-fill)';
textColor = 'var(--color-commit-did-not-render-fill-text)';
}
return (
@@ -89,6 +94,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
key={id}
label={label}
onClick={event => handleClick(event, id, name)}
textStyle={{ color: textColor }}
width={nodeWidth}
x={nodeOffset - selectedNodeOffset}
y={top}
src/devtools/views/Profiler/FlamegraphChartBuilder.js
+21
View File
@@ -21,6 +21,7 @@ export type ChartData = {|
depth: number,
idToDepthMap: Map<number, number>,
maxSelfDuration: number,
renderPathNodes: Set<number>,
rows: Array<Array<ChartNode>>,
|};
@@ -44,6 +45,7 @@ export function getChartData({
}
const idToDepthMap: Map<number, number> = new Map();
const renderPathNodes: Set<number> = new Set();
const rows: Array<Array<ChartNode>> = [];
let maxDepth = 0;
@@ -129,11 +131,30 @@ export function getChartData({
walkTree(id, baseDuration, 1);
}
actualDurations.forEach((duration, id) => {
const node = nodes.get(id);
if (node != null) {
let currentID = node.parentID;
while (currentID !== 0) {
if (renderPathNodes.has(currentID)) {
// We've already walked this path; we can skip it.
break;
} else {
renderPathNodes.add(currentID);
}
const node = nodes.get(currentID);
currentID = node != null ? node.parentID : 0;
}
}
});
const chartData = {
baseDuration,
depth: maxDepth,
idToDepthMap,
maxSelfDuration,
renderPathNodes,
rows,
};
src/devtools/views/Profiler/InteractionListItem.css
+4 -2
View File
@@ -28,7 +28,8 @@
.InteractionLine {
position: absolute;
height: 3px;
background-color: var(--color-commit-did-not-render);
background-color: var(--color-commit-did-not-render-fill);
color: var(--color-commit-did-not-render-fill-text);
border-radius: 0.125rem;
}
@@ -36,6 +37,7 @@
position: absolute;
width: var(--interaction-commit-size);
height: var(--interaction-commit-size);
background-color: var(--color-commit-did-not-render);
background-color: var(--color-commit-did-not-render-fill);
color: var(--color-commit-did-not-render-fill-text);
cursor: pointer;
}
src/devtools/views/Profiler/SnapshotCommitListItem.css
+2 -1
View File
@@ -11,5 +11,6 @@
.Inner {
width: 100%;
min-height: 5px;
background-color: var(--color-commit-did-not-render);
background-color: var(--color-commit-did-not-render-fill);
color: var(--color-commit-did-not-render-fill-text);
}
src/devtools/views/Settings/SettingsContext.js
+20 -1
View File
@@ -214,7 +214,26 @@ function updateThemeVariables(
updateStyleHelper(theme, 'color-button-disabled', documentElements);
updateStyleHelper(theme, 'color-button-focus', documentElements);
updateStyleHelper(theme, 'color-button-hover', documentElements);
updateStyleHelper(theme, 'color-commit-did-not-render', documentElements);
updateStyleHelper(
theme,
'color-commit-did-not-render-fill',
documentElements
);
updateStyleHelper(
theme,
'color-commit-did-not-render-fill-text',
documentElements
);
updateStyleHelper(
theme,
'color-commit-did-not-render-pattern',
documentElements
);
updateStyleHelper(
theme,
'color-commit-did-not-render-pattern-text',
documentElements
);
updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
src/devtools/views/root.css
+8 -2
View File
@@ -19,7 +19,10 @@
--light-color-button-focus: #23272f;
--light-color-button-hover: #23272f;
--light-color-border: #eeeeee;
--light-color-commit-did-not-render: #cfd1d5;
--light-color-commit-did-not-render-fill: #cfd1d5;
--light-color-commit-did-not-render-fill-text: #000000;
--light-color-commit-did-not-render-pattern: #cfd1d5;
--light-color-commit-did-not-render-pattern-text: #000000;
--light-color-commit-gradient-0: #37afa9;
--light-color-commit-gradient-1: #63b19e;
--light-color-commit-gradient-2: #80b393;
@@ -73,7 +76,10 @@
--dark-color-button-focus: #a2e9fc;
--dark-color-button-hover: #ededed;
--dark-color-border: #3d424a;
--dark-color-commit-did-not-render: #777d88;
--dark-color-commit-did-not-render-fill: #777d88;
--dark-color-commit-did-not-render-fill-text: #000000;
--dark-color-commit-did-not-render-pattern: #666c77;
--dark-color-commit-did-not-render-pattern-text: #ffffff;
--dark-color-commit-gradient-0: #37afa9;
--dark-color-commit-gradient-1: #63b19e;
--dark-color-commit-gradient-2: #80b393;