Bing Maps V8 JS API Speicherleckprobleme

Question

Übersicht: Dieses Projekt, an dem ich gearbeitet habe, empfängt eine Nachricht von einer externen Quelle und aktualisiert eine Bing Map basierend auf den empfangenen Informationen. Wenn ich jedoch die Seite für eine lange Zeit laufen lasse, dann verbraucht die Seite einfach den gesamten Speicher und stürzt ab.

Besonderheiten: Diese memory issue entstand einmal wechselte ich von Google Maps Bing Maps über und ich habe nicht in der Lage, es zu lösen, egal was ich versucht habe. Ich habe die gesamte Umgebung durchsucht, um entweder das Problem mithilfe der bewährten Vorgehensweisen von Bing Maps zu beheben oder zumindest das Problem zu finden, das das Problem verursacht hat. Ich konnte jedoch nichts finden, das das Problem tatsächlich behoben hat.

Ich habe eine erhebliche Menge an detached DOMs und habe versucht, sie mit der Google Chrome-Konsole genauer zu analysieren, aber waren nicht erfolgreich.

Versuchte Fixes:

• allen Umzug mit dem Hinzufügen von Handler in die Karte Initialisierungsfunktion zu tun (wie unten dargestellt), aber das schien nicht durch viel zu verbessern.
• Laden von beliebigen Bing Maps-Modulen aus der Karteninitialisierungsfunktion (wie unten angezeigt). Dadurch wurde zwar der Code etwas aufgeräumt, die Speicherauslastung schien sich jedoch nicht sehr stark auszuwirken.
• Laden der Karte synchron. Dies schien jedoch alles zu ändern, was mit Bing Maps auf der Website zu tun hatte.
• Gestoppte Entsorgung der Karte nach Erhalt einer Nachricht. Dies half bei der Schlüsselverwendung, half aber nicht bei der Speichernutzung.

Relevante Code:

---

Hier ist die Funktion Karte Initialisierung (laufen asynchron durch die Bing Maps im HTML nennen):

function initialize() { 
const CENTER = new Microsoft.Maps.Location(44.96375272262944, -93.2353971897461); 

// Assigns the zoom depending on whether the device is a mobile device or not 
if (isMobile()) { 
    zoom = 12; 
} else { 
    zoom = 13; 
} 

// Initialize the map 
map = new Microsoft.Maps.Map(document.getElementById('map-canvas'), { 
    credentials: API_KEY, 
    minZoom: zoom, 
    center: CENTER, 
    disableStreetside: true, 
    disableStreetsideAutoCoverage: true, 
    enableClickableLogo: false, 
    showLocateMeButton: false, 
    showMapTypeSelector: false 
}); 

bus1 = { 
    assignment: null, 
    destination: null, 
    distance: null, 
    eta: null, 
    location: null, 
    mph: null, 
    name: null, 
    pin: new Microsoft.Maps.Pushpin(map.getCenter(), { 
     icon: 'img/bus1.png', 
     anchor: new Microsoft.Maps.Point(14, 44), 
     visible: false, 
     text: "", 
     title: "" 
    }), 
    polylineRender: null, 
    time: null, 
    timeout: null, 
}; 
bus2 = { 
    assignment: null, 
    destination: null, 
    distance: null, 
    eta: null, 
    location: null, 
    mph: null, 
    name: null, 
    pin: new Microsoft.Maps.Pushpin(map.getCenter(), { 
     icon: 'img/bus2.png', 
     anchor: new Microsoft.Maps.Point(14, 44), 
     visible: false, 
     text: "", 
     title: "" 
    }), 
    polylineRender: null, 
    time: null, 
    timeout: null, 
}; 
bus3 = { 
    assignment: null, 
    destination: null, 
    distance: null, 
    eta: null, 
    location: null, 
    mph: null, 
    name: null, 
    pin: new Microsoft.Maps.Pushpin(map.getCenter(), { 
     icon: 'img/bus3.png', 
     anchor: new Microsoft.Maps.Point(14, 44), 
     visible: false, 
     text: "", 
     title: "" 
    }), 
    polylineRender: null, 
    time: null, 
    timeout: null, 
}; 

buses = [bus1, bus2, bus3]; 

// Add the traffic layer 
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function() { 
    trafficLayer = new Microsoft.Maps.Traffic.TrafficManager(map); 
}); 

