Skip to content

Commit dacfcf6

Browse files
akinocccakinoccc
committed
docs: add performance data
1 parent a2da3b1 commit dacfcf6

File tree

14 files changed

+767
-5
lines changed

14 files changed

+767
-5
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"build": "pnpm typecheck && pnpm -F core build",
88
"test": "pnpm -F core test",
99
"coverage": "pnpm -F core test:coverage",
10-
"docs:dev": "pnpm build && pnpm -F docs docs:dev",
11-
"docs:build": "pnpm build && pnpm -F docs docs:build",
10+
"docs:dev": "pnpm build && pnpm -F docs dev",
11+
"docs:build": "pnpm build && pnpm -F docs build",
1212
"lint": "eslint .",
1313
"lint:fix": "eslint . --fix",
1414
"typecheck": "vue-tsc --noEmit",

‎packages/docs/.vitepress/en.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ function nav() {
3232
text: 'API',
3333
link: '/guide/api/core',
3434
},
35+
{
36+
text: 'Performance',
37+
link: '/guide/performance/benchmark',
38+
},
3539
]
3640
}
3741

@@ -62,6 +66,13 @@ function sidebarGuide() {
6266
{ text: 'Plugin', link: 'plugin' },
6367
],
6468
},
69+
{
70+
text: 'Performance',
71+
base: '/guide/performance/',
72+
items: [
73+
{ text: 'Benchmark Report', link: 'benchmark' },
74+
],
75+
},
6576
{
6677
text: 'API Reference',
6778
base: '/guide/api/',

‎packages/docs/.vitepress/scripts/generate-reports-list.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import fs from 'node:fs'
2+
import path from 'node:path'
3+
import { fileURLToPath } from 'node:url'
4+
5+
/**
6+
* 生成基准测试报告列表并写入JSON文件
7+
*/
8+
function generateReportsList() {
9+
// 获取当前文件的目录
10+
const __filename = fileURLToPath(import.meta.url)
11+
const __dirname = path.dirname(__filename)
12+
13+
// 基准测试报告目录
14+
const reportsDir = path.resolve(__dirname, '../../../../worker-benchmark/benchmark-reports')
15+
// 输出目录
16+
const outputDir = path.resolve(__dirname, '../../public/benchmark-reports')
17+
// 输出文件
18+
const outputFile = path.resolve(outputDir, 'benchmark-reports-list.json')
19+
20+
try {
21+
// 确保输出目录存在
22+
if (!fs.existsSync(outputDir)) {
23+
fs.mkdirSync(outputDir, { recursive: true })
24+
}
25+
26+
// 读取报告目录
27+
const files = fs.readdirSync(reportsDir)
28+
29+
// 筛选JSON文件
30+
const jsonFiles = files.filter(file => file.endsWith('.json'))
31+
32+
// 按照时间戳排序 (降序，最新的在前)
33+
jsonFiles.sort((a, b) => {
34+
const timeA = a.match(/\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}/)?.[0] || ''
35+
const timeB = b.match(/\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}/)?.[0] || ''
36+
return timeB.localeCompare(timeA)
37+
})
38+
39+
// 将报告列表写入JSON文件
40+
fs.writeFileSync(outputFile, JSON.stringify(jsonFiles, null, 2))
41+
console.log(`报告列表已写入: ${outputFile}`)
42+
43+
// 复制报告文件到输出目录
44+
jsonFiles.forEach((file) => {
45+
const sourcePath = path.join(reportsDir, file)
46+
const destPath = path.join(outputDir, file)
47+
fs.copyFileSync(sourcePath, destPath)
48+
console.log(`已复制报告: ${file}`)
49+
})
50+
}
51+
catch (error) {
52+
console.error('生成报告列表时出错:', error)
53+
}
54+
}
55+
56+
// 执行生成报告列表
57+
generateReportsList()

