Refactor: split recordUpdate() into profiling and reorder
This doesn't change the actual algorithm but splits unrelated parts.
Dan Abramov committed
Apr 16, 2019 at 16:08 UTC
f4c3008cf539d5cec71d3a21e1dec6627ec628a3
1 file changed
+50
-51
src/backend/renderer.js
+50
-51
@@ -828,69 +828,62 @@ export function attach(
828
}
829
}
830
831
- function maybeRecordUpdate(fiber: Fiber, hasChildOrderChanged: boolean) {
832
- if (__DEBUG__) {
833
- debug('maybeRecordUpdate()', fiber);
834
- }
835
-
836
- const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
837
- if (isProfilingSupported) {
838
- const id = getFiberID(getPrimaryFiber(fiber));
839
- const { actualDuration, treeBaseDuration } = fiber;
831
+ function recordTreeDuration(fiber: Fiber) {
832
+ const id = getFiberID(getPrimaryFiber(fiber));
833
+ const { actualDuration, treeBaseDuration } = fiber;
834
841
- idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
835
+ idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);
836
843
- if (isProfiling) {
844
- if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {
845
- // Tree base duration updates are included in the operations typed array.
846
- // So we have to convert them from milliseconds to microseconds so we can send them as ints.
847
- const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
848
-
849
- beginNextOperation(3);
850
- nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
851
- nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
852
- nextOperation[2] = treeBaseDuration;
853
- endNextOperation(false);
854
- }
837
+ if (isProfiling) {
838
+ if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {
839
+ // Tree base duration updates are included in the operations typed array.
840
+ // So we have to convert them from milliseconds to microseconds so we can send them as ints.
841
+ const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);
842
+
843
+ beginNextOperation(3);
844
+ nextOperation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;
845
+ nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
846
+ nextOperation[2] = treeBaseDuration;
847
+ endNextOperation(false);
848
+ }
849
856
- if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
857
- if (actualDuration > 0) {
858
- // If profiling is active, store durations for elements that were rendered during the commit.
859
- const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
860
- metadata.actualDurations.push(id, actualDuration);
861
- metadata.maxActualDuration = Math.max(
862
- metadata.maxActualDuration,
863
- actualDuration
864
- );
865
- }
850
+ if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
851
+ if (actualDuration > 0) {
852
+ // If profiling is active, store durations for elements that were rendered during the commit.
853
+ const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
854
+ metadata.actualDurations.push(id, actualDuration);
855
+ metadata.maxActualDuration = Math.max(
856
+ metadata.maxActualDuration,
857
+ actualDuration
858
+ );
859
}
860
}
861
}
862
+ }
863
864
+ function recordChildOrderChange(fiber: Fiber) {
865
// The frontend only really cares about the displayName, key, and children.
866
// The first two don't really change, so we are only concerned with the order of children here.
867
// This is trickier than a simple comparison though, since certain types of fibers are filtered.
873
- if (hasChildOrderChanged) {
874
- const nextChildren: Array<number> = [];
868
+ const nextChildren: Array<number> = [];
869
876
- // This is a naive implimentation that shallowly recurses children.
877
- // We might want to revisit this if it proves to be too inefficient.
878
- let child = fiber.child;
879
- while (child !== null) {
880
- findReorderedChildrenRecursively(child, nextChildren);
881
- child = child.sibling;
882
- }
870
+ // This is a naive implimentation that shallowly recurses children.
871
+ // We might want to revisit this if it proves to be too inefficient.
872
+ let child = fiber.child;
873
+ while (child !== null) {
874
+ findReorderedChildrenRecursively(child, nextChildren);
875
+ child = child.sibling;
876
+ }
877
884
- const numChildren = nextChildren.length;
885
- beginNextOperation(3 + numChildren);
886
- nextOperation[0] = TREE_OPERATION_RESET_CHILDREN;
887
- nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
888
- nextOperation[2] = numChildren;
889
- for (let i = 0; i < nextChildren.length; i++) {
890
- nextOperation[3 + i] = nextChildren[i];
891
- }
892
- endNextOperation(false);
878
+ const numChildren = nextChildren.length;
879
+ beginNextOperation(3 + numChildren);
880
+ nextOperation[0] = TREE_OPERATION_RESET_CHILDREN;
881
+ nextOperation[1] = getFiberID(getPrimaryFiber(fiber));
882
+ nextOperation[2] = numChildren;
883
+ for (let i = 0; i < nextChildren.length; i++) {
884
+ nextOperation[3 + i] = nextChildren[i];
885
}
886
+ endNextOperation(false);
887
}
888
889
function findReorderedChildrenRecursively(
@@ -1025,7 +1018,13 @@ export function attach(
1018
}
1019
1020
if (shouldIncludeInTree) {
1028
- maybeRecordUpdate(nextFiber, hasChildOrderChanged);
1021
+ const isProfilingSupported = nextFiber.hasOwnProperty('treeBaseDuration');
1022
+ if (isProfilingSupported) {
1023
+ recordTreeDuration(nextFiber);
1024
+ }
1025
+ if (hasChildOrderChanged) {
1026
+ recordChildOrderChange(nextFiber);
1027
+ }
1028
}
1029
}
1030