// Add the directions manager 
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() { 
    bus1.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map); 
    bus2.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map); 
    bus3.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map); 

    Microsoft.Maps.Events.addHandler(bus1.polylineRender, 'directionsError', function (e) { 
     console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode); 
    }); 
    Microsoft.Maps.Events.addHandler(bus1.polylineRender, 'directionsUpdated', directionsUpdated); 

    Microsoft.Maps.Events.addHandler(bus2.polylineRender, 'directionsError', function (e) { 
     console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode); 
    }); 
    Microsoft.Maps.Events.addHandler(bus2.polylineRender, 'directionsUpdated', directionsUpdated); 

    Microsoft.Maps.Events.addHandler(bus3.polylineRender, 'directionsError', function (e) { 
     console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode); 
    }); 
    Microsoft.Maps.Events.addHandler(bus3.polylineRender, 'directionsUpdated', directionsUpdated); 
}); 

// Defines the polygons surrounding each campus 
polygonArrSTP = [ 
    new Microsoft.Maps.Location(44.94619673931851, -93.19240808486938), 
    new Microsoft.Maps.Location(44.941321471037966, -93.19249391555786), 
    new Microsoft.Maps.Location(44.94130628263941, -93.19764375686646), 
    new Microsoft.Maps.Location(44.93790398010943, -93.1975257396698), 
    new Microsoft.Maps.Location(44.937926764055824, -93.1924831867218), 
    new Microsoft.Maps.Location(44.94164802063501, -93.19241881370544), 
    new Microsoft.Maps.Location(44.94164802063501, -93.18739771842957), 
    new Microsoft.Maps.Location(44.94618914576464, -93.18735480308533), 
    new Microsoft.Maps.Location(44.94618914576464, -93.1924295425415), 
]; 
polygonArrMPLS = [ 
    new Microsoft.Maps.Location(44.97380025938377, -93.2795798778534), 
    new Microsoft.Maps.Location(44.97295018417148, -93.27883958816528), 
    new Microsoft.Maps.Location(44.97264658282772, -93.27782034873962), 
    new Microsoft.Maps.Location(44.973595331690625, -93.27698349952698), 
    new Microsoft.Maps.Location(44.9745744240603, -93.27614665031433), 
    new Microsoft.Maps.Location(44.97501463068608, -93.27712297439575), 
    new Microsoft.Maps.Location(44.9747205274961, -93.27738046646118), 
    new Microsoft.Maps.Location(44.974339139822895, -93.27832460403442), 
    new Microsoft.Maps.Location(44.97380025938377, -93.2795798778534) 
]; 

// Adds the campus polygons to the map 
polygonMPLS = new Microsoft.Maps.Polygon(polygonArrMPLS, { 
    fillColor: "rgba(255, 0, 0, 0.4)", 
    strokeColor: '#FF0000', 
    strokeThickness: 2 
}); 
polygonSTP = new Microsoft.Maps.Polygon(polygonArrSTP, { 
    fillColor: "rgba(255, 0, 0, 0.4)", 
    strokeColor: '#FF0000', 
    strokeThickness: 2 
}); 

// Assign the polygons to the Map 
map.entities.push(polygonMPLS); 
map.entities.push(polygonSTP); 

// Set the toggle for advanced mode 
advancedModeEnabled = false; 

generateBusStats(); 
subscribeToPubnub(); 

console.log("Initialization complete."); 
} 

---

Hier ist die Funktion, die beim Empfang einer Nachricht ausgeführt wird:

