Creazione div cruscotto, jquery/javascript, performance/best practice

Question

Sto cercando di capire le migliori pratiche in materia di prestazioni durante la creazione di più DIV a una velocità folle. Ad esempio, su ogni evento .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); 
}); 

Quindi, questo funziona tutto bello e dandy, ma è inefficiente mega (specialmente quando provo riempiendo lo spazio tra ogni posizione di spostamento del mouse). Ecco un esempio ...

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

Io davvero non posso figura fuori come migliorare le cose. Credimi, ho provato a fare ricerche ma non ha funzionato molto ... Quello che sto cercando sono alcuni suggerimenti, esempi o collegamenti a migliori pratiche ...

Si noti che mi sto insegnando a codificare . Sono uno studente di Graphic Design e questo è il modo in cui sto trascorrendo la mia estate fuori dalla classe ... Realizzando piccoli progetti per insegnarmi JavasSript, cose divertenti :)

---

Ive ha creato alcuni jsfiddles per mostrare a cosa sto lavorando. ..

Mouse Trail, More Elements - molto molto lento
Mouse Trail, Less Elements - molto lento
Mouse Trail, Bare Bones - lento

Answer 1

ci sono più cattive pratiche in corso qui:

• Utilizzando elementi invece di Tela
• l'utilizzo di tali elementi tramite jQuery
• Abusare che jQuery come se si stesse cercando di farlo rallentare apposta
• Ripieno tutto quanto sopra all'interno di un gestore di MouseMove

il problema principale qui realmente sta usando el ement invece di tela. Dopo aver risolto ciò, l'interazione con DOM dovrebbe diventare minima e quindi correggere anche gli altri punti.

Inoltre, coloro che sostengono che ciò funzioni correttamente non hanno verificato l'utilizzo della CPU. Sul mio Core I5-2500K un core viene immediatamente aggiornato, il che è ridicolo e inaccettabile per qualcosa di banale come il rendering di una traccia del mouse sullo schermo. Posso immaginarlo molto molto lento su un vecchio computer. Quindi sì, è fluido ma al costo di usare una quantità di risorse sufficiente per le schede 10-20 + per fare lo stesso correttamente.

This prende il 7-14% di cpu per me quando si muove il mouse velocemente, this prende il 25%.

Answer 2

Si dovrebbe fare attenzione a non causi scorrimenti e bastone solo per un ridisegno. ->When does reflow happen in a DOM environment?

Quindi la creazione di s non è un'opzione. - Ma non è necessario :)

È sufficiente creare il numero di <div> necessario in futuro e quindi riposizionarli. Se li hai in un array avrai solo bisogno di un numero intero che punta a quello corrente e su ogni movimento del mouse aumenterai quel valore (impostalo su 0 una volta raggiunta la lunghezza dell'array) e riposiziona lo <div> che è puntato a da quel numero.