Perfomance steigern

[tobee]

Erstmal Hallo an Alle,

ich habe eine JavaScript Funktion geschrieben, die eine Linie zeichnet. Ich setzte mit Hilfe einer anderen Funktion jeden Punkt einzeln.

Das Skript benötigt bei 100 Punkten schon fast 5 Sekunden.
Wie könnte ich das anders lösen?

function drawPoint(x, y, color)
{
document.getElementById('ouput').innerHTML = document.getElementById('ouput').innerHTML + "<div style=\"position:absolute; top:" + y + "; left:" + x + "; background-color:" + color + "; width:1px; height:1px;\"><img border=\"0\" src=\"blank.gif\" width=\"1\" height=\"1\" /></div>";
}

<div id="output"></div>

Schonmal Danke, Tobee

 

[SaschaT]

Holla die Waldfee, bei 100 Punkten erzeugst du mit diesem Skript eine Hierarchie von 100 verschachtelten divs! Kein Wunder, dass das lahmt. Willst du nur horizontale und vertikale Linien erzeugen? Dann würde ich divs mit border-attribut verwenden.

Wenn du diagonale Linien erzeugen willst, würde ich ein 1px großes Bild über das CSS attribut "position" auf der Seite platzieren.

Die Frage ist, wozu ist das gut?

 

[tobee]

Ich möchte einfach mal mit JavaScript skript testen ob es möglich ist mit "Pixel" eine Animation zu machen.

Tobee