StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery mouseenter+leave killing performance
text
Body
copied!<p>Problem: Each time I go through a pair of mouseenter-mouseleave event-handlers my browser gets slower. </p> <p>I have another (unrelated) reziable() element, that's already quite slow. But after ~ 50 iterations through the mouseenter-mouseleave events the resizble becomes almost unusable.<br> That's how I noticed the problem </p> <p>Scenario: a bunch of stamp-sized divs each contains user-input. When I mouse-over them they swell up to reveal the full content, and when I mouse-out they shrink back to stamp-size again.<br> There's a bit of calculation going on, using both local and global variables, determining the full size, before the inflation animation (negative margins) starts. The shrinking just animates the margins back to zero. </p> <p>Watching the system-monitor, I can see then the browser (FF, chrome and opera) is eating memory quite fiercly, when I mouse-over these boxes repeatedly...<br> - also remove()'ing the stamps (and thus their events) doesn't make the browser faster again. It stays agonizingly slow until I reload the entire page.. </p> <p>Any idea as to what I could be doing wrong ?<br> PS: The actual code is several hundred lines, so I'll spare you that missery for now :) </p> <p>EDIT: The code is here: <a href="http://dagfordag.dk/tegn.js" rel="nofollow">http://dagfordag.dk/tegn.js</a> The function tegnIkon() creates a div, does some initial size-calculation, and then attaches the two events.<br> No more events are being bound after that.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload