Chrome/V8 在某些元素上缓慢的 onmousemove()答案

【问题标题】：Chrome/V8 slow onmousemove() over certain elementsChrome/V8 在某些元素上缓慢的 onmousemove()
【发布时间】：2011-10-24 23:47:22
【问题描述】：

我正在开发一个基于 jQuery 的音乐播放器，它的主要部分有很长的项目列表（无序列表，每个

中都有

元素，用于获取有关艺术家、专辑和标题的信息）。

您可以在此处访问它的临时公开版本： http://music.sixteennet.co.uk/?anonymous

（所有歌曲都是公开版的无用链接，所以不要费心播放任何东西：P）

首先，简单描述一下这个东西到底是什么：

左侧是一个侧边栏，显示即将播放的歌曲列表。用户在搜索/单击艺术家后选择主列表中的歌曲（单击，shift-click，ctrl-click，你知道的），并通过点击或拖放将它们添加到左侧的播放列表中。我已经完成了所有这些工作（这个问题与如何构建 Javascript 用户界面无关）。

问题：$(window).mousemove()、.mouseup() 和 .mousedown() 包含将框带入视野的函数，高度为 (16 * number of主列表中选定的歌曲）[每个

高 16 像素]。当鼠标移动时，此框随之移动，直到鼠标悬停在播放列表上时，播放列表会改变颜色，如果用户决定使用 mouseup()（取消单击），则将所选歌曲添加到播放列表中。

唯一的问题是，当鼠标在当前可见的选定歌曲框移动时，在 Google Chrome 中该框的移动非常缓慢，但只有当鼠标位于主歌曲列表上时（然而，在显示该框的整个过程中，CPU 使用率一直保持在 100%）。在 Firefox 6 和 IE 9 中，整个移动都很流畅，CPU 使用率也不是 100%（即使在 Athlon 64 3500+ 上也是如此）。（我）在两台 PC 上重复了这个测试，一台运行 Windows 7，另一台运行 Ubuntu Linux。

我非常怀疑这是谷歌浏览器的一个错误，但如果有人愿意仔细阅读源代码并告诉我问题是什么（如果有的话）......你就是我的上帝： )

编辑：我说 Chrome/V8 的原因是因为 Safari，使用相同的渲染引擎（WebKit）没有这个问题（虽然它不如 Firefox/IE9/Opera 流畅）

【问题讨论】：

标签： javascript jquery google-chrome drag-and-drop lag

【解决方案1】：

我将回答我自己的问题，因为我已经找到了解决方案：

在盒子上运行这个 jQuery 函数修复了延迟问题：

$.fn.disableSelection = function() {
  return this.each(function() {
    $(this).attr('unselectable', 'on')
    .css({
      '-moz-user-select':'none',
      '-webkit-user-select':'none',
      'user-select':'none',
      '::selection':'none',
    })
    .each(function() {
      this.onselectstart = function() { return false; };
    });
  });
};

【讨论】：

【解决方案2】：

我发现我的电脑没有延迟...

无论如何，也许您可以尝试通过使用类似下划线的throttle 函数来降低调用事件处理程序的频率

【讨论】：

哦，等等，这是因为匿名登录时，浏览器中几乎没有任何艺术家和专辑。滞后与 DOM 的大尺寸有关。不管怎样，我会试试你说的。谢谢:)
嗯...感谢您的建议，但没有奏效。虽然，那个下划线库看起来很酷，你让我把我的 $(window) 函数重新组织成一个漂亮的 JS 对象：D
如果问题是随着 DOM 的大小而缩放，那么您可能正在鼠标事件中进行昂贵的计算（例如使用 JQuery 选择器）。如果是这种情况，您可以尝试查看是否可以在拖动开始之前只计算一次。
好吧，事件的目标元素是 jQuery()'d 和 parents()'d 以便查看侧边栏是否应该“点亮”（即，如果光标在侧边栏）。但是，即使我注释掉整个部分，Chrome 仍然会做同样的事情。