Создание нескольких div, jquery/javascript, производительность/рекомендации

Я пытаюсь выяснить лучшие практики в отношении производительности при создании нескольких DIV с безумной скоростью. Например, при каждом событии .mousemove...

$('head').append("");

$(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("
"); } // function call to create
at current mouse positiion mouseTRAIL(mouseXcurrent, mouseYcurrent, '#00F'); // Remove
setTimeout(function() { $('.draw:first-child').remove(); }, 250); });

Итак, все это работает красиво и денди, но мега неэффективно (особенно когда я пытаюсь заполнить пространство между каждой позицией перемещения мыши). пример...

$('head').append("");

$(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("
"); } // function call to create
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
setTimeout(function() { $('.draw:first-child').remove(); $('.draw:nth-child(2)').remove(); }, 250); });


Я действительно не могу понять, как улучшить вещи Поверьте мне, я пытался исследовать, но это не принесло много пользы...Я ищу некоторые предложения, примеры или ссылки на лучшие практики...

Обратите внимание, что я учусь программировать. Я студент факультета графического дизайна, и вот как я провожу лето вне класса... Делаю небольшие проекты, чтобы научиться JavasSript, забавные вещи :)


Я настроил несколько jsfiddles, чтобы показать, над чем я работаю...

След мыши, больше элементов- Очень медленно
След мыши, меньше элементов- Очень медленно
Мышь Тропа, Голые кости- Медленно

8
задан Terry 19 May 2012 в 09:20
поделиться