javascript oo en performance

[orf]

Met erg veel globals en losse functies heb ik wat dingen gedaan met Google Maps. Vanavond wilde ik de rotzooi eens opruimen en de code herschrijven naar wat leesbaardere code, zonder globals.
De verandering geeft het zelfde resultaat, echter het tonen van de iconen op de map duurt circa 1,5x zo lang. Is dit gewoon een probleem met oo in JavaScript of moet ik gaan optimaliseren?

JavaScript:

function cMap(){

    /**
     *      Init map 
     */ 
    this.init = function(sMapId, fLat, fLong, iZoom){
    
        this.oMap = new GMap2(this.o(sMapId));
        this.oMap.addControl(new GLargeMapControl());
        this.oMap.setCenter(new GLatLng(fLat, fLong), iZoom);
            
    }
    
    /**
     *      Zet markers op de kaart in batches
     */ 
    this.setMarkers = function(){
        
        // maxcount resetten
        if (this.iMax > this.iMarkerCount){
            this.iMax = this.iMarkerCount;
        }
        for (var i = this.iStart; i < this.iMax; i++){                      
            this.oPoints[i] = new GMarker(new GLatLng(this.aMarkers[i]['lat'], this.aMarkers[i]['lon']));           
            this.oMap.addOverlay(this.oPoints[i]);
        }
        
        if (this.iStart >= this.iCount){    
            //clean up
            this.aMarkers = null;
            clearInterval(this.oInterval);
        } 
        this.iStart = this.iMax;
        this.iMax  += this.iInterval;
        
        this.setPreloader(this.iMax, this.iMarkerCount);
        
    }
    this.initPreloader = function(sPreloaderId){
        this.oPreloader = this.o(sPreloaderId);
    }
    
    this.setPreloader = function(iCurrent, iTotal){
        if (iCurrent > 0){
            this.oPreloader.style.width = Math.ceil((iCurrent / iTotal) * 100) + '%';
        }
    } 
    
    this.hideMarkers = function(){
    
        var i = this.iMarkerCount;
        while(i--){
            this.oPoints[i].hide();     
        }
    }

    this.showMarkers = function(){
        var i = this.iMarkerCount;
        while(i--){
            this.oPoints[i].show();     
        }
    }

    /**
     *      zet een interval voor markers in batches
     */ 
    this.setupMarkers = function(aMarkers) {
        
        // aantal markers per keer op kaart
        this.iInterval      = 5;
        this.aMarkers       = aMarkers;
        this.iStart         = 0;
        this.iMax           = this.iInterval;
        this.iMarkerCount   = this.aMarkers.length;
        this.oPoints        = [];
        
        var self = this;
        this.oInterval = setInterval(function() {self.setMarkers()}, 100);
    }


    this.o = function(sId){
        return document.getElementById(sId);
    }
    
}

onload = function(){
    
    oMap = new cMap();
    oMap.init('map', 51.9751527527427, 5.336437225341797, 13);
    oMap.initPreloader('prel');
    // aMarker uit json file
    oMap.setupMarkers(aMarkers);
}

[ Voor 4% gewijzigd door orf op 19-02-2007 23:15 ]

[crisp]

Doe eerst eens een test zonder de 'batch'-verwerking met setInterval. intervals in javascript zijn nooit precies; in fact: de interval-tijd is meer een minimum tijdspanne dan een exacte waarde.

[orf]

Maar de originele code gebruikte ook een setInterval; die is er om ervoor te zorgen dat de map bruikbaar blijft tijdens het inladen van iconen.

De versie met globals en losse functies presteert veel beter dan deze, ik heb flink wat testjes gedaan; op dezelfde machine presteert het in alle geteste browsers minder.

[crisp]

Ik wil gewoon uitsluiten dat deze opzet wellicht een effect heeft op de interval-tijdspanne. Aangezien dat een niet-preciese factor is moet je die eerst uitsluiten - dus een test runnen in je eerste opzet zonder interval en vervolgens in deze opzet zonder interval. Dat is tevens makkelijker als je echt wilt gaan profilen.

Verder: is de performance-hit browser-onafhankelijk of niet?

[ Voor 18% gewijzigd door crisp op 20-02-2007 00:07 ]