<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>基准测试 | 锤子前端</title><description>Now vibe coding, so learning hammer FE ?</description><link>https://channel.meo-ai.com</link><item><title>《Vitest 5.0 正式发布》</title><link>https://channel.meo-ai.com/posts/704</link><guid isPermaLink="true">https://channel.meo-ai.com/posts/704</guid><pubDate>Thu, 10 Sep 2026 23:19:53 GMT</pubDate><content:encoded>&lt;span class=&quot;post-title-source&quot;&gt;《Vitest 5.0 正式发布》&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;标签：&lt;br /&gt;&lt;a href=&quot;/search/result?q=%23%E5%89%8D%E7%AB%AF&quot; title=&quot;#前端&quot;&gt;#前端&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23JavaScript&quot; title=&quot;#JavaScript&quot;&gt;#JavaScript&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23Vitest&quot; title=&quot;#Vitest&quot;&gt;#Vitest&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6&quot; title=&quot;#测试框架&quot;&gt;#测试框架&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95&quot; title=&quot;#单元测试&quot;&gt;#单元测试&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96&quot; title=&quot;#性能优化&quot;&gt;#性能优化&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23BrowserMode&quot; title=&quot;#BrowserMode&quot;&gt;#BrowserMode&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23MockAPI&quot; title=&quot;#MockAPI&quot;&gt;#MockAPI&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E5%9F%BA%E5%87%86%E6%B5%8B%E8%AF%95&quot; title=&quot;#基准测试&quot;&gt;#基准测试&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E6%96%AD%E8%A8%80%E6%94%B9%E8%BF%9B&quot; title=&quot;#断言改进&quot;&gt;#断言改进&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E4%BB%A3%E7%A0%81%E8%A6%86%E7%9B%96%E7%8E%87&quot; title=&quot;#代码覆盖率&quot;&gt;#代码覆盖率&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;总结：&lt;br /&gt;&lt;br /&gt;Vitest 5.0 于 2026 年 9 月 3 日正式发布，本次大版本以性能优化为核心，同时带来 Trace View 追踪视图、嵌套项目配置、&lt;code&gt;vi.when&lt;/code&gt; 条件 Mock、基准测试重写等多项重要更新，并默认启用更严格的断言与 &lt;code&gt;clearMocks&lt;/code&gt; 行为，要求 Vite &amp;gt;= 6.4.0 和 Node.js &amp;gt;= 22.12.0。&lt;br /&gt;&lt;br /&gt;文章要点：&lt;br /&gt;&lt;br /&gt;1. &lt;b&gt;性能大幅提升&lt;/b&gt;：通过共享 Vite 服务器、稳定的文件系统模块缓存、减少主进程与 worker 往返、加速 vm 池与浏览器模式等优化，整体测试速度提升 8%–53%，大型项目（1,280 模块）运行时间从 7.24s 降至 5.83s。&lt;br /&gt;&lt;br /&gt;2. **新增 &lt;code&gt;vitest doctor&lt;/code&gt; 诊断工具**：自动运行替代配置并推荐更快的选项，同时默认输出性能提示，帮助用户发现配置瓶颈。&lt;br /&gt;&lt;b&gt;Browser Mode 内置 Trace View&lt;/b&gt;ew**：开启 &lt;code&gt;browser.traceView&lt;/code&gt; 后，可记录交互、断言和 DOM 快照，支持逐步回放测试过程，便于调试 CI 失败。&lt;br /&gt;&lt;b&gt;嵌套项目与配置继承&lt;/b&gt;继承**：内联项目默认继承根配置（无需 &lt;code&gt;extends: true&lt;/code&gt;），被引用的配置文件可声明自己的 &lt;code&gt;projects&lt;/code&gt;，支持多级嵌套结构。&lt;br /&gt;&lt;br /&gt;5. **新 API &lt;code&gt;vi.when&lt;/code&gt;**：支持按参数定义不同的 Mock 返回值，支持深度相等和 &lt;code&gt;expect.any()&lt;/code&gt; 等非对称匹配器，并可限制调用&lt;b&gt;基准测试 API 重写&lt;/b&gt;API 重写**：&lt;code&gt;bench&lt;/code&gt; 变为测试上下文 fixture，可在常规 &lt;code&gt;test()&lt;/code&gt; 中使用，支持 fixtures、生命周期钩子、重试和断言，结果可存储并与基线&lt;b&gt;定位器错误显示 ARIA 树&lt;/b&gt;ARIA 树**：浏览器模式下定位失败时，同时打印 ARIA 快照和 HTML，帮助快速理解 &lt;code&gt;getByRole&lt;/code&gt; 等查询的匹配逻辑；定位器默认启用严格模式。&lt;br /&gt;&lt;br /&gt;8. **Mock &lt;code&gt;Temporal&lt;/code&gt; API**：假计时器现在同时模拟 &lt;code&gt;Temporal&lt;/code&gt; 和 &lt;code&gt;Date&lt;/code&gt;，适用于 &lt;code&gt;vi.useFakeTimers()&lt;/code&gt; 和 &lt;code&gt;vi.setSystemTime()&lt;/code&gt;。&lt;br /&gt;&lt;br /&gt;9. **更严格的断言行为**：未 await 的异步断言（&lt;code&gt;resolves&lt;/code&gt;、&lt;code&gt;rejects&lt;/code&gt; 等）现在会导致测试失败；&lt;code&gt;expect.poll&lt;/code&gt; 超时后拒绝并支持 &lt;code&gt;AbortSignal&lt;/code&gt; 取消。&lt;br /&gt;&lt;br /&gt;10. **&lt;code&gt;clearMocks&lt;/code&gt; 默认启用**：每个测试前自动清除 Mock 调用历史，避免测试间&lt;b&gt;报告器统一输出目录&lt;/b&gt;。&lt;br /&gt;&lt;br /&gt;11. **报告器统一输出目录**：所有报告器输出集中到 &lt;code&gt;.vitest&lt;/code&gt; 目录，减少 &lt;code&gt;.gitignore&lt;/code&gt; 配置；HTML 报告器支持 &lt;code&gt;singleFile&lt;/code&gt; 选项生成单文件报告。&lt;br /&gt;&lt;br /&gt;12. **其他实用改进**：新增 &lt;code&gt;--repeats&lt;/code&gt; 选项重复运行测试以排查 flaky 测试；&lt;code&gt;injectCjsGlobals&lt;/code&gt; 可禁用 CJS 全局注入；覆盖率工具切换到维护中的 &lt;code&gt;@vitest/istanbuljs&lt;/code&gt; 包。&lt;br /&gt;&lt;br /&gt;13. **破坏性变更**：要求 Vite &amp;gt;= 6.4.0 和 Node.js &amp;gt;= 22.12.0，升级前建议查阅迁移指南。&lt;br /&gt;&lt;br /&gt;URL：&lt;br /&gt;&lt;a href=&quot;https://vitest.dev/blog/vitest-5&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; title=&quot;https://vitest.dev/blog/vitest-5&quot;&gt;https://vitest.dev/blog/vitest-5&lt;/a&gt;&lt;a class=&quot;tgme_widget_message_link_preview&quot; href=&quot;https://vitest.dev/blog/vitest-5&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; title=&quot;Vitest 5.0 Release Announcement&quot;&gt;
  
  &lt;div class=&quot;link_preview_site_name accent_color&quot;&gt;vitest.dev&lt;/div&gt;
  &lt;img class=&quot;link_preview_image&quot; alt=&quot;Announcing Vitest 5.0&quot; src=&quot;/static/https://cdn4.telesco.pe/file/pVrT7Df8_yhALcjdMSbUXlZgBUnkLka7DoWlX0BhkZtBrRqSCZrphE1n9cwrXrwmFQ9nnTNX5oynSmNrAb2xH-ppzjn20jcze0Kp2GlUi59p1y25xNY62U72jnzS_5aOP6cLJASvUASy5ktk4AHU_wNqd0UVHjwvVIyIizEBdw9f2sgrruYRqN2YTeWz_Im1nBEOJUsi0BsGznnVx9_ce1llIGPkmPJ1caONhNlcFeZ-7-wqNB3Am6YwsU2TLz9lcs2nOH1RU4dQrwCVWvIw5uVxbyXrnem9JCUArwtunI_9LIC5h-nYxLBiIInNtQeercqg-0I_v_eyvWNu4aCh2g.jpg&quot; width=&quot;1200&quot; height=&quot;630&quot; loading=&quot;eager&quot; /&gt;
  &lt;div class=&quot;link_preview_title&quot;&gt;Announcing Vitest 5.0&lt;/div&gt;
  &lt;div class=&quot;link_preview_description&quot;&gt;Vitest 5.0 Release Announcement&lt;/div&gt;
