[Erledigt] JavaScript perfomance

BlackScorp · 07.01.2011, 16:20

Hi leute.

ich habe hier ein Kleines Problem und komme nicht weiter.. ich habe meine Isometrische map erstellt und die funktioniert auch gut solange die Y Koordinate klein bleibt..

d.h. wenn ich startX = 200000; und startY = 20 einstelle, wird die karte schnell geladen und ich kriege sie schnell angezeigt..

wenn ich startX = 20 und startY = 20000 einstelle.. dann laggt es wie verrückt

das problem ist.. dass es immer von startY abhängt.. angenommen mein startY ist 20 dann verschiebe ich die map bis 200+ und es gibt keine unterschiede die perfomance ist gleichgut... mache ich das ganze umgehert.. also starte bei 200 und verschiebe bis 20.. wird es die ganze zeit laggen..

meine vermutung ist der modulo operator.. ich muss um meinen startOffset zu ermitteln, prüfen ob die Y variable gerade oder ungerade ist und es hat den schein dass javascript ziemlich lange braucht um 20000%2 auszurechen..

meine frage wäre nun ob es eine Möglichkeit gibt auf einem anderen weg herauszufinden ob die zahl gerade oder ungerade ist.. oder liegt der fehler vllt doch nicht an dem modulo operator?

hier ist mein QUellcode:

PHP-Code:

  var tileWidth = 217;

var tileHeight = 108;

var screenWidth = 0;

var screenHeight = 0;

var offsetX = 0;

var offsetY = 0;

var myX = 200;

var myY = 200;

 
$(document).ready(function(){

 
 
    setScreenSize();

    centerMap();

    drawIsoMap();

    dragEnable();

  

 
  

});

var dragEnable = function(){

  $('.map').draggable({

        cursor: "move",

        stop:function(event,ui){

            offsetX = ui.position.left*-1;

            offsetY = ui.position.top*-1;

            drawIsoMap();

        }

    });

}

var centerMap = function(){

if(myY%2 == 0){ // <----- da ist der Hacken, denke ich

offsetX = Math.floor((myX*tileWidth)-(screenWidth/2));

}else{

offsetX  = Math.floor((myX*tileWidth)-(screenWidth/2)+(tileWidth/2));

}

offsetY  = Math.floor((myY*tileHeight/2)-(screenHeight/2));

if(offsetX < 0){

offsetX = 0;

}

if(offsetY < 0){

offsetY = 0;

}

$('.map').attr("style","left:-"+offsetX+"px;top:-"+offsetY+"px;");

}

 
var setScreenSize = function(){

    screenHeight = $('.displayScreen').height();

    screenWidth = $('.displayScreen').width();

}

var drawIsoMap = function(){

    $('.map').html("");

    var tileX = 0;

    var tileY = 0;

 
    var startX = Math.floor(offsetX/tileWidth);

    var endX = Math.round((offsetX+screenWidth)/tileWidth+1);

    var startY =Math.floor(offsetY/tileHeight);

    var endY =Math.round((offsetY+screenHeight)/tileHeight*2+1);

    var htmlCode = '';

    var modCount = 0;

    for(var y = startY;y<endY;y++){

        for(var x= startX;x<endX;x++){

            tileY = y*(tileHeight/2);

            

            if(modCount != 0){ //<--- hier konnte ich den modulo operator rausnehmen

                tileX = x*(tileWidth);

            }else{

                tileX = x*(tileWidth)-tileWidth/2;

            }

            if(!$('#Y'+(y+1)+'X'+x).length){

            htmlCode += drawTile(x,y+1,Math.floor(tileX),Math.floor(tileY));

            }

           

        }

            if(modCount == 0){

               modCount++;

            }else{

                modCount = 0;

            }

    }

   $('.map').html(htmlCode);

    

}

var drawTile = function(x,y,pixelX,pixelY){

    

        return '<div id="Y'+y+'X'+x+'" class="tile gras" style="top:'+pixelY+'px;left:'+pixelX+'px;width:'+tileWidth+'px;height:'+tileHeight+'px"><span>X:'+x+'/Y:'+y+'</span></div>';

    

}

und die karte sieht man hier :
http://cruel-online.de/map2/

Ich weis einfach nicht woran es liegen kann dass nur der Y wert solche probleme verursacht

MFG

rudygotya · 07.01.2011, 16:33

Wieso prüfst du nicht nur die letzte Ziffer? Falls das das Problem ist (0,2,4,6,8 => teilbar).

Btw.: deine Demo geht bei mir gerade nicht.

BlackScorp · 07.01.2011, 16:36

