Creación div múltiple, jquery/javascript, rendimiento/mejores prácticas

Question

Estoy tratando de descubrir las mejores prácticas en cuanto a rendimiento al crear múltiples DIV a una velocidad insana. Por ejemplo, en cada caso .mousemove ...

$('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); 
}); 

Por lo tanto, esto funciona todo muy bien y dandy pero es ineficiente Mega (especialmente cuando intento de rellenar el espacio entre cada posición de movimiento del ratón). He aquí un ejemplo ...

$('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); 
}); 

que realmente no puede encontrar la manera de mejorar las cosas. Créanme, he intentado investigar pero no ha hecho mucho bien ... Lo que estoy buscando es algunas sugerencias, ejemplos o enlaces a mejores prácticas ...

Tenga en cuenta que me estoy enseñando a programar . Soy estudiante de Diseño Gráfico y así es como paso mi verano fuera de clase ... Haciendo pequeños proyectos para enseñarme JavasSript, cosas divertidas :)

---

He configurado algunos jsfiddles para mostrar en qué estoy trabajando. ..

Mouse Trail, More Elements - muy lento
Mouse Trail, Less Elements - Muy lento
Mouse Trail, Bare Bones - Slow

Answer 1

hay múltiples prácticas malas pasando aquí:

• Utilizando elementos en vez de lienzo
• uso de estas partes a través de jQuery
• Abusar que jQuery como si estuviera tratando de hacer las cosas con calma a propósito
• Relleno de todo lo anterior dentro de un manejador de mousemove

la raíz del asunto aquí realmente está utilizando el sistemas en lugar de lienzo. Después de solucionar eso, la interacción con DOM debería ser mínima y, por lo tanto, también soluciona los otros puntos.

Además, aquellos que afirman que esto funciona bien no verificaron el uso de su CPU. En mi Core I5-2500K, un núcleo se maximiza al instante, lo cual es ridículo e inaceptable para algo trivial como representar un rastro de ratón en la pantalla. Puedo imaginarme que esto es muy lento en una computadora más vieja. Así que sí, es sencillo pero a costa de usar una cantidad de recursos suficiente para que 10-20 + pestañas hagan lo mismo de manera adecuada.

This toma 7-14% de la CPU para mí cuando muevo el mouse rápidamente, this toma el 25%.

Answer 2

Usted debe tener cuidado de no causar un reflujo y se adhieren sólo para un repintado. ->When does reflow happen in a DOM environment?

Así que la creación de <div> s no es una opción. - Pero no es necesario :)

Simplemente crea tantos <div> s como necesites en el futuro y luego recolocalos. Si los tiene en una matriz solo necesitaría un número entero que apunta al más actual y en cada movimiento del mouse incrementaría ese valor (configúrelo en 0 una vez que alcance la longitud de la matriz) y reposicione el <div> apuntado a por ese número.