Slidev项目中Chromium浏览器崩溃问题的分析与解决方案

问题现象

近期在Slidev项目中出现了一个严重的稳定性问题：当用户在Chromium内核的浏览器(如Chrome、Arc等)中运行Slidev演示时，浏览器会在运行一段时间后(通常在20分钟以内)突然崩溃关闭，且不显示任何错误提示。这个问题在macOS系统上尤为明显，表现为浏览器进程异常退出，有时会伴随系统进程runningboardd的CPU占用率飙升。

问题根源

经过技术团队深入排查，发现问题源于Slidev的"唤醒锁定"(wakeLock)功能实现方式。该功能原本设计用于防止设备在演示过程中进入睡眠状态，但在实现上存在两个关键缺陷：

1. 在watchEffect中直接调用了异步的DOM API(navigator.wakeLock.request)
2. 存在潜在的无限循环风险，特别是在结合异步操作时

技术原理分析

Vue的watchEffect机制会在其依赖项变化时重新执行回调函数。当在watchEffect中执行异步操作时，Vue无法追踪异步操作完成后的状态变化，这可能导致：

• 状态更新触发新的watchEffect执行
• 新的执行又触发状态更新
• 形成隐式的无限循环

不同于同步操作中的无限循环(会被Vue检测并抛出错误)，这种异步场景下的循环难以被自动识别，最终导致浏览器资源耗尽而崩溃。

解决方案

Slidev团队提供了三种解决方案，按优先级排序：

1. 升级到最新版本：0.49.27及更高版本已修复此问题，推荐所有用户升级

2. 临时禁用wakeLock功能：在演示文件的frontmatter中添加配置：

wakeLock: false

3. 降级依赖版本：对于暂时无法升级的用户，可以锁定@vueuse/core和@vueuse/math到10.11.1版本

最佳实践建议

基于此次事件，开发者在使用Vue的响应式系统时应注意：

1. 避免在watchEffect中直接调用异步API
2. 对于必须的异步操作，考虑使用watch配合显式的依赖项
3. 复杂的状态交互应该封装到自定义hook或composable中
4. 对于浏览器敏感API(如wakeLock)，增加错误边界处理

后续改进

Slidev团队已将此案例作为典型响应式编程的反模式，计划在文档中增加相关警示内容，并考虑在开发模式下增加异步操作检测机制，帮助开发者提前发现类似问题。