Performance Optimierung

[tobee]

Ich wollte mal nachfragen ob jemanden von euch Optimierungen einfällt bzw. findet die die Performance ein wenig verbessern.

VIelen Dank

var boolMouseDown = false;
var objMouse, objSelectionStart = [0,0];
var objSettings = {
	id: "selection",
	unit: "px"
};
var objIcons = [
	{ id: "qwe", x: 100, y: 100, type: "folder", seleted: false },
	{ id: "asd", x: 200, y: 200, type: "folder", seleted: false },
	{ id: "yxc", x: 300, y: 300, type: "folder", seleted: false },
	{ id: "wer", x: 400, y: 400, type: "folder", seleted: false }
];

window.onload = function()	{

	var objSelection = document.createElement("div");
	objSelection.id = objSettings.id;
	objSelection.style.position = "absolute";
	objSelection.style.display = "none";
	document.body.appendChild(objSelection);
	
	for(var intCount = 0; intCount < objIcons.length; intCount++){
		
		var objIcon = document.createElement("img");
		objIcon.id = objIcons[intCount].id;
		objIcon.style.position = "absolute";
		objIcon.style.top = objIcons[intCount].y + objSettings.unit;
		objIcon.style.left = objIcons[intCount].x + objSettings.unit;
		objIcon.src = "misc/images/icon.png";
		objIcon.width = "96";
		objIcon.height = "96";
		document.body.appendChild(objIcon);
		
	}
	
}

window.onclick = function()	{
	for(var intCount = 0; intCount < objIcons.length; intCount++){
		document.getElementById(objIcons[intCount].id).style.border = "";
		document.getElementById(objIcons[intCount].id).style.margin = "";
	}
}

window.onmousedown = window.onmousemove = function(objEvent){
	
	objMousePosition = [objEvent.clientX, objEvent.clientY];
	
	if(objEvent.type == "mousedown")	{
		
		boolMouseDown = true;
		
		var objSelection = document.getElementById(objSettings.id);
		objSelection.style.top = objEvent.clientY + objSettings.unit;
		objSelection.style.left = objEvent.clientX + objSettings.unit;
		objSelection.style.width = ( objEvent.clientX - parseInt(objSelection.style.left) ) + objSettings.unit;
		objSelection.style.height = ( objEvent.clientY - parseInt(objSelection.style.top) ) + objSettings.unit;
		objSelection.style.display = "block";
		
		objSelectionStart = [objEvent.clientX, objEvent.clientY];
		
	}
	else if(objEvent.type == "mousemove")	{
		
		if(boolMouseDown){
			
			var objSelection = document.getElementById(objSettings.id);
			
			if(objEvent.clientX < objSelectionStart[0])	{
				document.getElementById("selection").style.left = objEvent.clientX + objSettings.unit;
				objSelection.style.width = ( objSelectionStart[0] - parseInt(objSelection.style.left) ) + objSettings.unit;
			}
			else	{
				objSelection.style.width = ( objEvent.clientX - parseInt(objSelection.style.left) ) + objSettings.unit;
			}
			
			if(objEvent.clientY < objSelectionStart[1])	{
				document.getElementById("selection").style.top = objEvent.clientY + objSettings.unit;
				objSelection.style.height = ( objSelectionStart[1] - parseInt(objSelection.style.top) ) + objSettings.unit;
			}
			else	{
				objSelection.style.height = ( objEvent.clientY - parseInt(objSelection.style.top) ) + objSettings.unit;
			}
			
			for(var intCount = 0; intCount < objIcons.length; intCount++){
				if(	
					objIcons[intCount].x > parseInt(objSelection.style.left) && 
					objIcons[intCount].x < parseInt(objSelection.style.left) + parseInt(objSelection.style.width) &&	
					objIcons[intCount].y > parseInt(objSelection.style.top) && 
					objIcons[intCount].y < parseInt(objSelection.style.top) + parseInt(objSelection.style.height)
					)
				{
					document.getElementById(objIcons[intCount].id).style.border = "3px solid #316ac5";
					document.getElementById(objIcons[intCount].id).style.margin = "-3px 0 0 -3px";
				}
				else	{
					document.getElementById(objIcons[intCount].id).style.border = "";
					document.getElementById(objIcons[intCount].id).style.margin = "";
				}
				
			}
		}
	}
}

