@@ -150,7 +150,7 @@
Time-series (load multiple runs)
var minV = Infinity, maxV = -Infinity;
libList.forEach(function (lib) {
var r = byLib[lib];
- if (r && typeof r.value === 'number' && (r.unit === 'bytes' || r.unit === 'ms' || r.unit === 'count')) {
+ if (r && typeof r.value === 'number' && (r.unit === 'bytes' || r.unit === 'ops/s' || r.unit === 'ms' || r.unit === 'count')) {
if (r.value < minV) minV = r.value;
if (r.value > maxV) maxV = r.value;
}
@@ -159,11 +159,15 @@
Time-series (load multiple runs)
var r = byLib[lib];
if (!r) { cells.push('
\u2014 | '); return; }
var cls = '';
- if (typeof r.value === 'number' && minV !== maxV && (r.unit === 'ms' || r.unit === 'bytes')) {
- cls = r.value <= minV ? 'fast' : (r.value >= maxV ? 'slow' : '');
+ if (typeof r.value === 'number' && minV !== maxV) {
+ if (r.unit === 'ops/s') {
+ cls = r.value >= maxV ? 'fast' : (r.value <= minV ? 'slow' : '');
+ } else if (r.unit === 'ms' || r.unit === 'bytes') {
+ cls = r.value <= minV ? 'fast' : (r.value >= maxV ? 'slow' : '');
+ }
}
var range = r.range ? ' ' + r.range : '';
- var unitLabel = r.unit === 'ms' ? ' ms' : r.unit === 'bytes' ? ' B' : '';
+ var unitLabel = r.unit === 'ops/s' ? ' ops/s' : r.unit === 'ms' ? ' ms' : r.unit === 'bytes' ? ' B' : '';
cells.push('
' + (r.value != null ? Number(r.value) + unitLabel + range : '\u2014') + ' | ');
});
tbody += '
' + cells.join('') + '
';
diff --git a/examples/benchmark-react/bench/report.ts b/examples/benchmark-react/bench/report.ts
index 849b3d88712e..58979812f651 100644
--- a/examples/benchmark-react/bench/report.ts
+++ b/examples/benchmark-react/bench/report.ts
@@ -1,5 +1,5 @@
/**
- * Format results as customSmallerIsBetter JSON for rhysd/github-action-benchmark.
+ * Format results as customBiggerIsBetter JSON for rhysd/github-action-benchmark.
*/
export interface BenchmarkResult {
name: string;
diff --git a/examples/benchmark-react/bench/runner.ts b/examples/benchmark-react/bench/runner.ts
index 479f1b7d4fcf..3f10ced6f879 100644
--- a/examples/benchmark-react/bench/runner.ts
+++ b/examples/benchmark-react/bench/runner.ts
@@ -73,7 +73,8 @@ function filterScenarios(scenarios: Scenario[]): {
s =>
s.name.startsWith('data-client:') &&
s.category !== 'memory' &&
- s.category !== 'startup',
+ s.category !== 'startup' &&
+ !s.deterministic,
);
} else if (
!actions ||
@@ -389,7 +390,11 @@ function shuffle
(arr: T[]): T[] {
function scenarioUnit(scenario: Scenario): string {
if (isRefStabilityScenario(scenario)) return 'count';
if (scenario.resultMetric === 'heapDelta') return 'bytes';
- return 'ms';
+ return 'ops/s';
+}
+
+function msToOps(ms: number): number {
+ return ms > 0 ? 1000 / ms : 0;
}
function recordResult(
@@ -443,12 +448,17 @@ async function runRound(
try {
const result = await runScenario(page, lib, scenario, networkSim, cdp);
recordResult(samples, scenario, result);
+ const unit = scenarioUnit(scenario);
+ const displayValue =
+ unit === 'ops/s' ?
+ `${msToOps(result.value).toFixed(2)} ops/s`
+ : `${result.value.toFixed(2)} ${unit}`;
const commitSuffix =
result.reactCommit != null ?
- ` (commit ${result.reactCommit.toFixed(2)} ms)`
+ ` (commit ${msToOps(result.reactCommit).toFixed(2)} ops/s)`
: '';
process.stderr.write(
- ` ${prefix}${scenario.name}: ${result.value.toFixed(2)} ${scenarioUnit(scenario)}${commitSuffix}\n`,
+ ` ${prefix}${scenario.name}: ${displayValue}${commitSuffix}\n`,
);
} catch (err) {
console.error(
@@ -603,8 +613,11 @@ async function main() {
const warmup = warmupCount(scenario);
if (s.value.length <= warmup) continue;
- const { median, range } = computeStats(s.value, warmup);
const unit = scenarioUnit(scenario);
+ const isOps = unit === 'ops/s';
+ const statSamples =
+ isOps ? s.value.slice(warmup).map(msToOps) : s.value.slice(warmup);
+ const { median, range } = computeStats(statSamples, 0);
report.push({
name: scenario.name,
unit,
@@ -617,13 +630,11 @@ async function main() {
.slice(warmup)
.filter(x => !Number.isNaN(x));
if (reactSamples.length > 0 && !scenario.resultMetric) {
- const { median: rcMedian, range: rcRange } = computeStats(
- reactSamples,
- 0,
- );
+ const rcOps = reactSamples.map(msToOps);
+ const { median: rcMedian, range: rcRange } = computeStats(rcOps, 0);
report.push({
name: `${scenario.name} (react commit)`,
- unit: 'ms',
+ unit: 'ops/s',
value: Math.round(rcMedian * 100) / 100,
range: rcRange,
});
@@ -632,13 +643,11 @@ async function main() {
// Chrome trace durations (opt-in via BENCH_TRACE=true)
const traceSamples = s.trace.slice(warmup).filter(x => !Number.isNaN(x));
if (traceSamples.length > 0) {
- const { median: trMedian, range: trRange } = computeStats(
- traceSamples,
- 0,
- );
+ const trOps = traceSamples.map(msToOps);
+ const { median: trMedian, range: trRange } = computeStats(trOps, 0);
report.push({
name: `${scenario.name} (trace)`,
- unit: 'ms',
+ unit: 'ops/s',
value: Math.round(trMedian * 100) / 100,
range: trRange,
});
@@ -657,6 +666,7 @@ async function main() {
);
}
process.stderr.write('\n');
+
process.stdout.write(formatReport(report));
}
diff --git a/examples/benchmark-react/bench/scenarios.ts b/examples/benchmark-react/bench/scenarios.ts
index e90b0efb1c6b..887340777ace 100644
--- a/examples/benchmark-react/bench/scenarios.ts
+++ b/examples/benchmark-react/bench/scenarios.ts
@@ -134,9 +134,9 @@ const BASE_SCENARIOS: BaseScenario[] = [
size: 'large',
},
{
- nameSuffix: 'list-detail-switch',
+ nameSuffix: 'list-detail-switch-10',
action: 'listDetailSwitch',
- args: [1000],
+ args: [10, 1000],
category: 'hotPath',
size: 'large',
renderLimit: 100,
@@ -186,7 +186,12 @@ const BASE_SCENARIOS: BaseScenario[] = [
},
];
-export const LIBRARIES = ['data-client', 'tanstack-query', 'swr'] as const;
+export const LIBRARIES = [
+ 'data-client',
+ 'tanstack-query',
+ 'swr',
+ 'baseline',
+] as const;
export const SCENARIOS: Scenario[] = LIBRARIES.flatMap(lib =>
BASE_SCENARIOS.filter(
diff --git a/examples/benchmark-react/bench/validate.ts b/examples/benchmark-react/bench/validate.ts
index f155befaf1e2..427d13293b7c 100644
--- a/examples/benchmark-react/bench/validate.ts
+++ b/examples/benchmark-react/bench/validate.ts
@@ -498,7 +498,7 @@ test('listDetailSwitch completes with correct DOM transitions', async (page, lib
return;
await clearComplete(page);
- await page.evaluate(() => window.__BENCH__!.listDetailSwitch!(20));
+ await page.evaluate(() => window.__BENCH__!.listDetailSwitch!(5, 20));
await waitForComplete(page, 30000);
const hasSortedList = await page.evaluate(
diff --git a/examples/benchmark-react/src/baseline/index.tsx b/examples/benchmark-react/src/baseline/index.tsx
new file mode 100644
index 000000000000..3011a175811c
--- /dev/null
+++ b/examples/benchmark-react/src/baseline/index.tsx
@@ -0,0 +1,304 @@
+import {
+ moveItemIsReady,
+ renderBenchApp,
+ useBenchState,
+} from '@shared/benchHarness';
+import {
+ DOUBLE_LIST_STYLE,
+ IssueRow,
+ PINNED_STRIP_STYLE,
+ PinnedCardView,
+ PlainIssueList,
+} from '@shared/components';
+import {
+ FIXTURE_USERS,
+ FIXTURE_USERS_BY_LOGIN,
+ FIXTURE_ISSUES_BY_NUMBER,
+ sortByTitle,
+} from '@shared/data';
+import { setCurrentIssues } from '@shared/refStability';
+import {
+ fetchIssue,
+ fetchIssueList,
+ updateIssue,
+ updateUser as serverUpdateUser,
+ createIssue,
+ deleteIssue,
+} from '@shared/server';
+import type { Issue } from '@shared/types';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+function SortedListView({
+ limit,
+ refetchKey,
+}: {
+ limit?: number;
+ refetchKey: number;
+}) {
+ const [issues, setIssues] = useState(null);
+ useEffect(() => {
+ fetchIssueList().then(setIssues);
+ }, [refetchKey]);
+ const sorted = useMemo(() => (issues ? sortByTitle(issues) : []), [issues]);
+ if (!sorted.length) return null;
+ return (
+
+ );
+}
+
+function DetailView({
+ number,
+ refetchKey,
+}: {
+ number: number;
+ refetchKey: number;
+}) {
+ const [issue, setIssue] = useState(null);
+ useEffect(() => {
+ fetchIssue({ number }).then(setIssue);
+ }, [number, refetchKey]);
+ if (!issue) return null;
+ return (
+
+
+
+ );
+}
+
+function PinnedCard({
+ number,
+ refetchKey,
+}: {
+ number: number;
+ refetchKey: number;
+}) {
+ const [issue, setIssue] = useState(null);
+ useEffect(() => {
+ fetchIssue({ number }).then(setIssue);
+ }, [number, refetchKey]);
+ if (!issue) return null;
+ return ;
+}
+
+function PinnedStrip({
+ numbers,
+ refetchKey,
+}: {
+ numbers: number[];
+ refetchKey: number;
+}) {
+ return (
+
+ {numbers.map(n => (
+
+ ))}
+
+
+
+
+ );
+}
+
+function BenchmarkHarness() {
+ const [refetchKey, setRefetchKey] = useState(0);
+ const triggerRefetch = useCallback(() => setRefetchKey(k => k + 1), []);
+
+ const {
+ listViewCount,
+ showSortedView,
+ showDoubleList,
+ doubleListCount,
+ detailIssueNumber,
+ pinnedNumbers,
+ renderLimit,
+ containerRef,
+ measureUpdate,
+ registerAPI,
+ } = useBenchState();
+
+ const updateEntity = useCallback(
+ (number: number) => {
+ const issue = FIXTURE_ISSUES_BY_NUMBER.get(number);
+ if (!issue) return;
+ measureUpdate(() =>
+ updateIssue({
+ number,
+ title: `${issue.title} (updated)`,
+ }).then(triggerRefetch),
+ );
+ },
+ [measureUpdate, triggerRefetch],
+ );
+
+ const updateUser = useCallback(
+ (login: string) => {
+ const user = FIXTURE_USERS_BY_LOGIN.get(login);
+ if (!user) return;
+ measureUpdate(() =>
+ serverUpdateUser({
+ login,
+ name: `${user.name} (updated)`,
+ }).then(triggerRefetch),
+ );
+ },
+ [measureUpdate, triggerRefetch],
+ );
+
+ const unshiftItem = useCallback(() => {
+ const user = FIXTURE_USERS[0];
+ measureUpdate(() =>
+ createIssue({ title: 'New Issue', user }).then(triggerRefetch),
+ );
+ }, [measureUpdate, triggerRefetch]);
+
+ const deleteEntity = useCallback(
+ (number: number) => {
+ measureUpdate(() => deleteIssue({ number }).then(triggerRefetch));
+ },
+ [measureUpdate, triggerRefetch],
+ );
+
+ const moveItem = useCallback(
+ (number: number) => {
+ measureUpdate(
+ () => updateIssue({ number, state: 'closed' }).then(triggerRefetch),
+ () => moveItemIsReady(containerRef, number),
+ );
+ },
+ [measureUpdate, triggerRefetch, containerRef],
+ );
+
+ const updateEntityMultiView = useCallback(
+ (number: number) => {
+ const issue = FIXTURE_ISSUES_BY_NUMBER.get(number);
+ if (!issue) return;
+ const expected = `${issue.title} (updated)`;
+ measureUpdate(
+ () => updateIssue({ number, title: expected }).then(triggerRefetch),
+ () => {
+ const container = containerRef.current!;
+ const listTitle = container.querySelector(
+ `[data-issue-number="${number}"] [data-title]`,
+ );
+ const detailTitle = container.querySelector(
+ '[data-detail-view] [data-title]',
+ );
+ const pinnedTitle = container.querySelector(
+ `[data-pinned-number="${number}"] [data-title]`,
+ );
+ return [listTitle, detailTitle, pinnedTitle].every(
+ el => el?.textContent === expected,
+ );
+ },
+ );
+ },
+ [measureUpdate, triggerRefetch, containerRef],
+ );
+
+ registerAPI({
+ updateEntity,
+ updateUser,
+ updateEntityMultiView,
+ unshiftItem,
+ deleteEntity,
+ moveItem,
+ });
+
+ return (
+
+ {listViewCount != null && (
+
+ )}
+ {showSortedView && (
+
+ )}
+ {showDoubleList && doubleListCount != null && (
+
+ )}
+ {detailIssueNumber != null && (
+
+ )}
+ {pinnedNumbers.length > 0 && (
+
+ )}
+