Skip to content

Commit fc8d79d

Browse files
akinocccakinoccc
committed
feat: using web worker to generate css
1 parent 2a8ffa7 commit fc8d79d

20 files changed

+2607
-13
lines changed

‎.github/workflows/docs-deploy.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ jobs:
4141
uses: actions/upload-pages-artifact@v3
4242
with:
4343
path: packages/docs/.vitepress/dist
44+
name: docs-artifact
4445

4546
deploy:
4647
environment:
@@ -53,3 +54,6 @@ jobs:
5354
- name: Deploy to GitHub Pages
5455
id: deployment
5556
uses: actions/deploy-pages@v4
57+
with:
58+
artifact_name: docs-artifact
59+
path: /

‎.github/workflows/release.yml‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,167 @@ jobs:
4848
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
4949
run: pnpm release
5050

51+
deploy-benchmark-report:
52+
needs: release
53+
runs-on: ubuntu-latest
54+
permissions:
55+
contents: write
56+
pages: write
57+
steps:
58+
- name: Checkout
59+
uses: actions/checkout@v4
60+
with:
61+
fetch-depth: 0
62+
63+
- name: Using pnpm
64+
uses: pnpm/action-setup@v3
65+
with:
66+
version: 9.3.0
67+
68+
- name: Setup Node
69+
uses: actions/setup-node@v4
70+
with:
71+
node-version: 20
72+
cache: pnpm
73+
74+
- name: Install dependencies
75+
run: pnpm install
76+
77+
- name: Run benchmark tests
78+
run: pnpm benchmark:worker
79+
80+
- name: Create Reports Directory
81+
run: |
82+
mkdir -p gh-pages-deploy/benchmark-reports
83+
cp -r benchmark-reports/* gh-pages-deploy/benchmark-reports/
84+
85+
# 创建索引页面
86+
cat > gh-pages-deploy/benchmark-reports/index.html << EOF
87+
<!DOCTYPE html>
88+
<html lang="zh-CN">
89+
<head>
90+
<meta charset="UTF-8">
91+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
92+
<title>Vue Styled Components 性能基准测试报告</title>
93+
<style>
94+
body {
95+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
96+
max-width: 1000px;
97+
margin: 0 auto;
98+
padding: 20px;
99+
line-height: 1.6;
100+
}
101+
h1 { color: #2c3e50; }
102+
.report-list {
103+
list-style: none;
104+
padding: 0;
105+
}
106+
.report-item {
107+
margin-bottom: 10px;
108+
padding: 15px;
109+
border-radius: 8px;
110+
background-color: #f8f9fa;
111+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
112+
}
113+
.report-link {
114+
display: block;
115+
color: #3498db;
116+
font-weight: bold;
117+
text-decoration: none;
118+
}
119+
.report-link:hover {
120+
text-decoration: underline;
121+
}
122+
.report-date {
123+
color: #7f8c8d;
124+
font-size: 0.9em;
125+
margin-top: 5px;
126+
}
127+
</style>
128+
</head>
129+
<body>
130+
<h1>Vue Styled Components 性能基准测试报告</h1>
131+
<p>此页面列出了所有可用的性能基准测试报告。点击链接查看详细报告。</p>
132+
133+
<ul class="report-list" id="reportList">
134+
<!-- 报告列表将通过JavaScript动态生成 -->
135+
<li>正在加载报告列表...</li>
136+
</ul>
137+
138+
<script>
139+
// 动态加载并显示报告列表
140+
async function loadReports() {
141+
const reportList = document.getElementById('reportList');
142+
reportList.innerHTML = '';
143+
144+
try {
145+
// 获取当前目录下的HTML文件列表
146+
const response = await fetch('.');
147+
const text = await response.text();
148+
const parser = new DOMParser();
149+
const doc = parser.parseFromString(text, 'text/html');
150+
const links = Array.from(doc.querySelectorAll('a'))
151+
.filter(a => a.href.endsWith('.html') && a.href !== 'index.html');
152+
153+
// 按修改日期排序（最新的在前）
154+
links.sort((a, b) => {
155+
return b.href.localeCompare(a.href);
156+
});
157+
158+
if (links.length === 0) {
159+
reportList.innerHTML = '<li>暂无可用报告</li>';
160+
return;
161+
}
162+
163+
// 创建报告列表
164+
links.forEach(link => {
165+
const fileName = link.href.split('/').pop();
166+
// 从文件名中提取时间戳
167+
const dateMatch = fileName.match(/benchmark-report-(.*?)\.html/);
168+
let dateStr = '';
169+
170+
if (dateMatch && dateMatch[1]) {
171+
// 将时间戳转换为更友好的格式
172+
const timestamp = dateMatch[1].replace(/T/g, ' ').replace(/-/g, ':');
173+
try {
174+
const date = new Date(timestamp);
175+
dateStr = date.toLocaleString('zh-CN');
176+
} catch(e) {
177+
dateStr = timestamp;
178+
}
179+
}
180+
181+
const li = document.createElement('li');
182+
li.className = 'report-item';
183+
li.innerHTML = `
184+
<a href="${fileName}" class="report-link">性能测试报告 - ${dateStr || fileName}</a>
185+
<div class="report-date">生成于: ${dateStr || '未知时间'}</div>
186+
`;
187+
reportList.appendChild(li);
188+
});
189+
} catch (error) {
190+
reportList.innerHTML = '<li>加载报告列表失败</li>';
191+
console.error('加载报告列表失败:', error);
192+
}
193+
}
194+
195+
// 页面加载后执行
196+
document.addEventListener('DOMContentLoaded', loadReports);
197+
</script>
198+
</body>
199+
</html>
200+
EOF
201+
202+
- name: Deploy to GitHub Pages
203+
uses: JamesIves/github-pages-deploy-action@v4
204+
with:
205+
folder: gh-pages-deploy
206+
target-folder: benchmark-reports
207+
clean: false
208+
clean-exclude: |
209+
!benchmark-reports/**/*
210+
token: ${{ secrets.GITHUB_TOKEN }}
211+
51212
sync-beta:
52213
runs-on: ubuntu-latest
53214
needs: release