‎packages/docs/.vitepress/theme/components/BenchmarkReport.vue‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<script setup lang="ts">
2+
import { ref, onMounted } from 'vue'
3+
4+
interface TestResult {
5+
scenarioName: string
6+
iterations: number
7+
stylesCount: number
8+
workerDuration: number
9+
mainThreadDuration: number
10+
fasterMethod: string
11+
percentageDifference: number
12+
timestamp: string
13+
}
14+
15+
interface FallbackTest {
16+
duration: number
17+
mainThreadDuration: number
18+
difference: number
19+
differencePercentage: number
20+
}
21+
22+
interface BenchmarkReport {
23+
environment: string
24+
workerAvailable: boolean
25+
testResults: TestResult[]
26+
generatedAt: string
27+
fallbackTest: FallbackTest
28+
}
29+
30+
const report = ref<BenchmarkReport | null>(null)
31+
const loading = ref(true)
32+
const error = ref<string | null>(null)
33+
34+
onMounted(async () => {
35+
try {
36+
// 获取报告列表
37+
const response = await fetch('/benchmark-reports/benchmark-reports-list.json')
38+
if (!response.ok) {
39+
throw new Error('无法获取报告列表')
40+
}
41+
42+
const reportsList = await response.json()
43+
if (!reportsList || !reportsList.length) {
44+
throw new Error('没有找到可用的报告')
45+
}
46+
47+
// 获取最新的报告（按时间戳排序）
48+
const latestReport = reportsList[0]
49+
50+
// 加载报告内容
51+
const reportResponse = await fetch(`/benchmark-reports/${latestReport}`)
52+
if (!reportResponse.ok) {
53+
throw new Error('无法加载报告内容')
54+
}
55+
56+
report.value = await reportResponse.json()
57+
loading.value = false
58+
} catch (err) {
59+
error.value = err instanceof Error ? err.message : '加载报告时出错'
60+
loading.value = false
61+
}
62+
})
63+
64+
// 格式化数字，保留两位小数
65+
function formatNumber(num: number): string {
66+
return num.toFixed(2)
67+
}
68+
</script>
69+
70+
<template>
71+
<div class="benchmark-report">
72+
<div v-if="loading" class="loading">
73+
<p>正在加载最新的基准测试报告...</p>
74+
</div>
75+
76+
<div v-else-if="error" class="error">
77+
<p>加载报告时出错: {{ error }}</p>
78+
</div>
79+
80+
<div v-else-if="report" class="report-content">
81+
<h2>测试环境信息</h2>
82+
<div class="info">
83+
<div class="info-item">
84+
<strong>运行环境:</strong> {{ report.environment }}
85+
</div>
86+
<div class="info-item">
87+
<strong>Worker可用:</strong> {{ report.workerAvailable ? '是' : '否' }}
88+
</div>
89+
<div class="info-item">
90+
<strong>生成时间:</strong> {{ report.generatedAt }}
91+
</div>
92+
</div>
93+
94+
<h2>测试结果</h2>
95+
<table>
96+
<thead>
97+
<tr>
98+
<th>测试场景</th>
99+
<th>迭代次数</th>
100+
<th>样式数量</th>
101+
<th>Worker耗时(ms)</th>
102+
<th>主线程耗时(ms)</th>
103+
<th>结果比较</th>
104+
</tr>
105+
</thead>
106+
<tbody>
107+
<tr v-for="result in report.testResults" :key="result.scenarioName">
108+
<td>{{ result.scenarioName }}</td>
109+
<td>{{ result.iterations }}</td>
110+
<td>{{ result.stylesCount }}</td>
111+
<td>{{ formatNumber(result.workerDuration) }}</td>
112+
<td>{{ formatNumber(result.mainThreadDuration) }}</td>
113+
<td :class="result.fasterMethod === 'Worker' ? 'worker-faster' : 'main-thread-faster'">
114+
{{ result.fasterMethod }} 快 {{ formatNumber(result.percentageDifference) }}%
115+
</td>
116+
</tr>
117+
</tbody>
118+
</table>
119+
120+
<h3>Worker不可用场景测试</h3>
121+
<table>
122+
<thead>
123+
<tr>
124+
<th>回退处理耗时(ms)</th>
125+
<th>主线程耗时(ms)</th>
126+
<th>差异(ms)</th>
127+
<th>差异百分比</th>
128+
</tr>
129+
</thead>
130+
<tbody>
131+
<tr>
132+
<td>{{ formatNumber(report.fallbackTest.duration) }}</td>
133+
<td>{{ formatNumber(report.fallbackTest.mainThreadDuration) }}</td>
134+
<td>{{ formatNumber(report.fallbackTest.difference) }}</td>
135+
<td>{{ formatNumber(report.fallbackTest.differencePercentage) }}%</td>
136+
</tr>
137+
</tbody>
138+
</table>
139+
</div>
140+
</div>
141+
</template>
142+
143+
<style>
144+
.benchmark-report {
145+
background-color: var(--report-bg-color);
146+
border-radius: var(--report-border-radius);
147+
padding: 20px;
148+
margin-bottom: 20px;
149+
box-shadow: var(--report-shadow);
150+
}
151+
.loading, .error {
152+
text-align: center;
153+
padding: 30px;
154+
font-style: italic;
155+
color: #666;
156+
}
157+
.error {
158+
color: var(--report-warning-color);
159+
}
160+
.info {
161+
display: flex;
162+
justify-content: space-between;
163+
flex-wrap: wrap;
164+
margin-bottom: 20px;
165+
}
166+
.info-item {
167+
background-color: var(--report-card-bg);
168+
padding: 10px 15px;
169+
border-radius: 6px;
170+
box-shadow: var(--report-shadow);
171+
margin: 5px;
172+
flex: 1;
173+
min-width: 200px;
174+
}
175+
table {
176+
width: 100%;
177+
border-collapse: collapse;
178+
margin: 20px 0;
179+
background-color: var(--report-card-bg);
180+
box-shadow: var(--report-shadow);
181+
border-radius: 6px;
182+
overflow: hidden;
183+
}
184+
th, td {
185+
padding: 12px 15px;
186+
text-align: left;
187+
border-bottom: 1px solid var(--report-border-color);
188+
}
189+
th {
190+
background-color: var(--report-header-bg);
191+
color: var(--report-header-color);
192+
}
193+
tr:hover {
194+
background-color: var(--report-hover-color);
195+
}
196+
.worker-faster {
197+
color: var(--report-success-color);
198+
font-weight: bold;
199+
}
200+
.main-thread-faster {
201+
color: var(--report-warning-color);
202+
font-weight: bold;
203+
}
204+
</style>

0 commit comments

Comments
 (0)