页面卡顿主因是拖拽引发的高频dom操作、重排与事件计算，叠加多列表渲染压力；具体包括强制同步布局、节点频繁销毁重建、事件争抢主线程、动画状态失控、滚动耦合阻塞及虚拟化失效。
多列表拖拽后页面卡顿，核心原因不是“拖拽动作本身”，而是拖拽过程中持续触发的高频 DOM 操作、节点重排与事件计算，叠加了大量可视元素带来的渲染压力。
DOM 节点爆炸式增长
每次拖拽排序，框架（如 Sortable.js、Vue.Draggable）默认会重新计算所有项的位置，并可能重建部分 DOM 结构。当多个列表共存且每列表含上百项时：
- 一个拖拽动作可能触发数百次 getBoundingClientRect 或 offsetTop 查询，引发强制同步布局（reflow）
- 列表间交换项时，若未做 key 复用或节点复用，浏览器会销毁旧节点、创建新节点，内存压力陡增
- 滚动容器内嵌多个可拖拽列表，每个都监听
mousemove/touchmove，事件处理函数争抢主线程
动画与过渡效果加重负担
多数拖拽库默认开启 CSS 动画（如 animation: 150ms），在多列表场景下问题被放大：
- 每个列表项都应用
transform+transition，浏览器需为每个元素维护独立合成层 - 动画未完成时再次触发拖拽（比如快速连续操作），导致动画状态队列堆积、样式计算失控
- 移动端 GPU 合成能力有限，叠加多个列表的动画，帧率极易跌破 30fps
滚动与拖拽逻辑耦合失衡
当拖拽发生在带滚动的容器中（如 overflow-y: auto 的面板），容易形成恶性循环：
- 拖拽移动时，容器自动滚动以跟随光标，触发频繁
scroll事件 -
scroll回调里若做了数据过滤、高度重算或setData（小程序）/forceUpdate（Vue/React），直接阻塞拖拽响应 - 多个列表共享同一滚动上下文（例如左右分栏），滚动事件互相干扰，定位偏移累积
未启用虚拟化或渲染策略失效
多列表场景下，若仅对单个列表做虚拟滚动，但拖拽跨列表交互时仍加载全量数据，优化即被绕过：
- 拖拽目标列表尚未渲染的项被临时插入，导致“不可见区域”突然参与布局计算
- 虚拟滚动依赖固定行高，而多列表往往结构不一（有图/无图、多行文本/单行），
itemSize预估失准，触发反复重绘 - 拖拽占位符（ghost element）未隔离渲染，随滚动一起被频繁创建销毁