‎README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,3 +186,47 @@ const StyledDiv = styled.div`
186186

187187
- [styled-components](https://github.com/styled-components).
188188
- [stylis](https://github.com/thysultan/stylis)
189+
190+
## Worker性能测试
191+
192+
`vue-styled-components`使用Web Worker进行复杂样式计算，以避免阻塞主线程。我们提供了性能测试工具来比较Worker和主线程在不同场景下的性能差异。
193+
194+
### 运行测试
195+
196+
```bash
197+
# 在浏览器中运行可视化性能测试
198+
npm run test:worker
199+
200+
# 在命令行中运行性能测试
201+
npm run benchmark:worker
202+
```
203+
204+
### 测试代码结构
205+
206+
性能测试相关的代码位于项目根目录的`worker-benchmark`文件夹中：
207+
208+
- `worker-benchmark.ts` - 核心的基准测试实现
209+
- `worker-performance.ts` - 单元测试形式的性能测试
210+
- `api.ts` - 提供用于基准测试和可视化的API
211+
- `worker-demo.html` - 带有图表显示的可视化测试页面
212+
213+
### 测试场景
214+
215+
测试覆盖以下几个场景：
216+
217+
1. **简单样式计算** - 少量简单的CSS规则
218+
2. **复杂样式计算** - 多个复杂的CSS规则
219+
3. **大量样式计算** - 大量的CSS规则，模拟大型应用场景
220+
4. **混合样式计算** - 混合简单和复杂的CSS规则
221+
5. **阈值边界测试** - 测试接近复杂度阈值的场景
222+
6. **Worker不可用场景** - 模拟Worker不可用时的回退机制
223+
224+
### 性能优化
225+
226+
根据测试结果，我们实现了智能的样式计算策略：
227+
228+
- 对于简单样式（规则数量少于阈值），直接在主线程中计算，避免Worker创建和通信开销
229+
- 对于复杂样式，使用Worker异步计算，避免阻塞主线程
230+
- 当Worker不可用时，自动回退到主线程计算
231+
232+
这种策略在保持良好性能的同时，确保了样式计算的可靠性和兼容性。

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"lint:fix": "eslint . --fix",
1414
"typecheck": "vue-tsc --noEmit",
1515
"prepare": "husky",
16-
"release": "semantic-release"
16+
"release": "semantic-release",
17+
"benchmark:worker": "pnpm -F worker-benchmark start"
1718
},
1819
"devDependencies": {
1920
"@antfu/eslint-config": "^4.4.0",
@@ -30,6 +31,7 @@
3031
"husky": "^9.0.11",
3132
"jsdom": "^25.0.1",
3233
"semantic-release": "^24.1.0",
34+
"tsx": "^4.19.4",
3335
"typescript": "^5.7.2",
3436
"vite": "^6.1.6",
3537
"vite-plugin-dts": "^4.0.3",

0 commit comments

Comments
 (0)