Насколько я могу судить, слушатели удаляются из памяти.
Теоретически, это, вероятно, связано с тем, что слушатели не слушают активно как таковые - Google Maps сохраняет их только в соответствующей функции, а затем запрашивает эту функцию, какие слушатели имеют, когда происходит событие.
Практически я запустил тест, и вот результаты:
Tabs 1 and 2 create a point with 20000 listeners, and track the listeners.
Tab 3 creates a point with 20000 listeners, but doesn't track them.
Stage 1 is after they've got the listeners.
Stage 2 is after they've dropped something (tab 1: point, 2: listeners, 3: point)
Stage 3 is after they've dropped the other (tab 1: listeners, 2: point, 3: no change (listeners dropped implicitly at stage 2) )
Tab PID Memory (live, K) at stage...
1 2 3
1 4643 18194 16026 8265
2 4659 18174 8155 8227
3 4676 17750 8152 8202
Использование памяти в JS нелепо отслеживать, отчасти (я подозреваю) из-за автоматического сборщика мусора. Чтобы получить эти результаты, я использовал встроенный в Chrome диспетчер задач, и после каждого важного шага эксперимента включал и отключал большой кусок памяти, чтобы заставить руку сборщика мусора.
Любопытно, что когда вкладка 1 отбрасывает точку, она теряет около 2000 КБ памяти, а когда вкладка 2 отбрасывает точку, она набирает 77 КБ (незначительное изменение, учитывая изменчивость использования памяти). Я подозреваю, что это связано с тем, что на вкладке 1 отбрасывается точка с 20000 подключенными слушателями , в то время как на вкладке 2 опускается оголенная точка.
Вот источник, который я использовал. Я не предоставляю ссылку скрипта, потому что скрипта просто усложняет отслеживание использования памяти: /
html (вставьте свой собственный ключ API):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {height: 100%; width: 100%;}
#map {width: 100%; height: 80%;}
</style>
</head>
<body>
<h1>Welcome to MapLand, home of a single map.</h1>
<div id="map"></div>
<button onclick="addPts(true);">add points (store listeners)</button>
<button onclick="addPts(false);">add points (don't store listeners)</button>
--------
<button onclick="deletePts();">delete points</button>
<button onclick="deleteLs();">delete listeners</button>
--------
<button onclick="checkListenerVar();">check listener var</button>
<button onclick="cycleLargeChunk();">cycle large chunk</button>
</body>
<script src="test2.js"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAorBo-zMFJo9viqdv3pkuhMyg5hytpbaQ&callback=initMap"></script>
</html>
JS (test2.js):
var uluru = {lat: -25.363, lng: 131.044};
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
}
var ptLat = uluru.lat, ptLng = uluru.lng;
var pts = []; // points
var ls = []; // listeners
var listenerVar;
function addPts(storeLs) {
var m = new google.maps.Marker({
position: {lat: ptLat, lng: ptLng},
map: map
});
ptLng += 1;
if (ptLng > uluru.lng + 20) {
ptLng = uluru.lng;
ptLat += 1;
}
pts.push(m);
for (var i = 50000; i > 0; i--) {
var l = google.maps.event.addListener(m, 'click', function () {listenerVar = i;});
if (storeLs) ls.push(l);
}
}
function deletePts() {
for (var i = pts.length-1; i >= 0; i--) pts[i].setMap(null);
pts = [];
ptLat = uluru.lat;
ptLng = uluru.lng;
}
function deleteLs() {
for (var i = ls.length-1; i >= 0; i--) ls[i].remove();
ls = [];
}
function checkListenerVar() {
alert("Listener var is " + listenerVar + ", but is being reset to -1.");
listenerVar = -1;
}
function cycleLargeChunk() {
var l = [0];
for (var i = 0; i < 26; i++) {
l = l.concat(l);
}
//Force the environment to hang on to l for at least a second.
setTimeout(function () {console.log(l.length);}, 1000);
}