Question

我试图在以疯狂的速度创建多个DIV时找出有关性能的最佳实践。例如，在每个.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);
});

所以，这一切都很好用，但它的效率很低（尤其是当我尝试填充每个鼠标移动位置之间的空间时）。这是一个例子......

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

我真的无法弄清楚如何改善事物。相信我，我已经尝试过研究，但它没有做太多好事......我正在寻找的是一些建议，例子或更好实践的链接...

请注意，我正在自学代码。我是一名平面设计专业的学生，这就是我在课堂上度过夏天的过程......制作小项目来自学JavasSript，有趣的东西:)

<小时/> 我设置了一些jsfiddles来展示我在做什么......

Mouse Trail, More Elements - 非常慢 Mouse Trail, Less Elements - 非常慢 Mouse Trail, Bare Bones - 慢

Answer 1

这里有多种不良做法：

使用元素代替Canvas
通过jQuery使用这些元素
滥用jQuery就好像你试图让它慢慢变慢
在mousemove处理程序

这里的根本问题实际上是使用元素而不是画布。在修复之后，与DOM的交互应该变得最小化修复其他要点。

此外，那些声称工作正常的人并没有检查他们的CPU使用情况。在我的Core I5-2500K上，一个核心立即被最大化，这对于在屏幕上渲染鼠标踪迹等微不足道的事情来说是荒谬和不可接受的。我可以想象这在旧电脑上非常慢。所以是的，它很顺利，但代价是使用足够的资源量来使10-20 +标签正确地做同样的事情。

当快速移动鼠标时，

This为我带来了7-14％的cpu，this占用了25％。

Answer 2

你应该注意不要引起回流，只留下重画。 - ＆GT; When does reflow happen in a DOM environment?

因此创建<div>是不可取的。 - 但你不需要：）

只需创建将来需要的<div>个，然后重新定位它们。如果你在数组中有它们，你只需要一个指向当前最大值的整数，并且在每次鼠标移动时你都会增加该值（一旦到达数组长度就将其设置为0）并重新定位{{1这个数字指向了那个。

多个div创建，jquery / javascript，性能/最佳实践

2 个答案: