Mulching div, jquery / javascript, performance / best practice

Question

I am trying to figure out best practices regarding performance when creating multiple DIVs at insane speeds. For example, on every .mousemove event ...

$('head').append("<style>.draw {width: 20px; height: 20px; position:fixed;</style>"); $(document).mousemove(function(mouseMOVE) { //current mouse position var mouseXcurrent = mouseMOVE.pageX; var mouseYcurrent = mouseMOVE.pageY; //function to create div function mouseTRAIL(mouseX, mouseY, COLOR) { $('body').append("<div class='draw' style='top:" + mouseY + "px; left:" + mouseX + "px; background: " + COLOR + ";'></div>"); } // function call to create <div> at current mouse positiion mouseTRAIL(mouseXcurrent, mouseYcurrent, '#00F'); // Remove <div> setTimeout(function() { $('.draw:first-child').remove(); }, 250); }); 

So, this works all well and dandy, but it is mega inefficient (especially when I try to fill the space between each position of mouse movement). Here is an example ...

 $('head').append("<style>.draw {width: 20px; height: 20px; position:fixed;</style>"); $(document).mousemove(function(mouseMOVE) { //current mouse position var mouseXcurrent = mouseMOVE.pageX; var mouseYcurrent = mouseMOVE.pageY; // function to create div function mouseTRAIL(mouseX, mouseY, COLOR) { $('body').append("<div class='draw' style='top:" + mouseY + "px; left:" + mouseX + "px; background: " + COLOR + ";'></div>"); } // function call to create <div> at current mouse positiion mouseTRAIL(mouseXcurrent, mouseYcurrent, '#00F'); // variabls to calculate position between current and last mouse position var num = ($('.draw').length) - 3; var mouseXold = parseInt($('.draw:eq(' + num + ')').css('left'), 10); var mouseYold = parseInt($('.draw:eq(' + num + ')').css('top'), 10); var mouseXfill = (mouseXcurrent + mouseXold) / 2; var mouseYfill = (mouseYcurrent + mouseYold) / 2; // if first and last mouse postion exist, function call to create a div between them if ($('.draw').length > 2) { mouseTRAIL(mouseXfill, mouseYfill, '#F80'); } // Remove <div> setTimeout(function() { $('.draw:first-child').remove(); $('.draw:nth-child(2)').remove(); }, 250); }); 

I really cannot understand how to improve the situation. Believe me, Ive tried to research, but he did not do much good ... What I'm looking for are some suggestions, examples or links to best practices ...

Please note that I teach the code. I am a graphic design student, and this is how I spent my summer outside the classroom ... Doing small projects to teach myself JavasSript, fun stuff :)

---

Ive created some jsfiddles to show that Im working on ...

Mouse track, additional items - Very slow •
Mouse, fewer items - very slow
Muscle Track, Bare Bones - Slow

Answer 1

A lot of bad practices happen here:

• Using items instead of canvas
• Using these elements through jQuery
• Abusing this jQuery as if you were trying to make it slow [/ li>
• Overlay all the above in the mousemove handler

The root problem here is the use of elements instead of canvas. After fixing this interaction with the DOM, it should become minimal and, therefore, fix other points.

In addition, those who claim that this works great did not test their CPU usage. On my Core I5-2500K, one core is instantly enlarged, which is ridiculous and unacceptable for something trivial, like displaying a mouse on the screen. I very well imagine that it is very slow on an older computer. So yes, it is smooth, but by using the amount of resources sufficient for 10-20 + tabs to do the same thing correctly.

This requires a processor of 7-14% when moving the mouse quickly, this takes 25%.

Answer 2

You must be careful not to cause re-melting and only stick to the redraw. → When does overflow occur in the DOM environment?

Thus, creating a <div> not an option. - But you do not need :)

Just create as many <div> as you need in the future, and then move them. If you have them in the array, you only need an integer that indicates the current at most and for each mouse movement, you would increase this value (set it to 0 when it reaches the length of the array) and move the <div> to indicate This number.