8

非常識な速度で複数の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を教えるための小さなプロジェクトを作っています、楽しいもの:)


私はImが取り組んでいることを示すためにいくつかのjsfiddlesを設定しました...

マウストレイル、より多くの要素-非常に非常に遅い
マウストレイル、より少ない要素-非常に遅い
マウストレイル、裸の骨-遅い

4

2 に答える 2

3

ここで行われている複数の悪い慣行があります。

  • Canvas の代わりに要素を使用する
  • これらの要素を jQuery 経由で使用する
  • そのjQueryを故意に遅くしようとしているかのように悪用する
  • 上記のすべてを mousemove ハンドラー内に詰め込む

ここでの根本的な問題は、キャンバスの代わりに要素を使用することです。それを修正した後、DOM とのやり取りは最小限になり、他の点も修正する必要があります。

また、これが正常に機能すると主張する人は、CPU 使用率をチェックしていません。私の Core I5-2500K では、1 つのコアが即座に最大限に使用されます。これはばかげており、画面上でマウスの軌跡をレンダリングするような些細なことには受け入れられません。これが古いコンピューターでは非常に遅いことは十分に想像できます。はい、スムーズですが、10〜20以上のタブが同じことを適切に行うのに十分な量のリソースを使用するという犠牲が伴います.

マウスを速く動かすと、これには7〜14%のCPUが必要です。これには25%かかります。

于 2012-05-19T13:02:39.593 に答える
1

リフローを起こさないように気をつけて、塗り直しのみにこだわる必要があります。-> DOM 環境でリフローが発生するのはいつですか?

したがって、<div>s を作成することはできません。-しかし、あなたはする必要はありません:)

<div>将来必要になる数の を作成し、それらを再配置するだけです。配列にそれらがある場合、現在の最も大きいものを指す整数のみが必要であり、マウスを動かすたびにその値を増やし(配列の長さに達したら0に設定します)、<div>指しているを再配置しますその数で。

于 2012-05-19T12:49:03.550 に答える