function redraw(payload) { 

// If the user is does not have the page active, the payload is refused 
if (!acceptingPayloads) { 
    return false; 
} 

let location = new Microsoft.Maps.Location(payload.message.lat, payload.message.lng); 
let name = payload.message.name; 
let dest = payload.message.dest; 
let mph = payload.message.mph; 

const STP = new Microsoft.Maps.Location(44.9416428, -93.1917952); 
const MPLS = new Microsoft.Maps.Location(44.9747502, -93.2774464); 

if (dest.toUpperCase() === "S") { 
    dest = {letter: "S", name: "St. Paul", coords: STP}; 
} else if (dest.toUpperCase() === "M") { 
    dest = {letter: "M", name: "Minneapolis", coords: MPLS}; 
} else { 
    dest = null; 
} 

console.log(name + ": " + location.latitude + ", " + location.longitude + " - " + dest.name + " - " + mph + " mph"); 

// Gets the bus object that the payload was sent from 
currentBus = getCurrentBus(name); 

// Removes the timeout for the current bus 
if (currentBus.timeout !== null) { 
    clearTimeout(currentBus.timeout); 
} 

currentBus.location = location; 
currentBus.destination = dest; 
currentBus.mph = mph; 
currentBus.time = Date.now(); 
currentBus.name = name; 

// Restart the timeout for the current bus 
beginTimeout(); 

// Calculate the distance between the current bus and its destination 
calcDistToDest(); 

$("." + currentBus.assignment + "-item").css('display', 'block') 
} 

---

Schließlich ist hier die Funktion, die ich verwende, um die Distanz zwischen den Punkten zu erhalten:

function calcDistToDest() { 

// Clear all information from the Directions Manager 
currentBus.polylineRender.clearAll(); 

// Set Route Mode to driving and the render options 
currentBus.polylineRender.setRequestOptions({ 
    routeMode: Microsoft.Maps.Directions.RouteMode.driving 
}); 
currentBus.polylineRender.setRenderOptions({ 
    autoUpdateMapView: false, 
    drivingPolylineOptions: { 
     visible: POLYLINE_VISIBILITY 
    }, 
    waypointPushpinOptions: { 
     visible: false 
    }, 
    firstWaypointPushpinOptions: { 
     anchor: currentBus.pin.getAnchor(), 
     icon: currentBus.pin.getIcon(), 
     title: currentBus.pin.getTitle(), 
     text: currentBus.pin.getText() 
    } 
}); 

// Sets the waypoint of the bus's current position and destination 
currentBus.polylineRender.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ 
    location: currentBus.location 
})); 
currentBus.polylineRender.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ 
    location: currentBus.destination.coords 
})); 

// Calculate the directions 
currentBus.polylineRender.calculateDirections(); 
} 

---

Im Grunde, was ich suche, ist ein Weg, um herauszufinden, was verursacht, Dieses Problem, eine tatsächliche Lösung für das Problem, wenn es einfach ist und ich vermisse nur etwas offensichtlich, oder die besten Praktiken, um dieses Problem von vornherein zu vermeiden.

Hinweis: Ich entschuldige mich für das Posten so viel Code. Es ist schwer zu bestimmen, welchen Code zu posten ist, da ich nicht wirklich weiß, welcher Abschnitt des Codes das Problem verursacht. Lassen Sie mich wissen, ob dies geändert werden muss oder ob andere Informationen benötigt werden, und ich würde gerne dazu beitragen. Ich habe auch eine Menge scheinbar irrelevanter JS-Code aus der gleichen Datei weggelassen, ich würde mich freuen, wenn nötig hinzuzufügen.

Answer 1

Die Speicherlecks wurden hauptsächlich über die Implementierung des experimentellen Zweigs von Bing Maps gelöst, wie von rbrundritt vorgeschlagen.

Hier ist ein Beispiel dafür, wie Bing Maps mit Hilfe des experimentellen Zweig importieren:

<script src='https://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=[Insert callback function]' async defer></script> 

ich später in der Lage war, auf den Release-Zweig zu wechseln, da das Updates für die Speicherlecks auf diesen Zweig geschoben wurde. Weitere Informationen zu den Bing Maps Map Control Branches finden Sie unter here.