Skip to content

ci(benchmark/react): add benchmark for various attribute update #1650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hzy merged 1 commit into from
Sep 4, 2025
Merged

ci(benchmark/react): add benchmark for various attribute update #1650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 204 additions & 0 deletions benchmark/react/cases/004-various-update/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
// Copyright 2025 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

Comment thread
colinaaa marked this conversation as resolved.
import { root, useEffect, useState } from '@lynx-js/react';
import { SnapshotInstance } from '@lynx-js/react/internal';
import type { CSSProperties, MainThread, NodesRef } from '@lynx-js/types';

import { hook, isMainThread } from '../../src/hook.js';

if (__MAIN_THREAD__) {
hook(
SnapshotInstance.prototype,
'setAttribute',
function(this: SnapshotInstance, old, key, value) {
if (!this.__elements) {
// skip when there is no underlying FiberElement
return old!.call(this, key, value);
}

let name = '';
switch (key) {
Comment thread
hzy marked this conversation as resolved.
case 0:
name = 'Attr';
break;
case 1:
name = 'Dataset';
break;
case 2:
name = 'Event';
break;
case 3:
name = 'MT_Event';
break;
case 4:
name = 'StyleString';
break;
case 5:
name = 'StyleObject';
break;
case 6:
name = 'Class';
break;
case 7:
name = 'Id';
break;
case 8:
name = 'Ref';
break;
case 9:
name = 'TimingFlag';
break;
case 10:
name = 'MT_Ref';
break;
case 11:
name = 'ListItemPlatformInfo';
break;
case 12:
name = 'ListItemPlatformInfoSpread';
break;
case 13:
name = 'Spread';
break;
case 'values':
name = 'BatchedValues';
break;
}

if (!name) {
// skip what we are not concerned
return old!.call(this, key, value);
}

Codspeed.startBenchmark();
const ret = old!.call(this, key, value);
Codspeed.stopBenchmark();
Codspeed.setExecutedBenchmark(
`${__REPO_FILEPATH__}::${__webpack_chunkname__}-setAttribute__${name}`,
);

return ret;
},
Comment thread
colinaaa marked this conversation as resolved.
);
}

function F() {
const [stopBenchmark, setStopBenchmark] = useState(false);
const [values, setValues] = useState(
[
'some-exposure-id' as string,
Comment thread
hzy marked this conversation as resolved.
'some-dataset' as string,
() => {},
() => {
'main thread';
},
'width: 100rpx; height: 100rpx; background-color: #FACE00;' as string,
{
width: '100rpx',
height: '100rpx',
backgroundColor: '#FACE00',
} as CSSProperties,
'some-css-class' as string,
'some-id' as string,
(_e: NodesRef) => {},
'some_lynx_timing_flag' as string,
(_e: MainThread.Element) => {
'main thread';
},
'some-item-key' as string,
] as const,
);

useEffect(() => {
setValues([
'some-other-exposure-id',
'some-other-dataset',
() => {},
() => {
'main thread';
},
'width: 200rpx; height: 100rpx; background-color: #FACE00;',
{
width: '200rpx',
height: '100rpx',
backgroundColor: '#FACE00',
},
'some-other-css-class',
'some-other-id',
(_e: NodesRef) => {},
'some_other_lynx_timing_flag',
(_e: MainThread.Element) => {
'main thread';
},
'some-other-item-key',
]);
setStopBenchmark(true);
}, []);

if (isMainThread) {
return null;
}

return (
<view>
<view exposure-id={values[0]} />
<view data-xxx={values[1]} />
<view bindtap={values[2]} />
<view main-thread:bindtap={values[3]} />
<view style={values[4]} />
<view style={values[5]} />
<view className={values[6]} />
<view id={values[7]} />
<view ref={values[8]} />
<view __lynx_timing_flag={values[9]} />
<view main-thread:ref={values[10]} />
<list-item
item-key={values[11]}
full-span={false}
estimated-main-axis-size-px={100}
sticky-top={false}
sticky-bottom={false}
recyclable={false}
/>
<list-item
{
...({
'item-key': values[11],
'full-span': false,
'estimated-main-axis-size-px': 100,
'sticky-top': false,
'sticky-bottom': false,
'recyclable': false,
}) /* 12 */
}
/>
<view
{
...(
{
'exposure-id': values[0],
'data-xxx': values[1],
'bindtap': values[2],
'main-thread:bindtap': values[3],
// 'style': values[4],
'style': values[5],
'className': values[6],
'id': values[7],
'ref': values[8],
'__lynx_timing_flag': values[9],
'main-thread:ref': values[10],
}
) /* 13 */
}
/>

<view id={`stop-benchmark-${stopBenchmark}`} />
</view>
);
}

root.render(
<F />,
);
3 changes: 3 additions & 0 deletions benchmark/react/lynx.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export default defineConfig({
'./src/patchUpdateListCallbacks.ts',
'./cases/003-hello-list/index.tsx',
],
'004-various-update': [
'./cases/004-various-update/index.tsx',
],
},
},
plugins: [
Expand Down
2 changes: 2 additions & 0 deletions benchmark/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@
"bench:001-fib": "benchx_cli run dist/001-fib.lynx.bundle",
"bench:002-hello-reactLynx": "benchx_cli run dist/002-hello-reactLynx.lynx.bundle --wait-for-id=stop-benchmark-true",
"bench:003-hello-list": "benchx_cli run dist/003-hello-list.lynx.bundle --wait-for-id=stop-benchmark-true",
"bench:004-various-update": "benchx_cli run dist/004-various-update.lynx.bundle --wait-for-id=stop-benchmark-true",
Comment thread
hzy marked this conversation as resolved.
"build": "rspeedy build",
"dev": "rspeedy dev",
"perfetto": "pnpm run --sequential --stream --aggregate-output '/^perfetto:.*/'",
"perfetto:001-fib": "benchx_cli -o dist/001-fib.ptrace run dist/001-fib.lynx.bundle",
"perfetto:002-hello-reactLynx": "benchx_cli -o dist/002-hello-reactLynx.ptrace run dist/002-hello-reactLynx.lynx.bundle --wait-for-id=stop-benchmark-true",
"perfetto:003-hello-list": "benchx_cli -o dist/003-hello-list.ptrace run dist/003-hello-list.lynx.bundle --wait-for-id=stop-benchmark-true",
"perfetto:004-various-update": "benchx_cli -o dist/004-various-update.ptrace run dist/004-various-update.lynx.bundle --wait-for-id=stop-benchmark-true",
"test": "echo 'No tests specified'"
},
"dependencies": {
Expand Down
4 changes: 4 additions & 0 deletions benchmark/react/src/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,7 @@ export function hook<T, K extends keyof T>(
}

export const PREFIX = __REPO_FILEPATH__.split('/').slice(0, -2).join('/');

export const isMainThread =
// @ts-expect-error safely check
typeof __CreatePage === 'function';
Loading