【问题标题】：Horrible performance on mousedown+mousemove with user-select: none用户选择的 mousedown+mousemove 性能糟糕：无
【发布时间】：2026-02-12 15:50:01
【问题描述】：

标题几乎概括了它。在处理页面上许多不可选择的元素时，我的表现很糟糕，我尝试实现拖放系统。

我有一个计时器设置来显示它的间隔，当您在示例页面上的任意位置单击并移动鼠标时，您会看到间隔穿过屋顶..

有问题的 CSS：

body
{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

删除它，一切都会如您所愿。这些规则是否与 body、div 或实际 span 本身相关联似乎并不重要。

关于这里发生了什么的任何想法？

提前致谢！（这里是小提琴：http://jsfiddle.net/e62pE/2/）

【问题讨论】：

标签： html css performance mousemove textselection

【解决方案1】：

解决方法

为了避免这个问题，我发现有两件事有助于解决这个问题。

仅将 CSS 规则应用于应受此设置影响的元素，并且仅应用于包裹所有这些元素的最高元素。（例如，如果你想影响一个表格中的几行，只影响特定的表格行，而不是整个表格或更糟的是整个文档。）
仅在应避免选择时应用 CSS 规则，然后删除规则。这样可以保持 DOM 干净且响应迅速。

（WebKit Bugzilla 实际上包含描述此问题的bug report。）

我的情况

我在调试与您描述的完全相同的效果时得出了这个结论，在那里我设法创建了一个适用于所有主要浏览器的解决方法。我不确定这是否也适用于您的具体情况，但尽管如此，还是这样吧。

我有一个<table>，有数百、数千甚至更多，<tr>。当用户 SHIFT-单击一行时，我想将样式应用于一系列行，范围从上一个单击的行到 SHIFT-单击的行, 过程中不选择文本。

起初我将user-select: none; CSS 添加到table.user-select-none td，这基本上意味着所有单元格都受到了影响（可以加起来）。

解决方法现在仅将类应用于 SHIFT + 鼠标按下，并且仅应用于范围内的 <tr>，使用 CSS 选择器 tr.user-select-none。在短暂的超时（40 毫秒）之后，该类被移除，以保持 DOM 的整洁和响应。

此解决方法已将选择过程从平均 500 毫秒加快到 50 毫秒，使其成为目前可行的解决方案。

【讨论】：