window.onmouseup = function()	{
	
	boolMouseDown = false;
	var objSelection = document.getElementById(objSettings.id);
	objSelection.style.display = "none";
	
}

 

[Sven Mintel]

Moin tobee,


Wenn du wiederholt auf einen DOM-Knoten zugreifst(wie bspw. in Zeile 40,41), dann empfiehlt es sich aus Performancegründen, diesen Knoten zwischenzuspeichern(wie du es bspw. in Zeile 53 tust).
Ansonsten muss JS jedesmal den DOM-Knoten aufs Neue aus dem Dokument "heraussuchen".

 

[tobee]

var objDesktop = null;
	
window.onload = function()	{
	objDesktop = new jdesk();
};

window.onclick = window.onmousedown = window.onmousemove = function(objEvent){
	objDesktop.onmouse(objEvent);
}

window.onmouseup = function()	{
	objDesktop.mouse.down = false;
	objDesktop.selection.style.display = "none";
}

var jdesk = function()	{
	this.__construct();
};

jdesk.prototype = {
	
	__construct: function()	{
		this.mouse = this.mouse();
		this.settings = this.settings();
		this.icons = this.icons();
		
		this.selection = this.html.div({
			id: this.settings.id,
			display: "none",
			style:	{
				width: 0,
				height: 0
			}
		});
		
		this.each(
			this.icons,
			function(objIcon)	{
				jdesk.prototype.html.image({
					id: objIcon.id,
					// this.settings geht nicht
					position: [objIcon.x + "px", objIcon.y + "px"],
					src: "misc/images/" + objIcon.type + ".png"
				});
			}
		);
	},
	
	onmouse: function(objEvent)	{
		
		if(objEvent.type == "mousedown")	{
		
			this.mouse.down = true;
			this.mouse.position = [objEvent.clientX, objEvent.clientY];
			this.selection.style.top = objEvent.clientY + this.settings.unit;
			this.selection.style.left = objEvent.clientX + this.settings.unit;
			this.selection.style.width = ( objEvent.clientX - parseInt(this.selection.style.left) ) + this.settings.unit;
			this.selection.style.height = ( objEvent.clientY - parseInt(this.selection.style.top) ) + this.settings.unit;
			this.selection.style.display = "block";
			
		}
		else if(objEvent.type == "mousemove")	{
			
			if(this.mouse.down){

				if(objEvent.clientX < parseInt(this.mouse.position[0]))	{
					this.selection.style.left = objEvent.clientX + this.settings.unit;
					this.selection.style.width = ( this.mouse.selection[0] - parseInt(this.selection.style.left) ) + this.settings.unit;
				}
				else	{
					this.selection.style.width = ( objEvent.clientX - parseInt(this.selection.style.left) ) + this.settings.unit;
				}
				
				if(objEvent.clientY < parseInt(this.mouse.position[1]))	{
					this.selection.style.top = objEvent.clientY + this.settings.unit;
					this.selection.style.height = ( this.mouse.selection[1] - parseInt(this.selection.style.top) ) + this.settings.unit;
				}
				else	{
					this.selection.style.height = ( objEvent.clientY - parseInt(this.selection.style.top) ) + this.settings.unit;
				}
				
				this.each(
					this.icons,
					function(objIcon)	{
						if(	
							objIcon.x > parseInt(objDesktop.selection.style.left) && 
							objIcon.x < parseInt(objDesktop.selection.style.left) + parseInt(objDesktop.selection.style.width) &&	
							objIcon.y > parseInt(objDesktop.selection.style.top) && 
							objIcon.y < parseInt(objDesktop.selection.style.top) + parseInt(objDesktop.selection.style.height)
							)
						{
							document.getElementById(objIcon.id).style.border = "3px solid #316ac5";
							document.getElementById(objIcon.id).style.margin = "-3px 0 0 -3px";
						}
						else	{
							document.getElementById(objIcon.id).style.border = "";
							document.getElementById(objIcon.id).style.margin = "";
						}
					}
				);
			}
		}
	},
	
	mouse: function()	{
		return {
			down: false,
			position: [0,0],
			selection: [0,0]
		};
	},
	
	settings: function()	{
		return	{
			id: "selection",
			unit: "px"
		};
	},
	
	icons: function()	{
		return [
			{ id: "qwe", x: 100, y: 100, type: "folder", seleted: false },
			{ id: "asd", x: 200, y: 200, type: "folder", seleted: false },
			{ id: "yxc", x: 300, y: 300, type: "folder", seleted: false },
			{ id: "wer", x: 400, y: 400, type: "folder", seleted: false }
		];
	},
	
	each: function(objElement, objFunction)	{
		for(strKey in objElement){
			objFunction(objElement[strKey]);
		}
	},
	
	html:	{
		
		div: function(objParams)	{
			var objDiv = document.createElement("div");
			if(objParams.id)	{
				objDiv.id = objParams.id;
			}
			objDiv.style.position = "absolute";
			if(typeof objParams.position == "object")	{
				objDiv.style.top = objParams.position[1];
				objDiv.style.left = objParams.position[0];
			}
			if(objParams.display)	{
				objDiv.style.display = objParams.display;
			}
			if(typeof objParams.style == "object")	{
				if(objParams.style.width)	{
					objDiv.style.width = objParams.style.width;
				}
				if(objParams.style.height)	{
					objDiv.style.height = objParams.style.height;
				}
			}
			document.body.appendChild(objDiv);
			return objDiv;
		},
		
		image: function(objParams)	{
			var objImage = document.createElement("img");
			if(objParams.id)	{
				objImage.id = objParams.id;
			}
			if(typeof objParams.position == "object")	{
				objImage.style.position = "absolute";
				objImage.style.top = objParams.position[1];
				objImage.style.left = objParams.position[0];
			}
			if(objParams.src)	{
				objImage.src = objParams.src;
			}
			document.body.appendChild(objImage);
		}
		
	}
	
};