ich muss im grunde NUR meine Y koordinate abfragen ob die gerade oder ungerade ist, damit ich weis ob ich zu dem x die hälfte der tilebreite dazuaddieren muss oder nicht(weil ja jede 2e reihe etwas nach links verschoben ist)

vllt habe ich gerade was eingetippt im quellcode dass es nicht ging.. ich habe jetzt die koordinaten geändert auf
x = 20000
y = 20

EDIT: ich muss mich korrigieren.. sobald y 200+ wird, fängt es an zu rückeln egal ob ich bei 20 beginne oder gleich bei 200

rudygotya · 07.01.2011, 16:55

Jo, aber wenn es denn am Modulo bei hohen Zahlen gelegen hätte, wäre z.b. folgendes möglich gewesen:

PHP-Code:

  if (parseInt(tileHeight.slice(-1), 10) % 2 ) // y gerade

Hmm, bei so vielen loops kann das schon langsam werden. Kann gern später genauer draufsehen, 40000 divs solltest du aber nicht erzeugen.

Grüße

BlackScorp · 07.01.2011, 16:57

nene es wird ja html aufgerufen.. die anzahl der divs ist von der auflösung bzw fensterbreite abhängig.. machst du dein firefox fenster kleiner, so sind weniger divs drin und nach dem draggen werden einfach neue erstellt und alte gelöscht

EDIT: kann es vllt auch an Math.floor oder so hängen? ich find halt das ganze merkwürdig dass ich X so hoch machen kann wie ich will aber Y nicht..

EDIT: problem lag nciht am modulo sondern and mir... habe mir mal die anzahl der tiles anzeigen lassen und habe festgestellt dass es zu viele waren.. habe das korrigiert und siehe da mit ca 100 divs im bildschirm lässt sich schneller scrollen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Problem mit dynamischer URL in Javascript Dateien	da.eXecutoR	JavaScript, Ajax und mehr	4	28.09.2010 17:18
timing Probleme bzw Zusammenspiel PHP Javascript	thica	PHP Tipps 2009	2	19.02.2010 19:06
[Erledigt] Ersatz für Javascript	Mort1ferus	JavaScript, Ajax und mehr	6	12.10.2009 09:35
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
[Erledigt] JavaScript Weiche bei Formular?	markus228	JavaScript, Ajax und mehr	1	09.08.2009 14:16
[Erledigt] Variable von Javascript mit 1x1px-Bild an PHP übergeben	beneblack	PHP Tipps 2009	18	03.05.2009 22:40
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
[Erledigt] Javascript in PHP Aufrufen	coyboc	PHP Tipps 2009	17	10.04.2009 15:28
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
Lerne Grundlagen \| Quellensammlung	cycap	PHP Einsteiger	0	12.11.2008 16:23
Variable wird geändert bei Übergabe an Javascript		PHP Tipps 2007	4	17.12.2005 16:53
JavaScript in JavaScript geschriebene Html-Datei einbinden.	woods	HTML, Usability und Barrierefreiheit	6	06.09.2004 18:33
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30
php + Javascript, Variablenübergabe		PHP Tipps 2004	14	28.07.2004 15:42

