1. 问题现象
在基于vue-draggable的项目开发中，部分机型（H3C笔记本）在执行拖拽操作时，浏览器标签页会立即崩溃（闪退）。
- 测试背景：开发机与问题机硬件型号一致，但问题机100%触发崩溃。
- 数据特征：崩溃不仅发生在6000个节点的高负载页面，在2000个节点的常规页面中同样存在。
- 复现动作：鼠标点击并开始移动的瞬间闪退。
2. 排查过程
为了定位原因，进行了以下交叉测试：
- 节点数量变量：减少节点至2000个，问题依然存在，排除纯粹的节点过多导致OOM原因。
- GPU 加速变量：在Chrome设置中关闭硬件加速。
- 结果：依然闪退。
- 结论：排除显卡驱动在硬件加速环节的计算错误。
- 模式变量：开启
vue-draggable的force-fallback模式。- 结果：闪退问题消失，拖拽功能恢复正常。
3. 原因分析
闪退的根本原因在于 HTML5原生拖拽 API 的底层实现与系统环境冲突。
- Ghost Image（位图快照）生成机制：原生拖拽启动时，浏览器内核需要调用操作系统接口，为被拖拽元素生成一个位图快照。这是一个“黑盒”操作。
- 底层实现崩溃：由于 2000 节点也会崩溃，说明并非资源耗尽，而是浏览器在尝试对包含复杂 CSS 或特定 DOM 结构的元素进行栅格化快照时，触发了内核级错误或与系统DND 接口的通讯异常。
- 进程保护机制：当原生API调用导致底层渲染进程发生不可预知的内存访问错误或逻辑死锁时，浏览器为了保护系统稳定，会直接结束当前渲染进程。
4. 解决方案
核心策略：弃用原生API，改用模拟拖拽
通过配置 vue-draggable（基于Sortable.js）强制使用JavaScript模拟拖拽逻辑。
- 代码实现：
<draggable
v-model="list"
:force-fallback="true"
:fallback-tolerance="3"
fallback-class="dragging-item"
>
</draggable>
样式修复：防止文本选中
在模拟模式下，鼠标移动会触发浏览器的默认文本选中行为，表现为页面出现蓝色阴影。
- CSS 处理：
/* 针对可拖拽项禁用文本选择 */
.draggable-item {
user-select: none;
-webkit-user-select: none;
}
5. 结论
- 原生API局限性：HTML5原生拖拽在处理含有较多DOM节点（即使是2000个）的复杂元素时，在特定系统环境下存在稳定性隐患。
- 稳定性优先：在无法控制用户硬件和驱动环境的情况下，建议在B端复杂应用中默认启用
force-fallback: true。 - 排查经验：GPU占用率升高和闪退并不一定意味着计算量过载，也可能是底层接口调用失败导致的系统异常。
