Производительность DOM в Javascript

Question

У меня есть вопрос о производительности загрузки с объектов DOM. Во-первых у меня есть массив длиной 9540, что-то вроде этого:

{"Id":144412,"GisX":55.50963,"GisY":9.77794}`) 

Проблема не петля, но проблема в том, то я загрузить все события нажатия на DOM, который принимает 1200ms в Chrome (IE занимает 8700 мс), проблема в Leafletjs с использованием markerCluster. Но любая идея увеличить производительность.

for (var i = 0, obj; (obj = MarkerArrayDefs[i]); i++) { 
    setMarker(obj.Id, obj.GisX, obj.GisY, i); 
} //The for loop takes: 151.000ms 
var markerList = []; 

function setMarker(propId, lat, lng) { 
    //var marker = new L.Marker([lat, lng]); 
    var marker = new L.Marker([lat, lng], { 
     icon: customIcon 
    }).on('click', function() { 
     var markeren = this; 
     var popup = L.popup({ 
      offset: (new L.Point(-10, -47)) 
     }).setLatLng(markeren.getLatLng()).setContent('<div><span style="color: #4a6b0e; font-weight: bold;">Henter</span><br><img alt="Progress" src="' + ol.url("~/Content/Css/images/mapWaiting.gif") + '" id="imgProg"/></div>').openOn(folia.map); 
     $.get(ol.url('~/ControllerHelper/MapContent/'), { 
      id: propId, 
      callType: searchfilters.ItemType 
     }, function (data) { 
      popup.setContent(data); 
     }); 
    }); 
    markerList.push(marker); 
    return false; 
} 
markers.addLayers(markerList); //This takes: 0.000ms. 
map.addLayer(markers); // This is the problem: 1200.000ms 

Update Я пытался использовать предложения, данные мне, но там не много прироста производительности See JSFiddle exampleThis is the start point

Answer 1

Поместите функцию события onclick на родительский элемент ваших маркеров, а не на каждый маркер, а затем внутри него определите, какие (если есть) дети были нажаты. Затем у вас есть только одно событие для подключения - это также должно сохранить некоторую память.

Кроме того, отличный способ узнать, что стоит больше всего, - использовать отладчик и случайным образом останавливать свой код во время его работы. Обратите внимание не только на выполняемую в данный момент функцию, но и на все функции над ней. Примерно через 5 разрывов должна быть одна функция (из любой точки стека вызовов), которая показывалась в 3 или 4 выборках - здесь вам нужно сосредоточить свое внимание.

Answer 2

Не используйте setContent, потому что это чертовски медленно, строительство DOM узлов вручную, возможно, быстрее.

Очень хорошее руководство по управлению деревом DOM - here.

Вы также можете обойти большую Doom DOM с использованием элемента canvas и некоторой магии javascript.