mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Add benchmark for host component class variants (#48450)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/48450 Changelog: [internal] This implements a basic benchmark to compare `ReactFabricHostComponent` and `ReactNativeElement` (legacy and DOM implementations for native component instances). Reviewed By: rshest Differential Revision: D66698546 fbshipit-source-id: dd4bde833e5c9eb32c79a52d06f3c360fb012e23
This commit is contained in:
committed by
Facebook GitHub Bot
parent
ff7c550a86
commit
cb308bdc5e
+61
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow strict-local
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
import '../../../Core/InitializeCore.js';
|
||||
import type {
|
||||
InternalInstanceHandle,
|
||||
ViewConfig,
|
||||
} from '../../../Renderer/shims/ReactNativeTypes';
|
||||
|
||||
import ReactNativeElement from '../../../../src/private/webapis/dom/nodes/ReactNativeElement';
|
||||
import ReactFabricHostComponent from '../../../ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent';
|
||||
import {benchmark} from '@react-native/fantom';
|
||||
import nullthrows from 'nullthrows';
|
||||
|
||||
// Create fake parameters for the class.
|
||||
const tag = 11;
|
||||
const viewConfig: ViewConfig = {
|
||||
uiViewClassName: 'test',
|
||||
validAttributes: {
|
||||
style: {},
|
||||
},
|
||||
};
|
||||
// $FlowExpectedError[incompatible-type]
|
||||
const internalInstanceHandle: InternalInstanceHandle = {};
|
||||
|
||||
benchmark
|
||||
.suite('ReactNativeElement vs. ReactFabricHostComponent')
|
||||
.add('ReactNativeElement', () => {
|
||||
// eslint-disable-next-line no-new
|
||||
new ReactNativeElement(tag, viewConfig, internalInstanceHandle);
|
||||
})
|
||||
.add('ReactFabricHostComponent', () => {
|
||||
// eslint-disable-next-line no-new
|
||||
new ReactFabricHostComponent(tag, viewConfig, internalInstanceHandle);
|
||||
})
|
||||
.verify(([modernImplResults, legacyImplResults]) => {
|
||||
const minMedian = Math.min(
|
||||
nullthrows(modernImplResults.latency.p50),
|
||||
nullthrows(legacyImplResults.latency.p50),
|
||||
);
|
||||
const maxMedian = Math.max(
|
||||
nullthrows(modernImplResults.latency.p50),
|
||||
nullthrows(legacyImplResults.latency.p50),
|
||||
);
|
||||
|
||||
const medianDifferencePercent = ((maxMedian - minMedian) / minMedian) * 100;
|
||||
console.log(
|
||||
`Difference in p50 values between ReactFabricHostComponent and ReactNativeElement is ${medianDifferencePercent.toFixed(2)}%`,
|
||||
);
|
||||
|
||||
// No implementation should be more than 25% slower than the other.
|
||||
expect(medianDifferencePercent).toBeLessThan(25);
|
||||
});
|
||||
Reference in New Issue
Block a user