&lt;/a&gt;</content:encoded></item><item><title>《前端内存泄漏：500仓库静态分析与五场景基准测试实证研究》</title><link>https://channel.meo-ai.com/posts/572</link><guid isPermaLink="true">https://channel.meo-ai.com/posts/572</guid><pubDate>Mon, 09 Mar 2026 01:18:51 GMT</pubDate><content:encoded>&lt;span class=&quot;post-title-source&quot;&gt;《前端内存泄漏：500仓库静态分析与五场景基准测试实证研究》&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;标签：&lt;a href=&quot;/search/result?q=%23%E5%89%8D%E7%AB%AF&quot; title=&quot;#前端&quot;&gt;#前端&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F&quot; title=&quot;#内存泄漏&quot;&gt;#内存泄漏&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96&quot; title=&quot;#性能优化&quot;&gt;#性能优化&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23React&quot; title=&quot;#React&quot;&gt;#React&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23Vue&quot; title=&quot;#Vue&quot;&gt;#Vue&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23Angular&quot; title=&quot;#Angular&quot;&gt;#Angular&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23useEffect&quot; title=&quot;#useEffect&quot;&gt;#useEffect&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E9%9D%99%E6%80%81%E5%88%86%E6%9E%90&quot; title=&quot;#静态分析&quot;&gt;#静态分析&lt;/a&gt; &lt;a href=&quot;/search/result?q=%23%E5%9F%BA%E5%87%86%E6%B5%8B%E8%AF%95&quot; title=&quot;#基准测试&quot;&gt;#基准测试&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;总结（一段话概括）&lt;br /&gt;该研究对500个开源前端仓库（React/Vue/Angular）进行AST静态分析，发现86%的代码库存在至少一处缺失清理的内存泄漏模式，共识别55,864个潜在泄漏点，其中定时器清理缺失占比最高（43.9%）。通过五个控制变量的基准测试（各50轮×100次挂载循环）证实：每处未清理模式每次挂载/卸载循环平均泄漏约8KB内存，呈线性累积趋势；而正确清理的版本内存增长接近零（约2KB总计）。研究揭示了内存泄漏在前端生产代码中的普遍性及其对长会话应用（如仪表板、视频会议）的性能威胁，并提供了针对性的修复方案。&lt;br /&gt;&lt;br /&gt;文章要点：&lt;br /&gt;- 高普遍性：扫描714,217个文件发现55,864处潜在泄漏，430/500个仓库（86%）存在至少一处缺失清理模式，涵盖Kibana、Next.js等知名项目&lt;br /&gt;- 主要泄漏源：定时器未清理（43.9%，22,384处）居首，其次是事件监听器（19.0%）、订阅未取消（13.9%）、useEffect无清理函数（9.3%）&lt;br /&gt;- 统一泄漏成本：五个跨框架场景（React useEffect、Vue onMounted、Angular subscribe、Vue watch、RAF）均显示每循环约8KB线性内存增长，标准差极小（±0.6–37KB），而正确清理版本仅2-3KB噪声基线&lt;br /&gt;- 统计显著性：效应量Cohen&apos;s d &amp;gt; 200（BAD与GOOD分布零重叠），p &amp;lt; 0.001，统计功效超99.99%，证实清理缺失是内存占用的主导变量&lt;br /&gt;- 框架差异：React占发现总量62.3%（样本加权），Vue的&lt;code&gt;watch&lt;/code&gt;未存储stop handle（3,989处）和Angular的&lt;code&gt;.subscribe()&lt;/code&gt;未取消（5,327处）均为高危模式&lt;br /&gt;- 高危上下文：组件生命周期代码（32.9%）和事件绑定（24.5%）是高发区，因路由切换、标签页切换会频繁触发挂载/卸载&lt;br /&gt;- 实际影响：单泄漏模式200次导航累积1.6MB，多模式叠加可达8MB/会话，足以触发移动端浏览器（iOS Safari 80-120MB阈值）杀标签页&lt;br /&gt;- 修复成本低：92.3%的修复仅需单行代码（返回清理函数、存储stop handle、takeUntil模式），ROI极高&lt;br /&gt;- 工具链缺口：现有ESLint规则（如react-hooks/exhaustive-deps）无法检测清理函数缺失，需借助AST级静态分析或生产环境堆内存监控&lt;br /&gt;&lt;br /&gt;文章URL&lt;br /&gt;&lt;a href=&quot;https://stackinsight.dev/blog/memory-leak-empirical-study/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; title=&quot;https://stackinsight.dev/blog/memory-leak-empirical-study/&quot;&gt;https://stackinsight.dev/blog/memory-leak-empirical-study/&lt;/a&gt;&lt;a class=&quot;tgme_widget_message_link_preview&quot; href=&quot;https://stackinsight.dev/blog/memory-leak-empirical-study&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; title=&quot;We scanned 500 public React, Vue, and Angular repositories with AST-based static analysis and found 55,864 missing-cleanup patterns — 86% of repos had at least one. Then we benchmarked five common leak scenarios (useEffect listeners, onMounted timers, RxJS…&quot;&gt;
  
  &lt;div class=&quot;link_preview_site_name accent_color&quot;&gt;StackInsight&lt;/div&gt;
  &lt;img class=&quot;link_preview_image&quot; alt=&quot;Frontend Memory Leaks: A 500-Repository Static Analysis and Five-Scenario Benchmark Study&quot; src=&quot;/static/https://cdn4.telesco.pe/file/hEofUcHKImljjSdNNomsaULhwTkWMrHvkXQyYHDxHGQHIsp13KL5hWl6LKGe1iGqPtiWQ4e0JNvbVpZGFfjGZWU4Hf12wMSSQR-q8srtHtW9d3RWvqG_mKv3Mc4WXoPYwYGw8Rbjhm5c1yUnQlLO6yD-S7Da_Ua0HHzwy8WzzM_zc_goAZGsppDS7J06NWaFHAoFA0nlEiRrzpZEkNjTqBMpFmz1gfYVOQaNXtxrFEagxPW6UFhpo89m_AejAuUPkVN9xP6aQ1DrdmOasEESRDARQO-xf__kSHu5xjA2l5JcYsORexRmG69tBw1QMxpd-4G0-Zv6-f_QeiAWJ86WwA.jpg&quot; width=&quot;1200&quot; height=&quot;630&quot; loading=&quot;eager&quot; /&gt;
  &lt;div class=&quot;link_preview_title&quot;&gt;Frontend Memory Leaks: A 500-Repository Static Analysis and Five-Scenario Benchmark Study&lt;/div&gt;
  &lt;div class=&quot;link_preview_description&quot;&gt;We scanned 500 public React, Vue, and Angular repositories with AST-based static analysis and found 55,864 missing-cleanup patterns — 86% of repos had at least one. Then we benchmarked five common leak scenarios (useEffect listeners, onMounted timers, RxJS…&lt;/div&gt;
&lt;/a&gt;</content:encoded></item></channel></rss>