07.01.2011, 16:20
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	[Erledigt] JavaScript perfomance Hi leute. ich habe hier ein Kleines Problem und komme nicht weiter.. ich habe meine Isometrische map erstellt und die funktioniert auch gut solange die Y Koordinate klein bleibt.. d.h. wenn ich startX = 200000; und startY = 20 einstelle, wird die karte schnell geladen und ich kriege sie schnell angezeigt.. wenn ich startX = 20 und startY = 20000 einstelle.. dann laggt es wie verrückt das problem ist.. dass es immer von startY abhängt.. angenommen mein startY ist 20 dann verschiebe ich die map bis 200+ und es gibt keine unterschiede die perfomance ist gleichgut... mache ich das ganze umgehert.. also starte bei 200 und verschiebe bis 20.. wird es die ganze zeit laggen.. meine vermutung ist der modulo operator.. ich muss um meinen startOffset zu ermitteln, prüfen ob die Y variable gerade oder ungerade ist und es hat den schein dass javascript ziemlich lange braucht um 20000%2 auszurechen.. meine frage wäre nun ob es eine Möglichkeit gibt auf einem anderen weg herauszufinden ob die zahl gerade oder ungerade ist.. oder liegt der fehler vllt doch nicht an dem modulo operator? hier ist mein QUellcode: PHP-Code: var tileWidth = 217; var tileHeight = 108; var screenWidth = 0; var screenHeight = 0; var offsetX = 0; var offsetY = 0; var myX = 200; var myY = 200; $(document).ready(function(){ setScreenSize(); centerMap(); drawIsoMap(); dragEnable(); }); var dragEnable = function(){ $('.map').draggable({ cursor: "move", stop:function(event,ui){ offsetX = ui.position.left-1; offsetY = ui.position.top-1; drawIsoMap(); } }); } var centerMap = function(){ if(myY%2 == 0){ // <----- da ist der Hacken, denke ich offsetX = Math.floor((myXtileWidth)-(screenWidth/2)); }else{ offsetX = Math.floor((myXtileWidth)-(screenWidth/2)+(tileWidth/2)); } offsetY = Math.floor((myYtileHeight/2)-(screenHeight/2)); if(offsetX < 0){ offsetX = 0; } if(offsetY < 0){ offsetY = 0; } $('.map').attr("style","left:-"+offsetX+"px;top:-"+offsetY+"px;"); } var setScreenSize = function(){ screenHeight = $('.displayScreen').height(); screenWidth = $('.displayScreen').width(); } var drawIsoMap = function(){ $('.map').html(""); var tileX = 0; var tileY = 0; var startX = Math.floor(offsetX/tileWidth); var endX = Math.round((offsetX+screenWidth)/tileWidth+1); var startY =Math.floor(offsetY/tileHeight); var endY =Math.round((offsetY+screenHeight)/tileHeight2+1); var htmlCode = ''; var modCount = 0; for(var y = startY;y<endY;y++){ for(var x= startX;x<endX;x++){ tileY = y(tileHeight/2); if(modCount != 0){ //<--- hier konnte ich den modulo operator rausnehmen tileX = x(tileWidth); }else{ tileX = x*(tileWidth)-tileWidth/2; } if(!$('#Y'+(y+1)+'X'+x).length){ htmlCode += drawTile(x,y+1,Math.floor(tileX),Math.floor(tileY)); } } if(modCount == 0){ modCount++; }else{ modCount = 0; } } $('.map').html(htmlCode); } var drawTile = function(x,y,pixelX,pixelY){ return '<div id="Y'+y+'X'+x+'" class="tile gras" style="top:'+pixelY+'px;left:'+pixelX+'px;width:'+tileWidth+'px;height:'+tileHeight+'px"><span>X:'+x+'/Y:'+y+'</span></div>'; } und die karte sieht man hier : http://cruel-online.de/map2/ Ich weis einfach nicht woran es liegen kann dass nur der Y wert solche probleme verursacht MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.01.2011, 16:33
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Wieso prüfst du nicht nur die letzte Ziffer? Falls das das Problem ist (0,2,4,6,8 => teilbar). Btw.: deine Demo geht bei mir gerade nicht. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

07.01.2011, 16:36
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ich muss im grunde NUR meine Y koordinate abfragen ob die gerade oder ungerade ist, damit ich weis ob ich zu dem x die hälfte der tilebreite dazuaddieren muss oder nicht(weil ja jede 2e reihe etwas nach links verschoben ist) vllt habe ich gerade was eingetippt im quellcode dass es nicht ging.. ich habe jetzt die koordinaten geändert auf x = 20000 y = 20 EDIT: ich muss mich korrigieren.. sobald y 200+ wird, fängt es an zu rückeln egal ob ich bei 20 beginne oder gleich bei 200 __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (07.01.2011 um 16:41 Uhr).

07.01.2011, 16:55
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Jo, aber wenn es denn am Modulo bei hohen Zahlen gelegen hätte, wäre z.b. folgendes möglich gewesen: PHP-Code: `if (parseInt(tileHeight.slice(-1), 10) % 2 ) // y gerade` Hmm, bei so vielen loops kann das schon langsam werden. Kann gern später genauer draufsehen, 40000 divs solltest du aber nicht erzeugen. Grüße __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

07.01.2011, 16:57
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	nene es wird ja html aufgerufen.. die anzahl der divs ist von der auflösung bzw fensterbreite abhängig.. machst du dein firefox fenster kleiner, so sind weniger divs drin und nach dem draggen werden einfach neue erstellt und alte gelöscht EDIT: kann es vllt auch an Math.floor oder so hängen? ich find halt das ganze merkwürdig dass ich X so hoch machen kann wie ich will aber Y nicht.. EDIT: problem lag nciht am modulo sondern and mir... habe mir mal die anzahl der tiles anzeigen lassen und habe festgestellt dass es zu viele waren.. habe das korrigiert und siehe da mit ca 100 divs im bildschirm lässt sich schneller scrollen __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (07.01.2011 um 19:03 Uhr).