非常識な速度で複数の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を設定しました...
マウストレイル、より多くの要素-非常に非常に遅い
マウストレイル、より少ない要素-非常に遅い
マウストレイル、裸の骨-遅い