Geek Answers Handbook

Chrome / V8 slow onmousemove () over some elements

I am developing a jQuery-based music player that has a long list of elements in the main section (an unordered list with <div> elements in each <li>, for information about the artist, album and title).

Here you can access its temporary public version: http://music.sixteennet.co.uk/?anonymous

(All songs are dud links in the public version, so don't worry about anything: P)

First, a brief description of what exactly this thing is:

On the left is the sidebar, which displays a list of songs. The user selects songs in the main list (click, click on click, ctrl-click, you know the exercise) after searching / clicking artists and adding them to the playlist on the left, either by clicking or dragging . It all works for me (this question does not concern how to create a Javascript user interface).

Problem : $ (window) .mousemove () ,. mouseup () and .mousedown () contain functions for displaying a window with a height in pixels (16 * the number of selected songs in the main list) [each <li> has a height of 16 pixels]. When the mouse moves, this field moves with it until the mouse moves over the playlist, the playlist changes color, and if the user decides mouseup () (un-click), the selected songs will be added to the playlist.

The only thing when the mouse moves with the selected box at present is that the movement of the box in Google Chrome is incredibly backward, but only when the mouse is above the list of main songs (however, the processor load got stuck 100% during the whole window display). In Firefox 6 and IE 9, the movement is smooth, and the CPU usage is not 100% (even on Athlon 64 3500+). This test was repeated (by me) on two PCs, one of which is running Windows 7, and the other with Ubuntu Linux.

I very much suspect that this is a bug with Google Chrome, but if anyone has a good will to go through the source code and tell me what the problem is (if any) ... you are God to me :)

EDIT: , Chrome/V8, , Safari, (WebKit), ( , Firefox/IE9/Opera)

+5
2

, :

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; };
    });
  });
};
+4

...

, , , , - throttle function

+1

More articles:


All Articles