In Zeile 39 kann ich die Funktion nur über jdesk.prototype aufrufen anstatt mit this.
In Zeile 41 kann ich leider nicht auf this zurückgreifen. Weis denn jemand warum?
Danke für Tipps

 

[Sven Mintel]

Könntest du bitte mal ein paar Worte dazu sagen, was dies überhaupt machen soll? :-(

 

[tobee]

Klar mach ich. Das Skript soll eine Selektion von Icons "simulieren".
Ich habe das ganze schon programmiert, aber ich möchte es gerne noch optimieren.

 

[Sven Mintel]

Ahso, interessantes Vorhaben

Zu dem Problem:
Die aufgerufene (anonyme)Funktion ist ja kein Bestandteil des Objektes, daher befindet sie sich im globalen Geltungsbereich... und dort verweist this auf das globale Objekt, das window-Objekt.

Lösung: übergebe den Funktionen in each() als weiteres Argument das Objekt:

Ab Zeile 36:

        this.each(
            this.icons,
            function(objIcon,objObj)   {
                jdesk.prototype.html.image({
                    id: objIcon.id,
                    // objObj.settings geht jetzt
                    position: [objIcon.x + objObj.settings.unit, objIcon.y + objObj.settings.unit],
                    src: "misc/images/" + objIcon.type + ".png"
                });
            }
        );

Ab Zeile 129:

    each: function(objElement, objFunction) {
        for(strKey in objElement){
            objFunction(objElement[strKey],this);
        }
    }