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

Question

我正在开发一个基于jQuery的音乐播放器,它在主要部分有很长的项目列表(无序列表,每个<li>中有<div>元素,有关艺术家,专辑和标题的信息).

你可以在这里访问它的临时公开版本:http: //music.sixteennet.co.uk/？匿名

(所有歌曲都是公共版本的哑巴链接,所以不要打扰任何东西:P)

首先,快速描述一下究竟是什么:

左侧是侧边栏,显示即将播放的歌曲列表.用户在搜索/单击艺术家后选择主列表中的歌曲(单击,按住Shift键单击,按住Ctrl键单击,您知道演练),然后通过点击或拖放将它们添加到左侧的播放列表中.我已经完成了所有这些工作(这个问题不是关于如何构建Javascript用户界面).

问题:$(window).mousemove(),. mouseup()和.mousedown()包含用于查看框的功能,高度以像素为单位(16*主列表中所选歌曲的数量)[每个<li >是16px高].当移动鼠标时,此框随之移动,直到鼠标在播放列表上方,播放列表改变颜色,如果用户决定鼠标()(取消单击),则所选歌曲将添加到播放列表中.

唯一的一点是,当鼠标移动时,当前可见的选定歌曲框移动,在谷歌浏览器中,该框的移动是非常滞后的,但只有当鼠标悬停在主歌曲列表上时(但是,CPU的使用率在整个时间框显示).在Firefox 6和IE 9中,整个运动流畅,CPU使用率不是100%(即使在Athlon 64 3500+上).我在两台PC上重复了这个测试,一台运行Windows 7,另一台运行Ubuntu Linux.

我非常怀疑这是谷歌Chrome的一个错误,但如果有人有善意通过源代码并告诉我问题是什么(如果有的话)......你是我的上帝:)

编辑:我之所以说Chrome/V8是因为Safari使用相同的渲染引擎(WebKit)没有这个问题(尽管它不如Firefox/IE9/Opera那么流畅)

Answer 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; };
    });
  });
};