DOM performance in Javascript -

i have question performance of loading alot off dom objects. first have array of length of 9540, of this:

{"id":144412,"gisx":55.50963,"gisy":9.77794}`) 

the problem not loop, problem load click event dom, takes 1200ms in chrome(ie takes 8700ms), problem in leafletjs using markercluster. idea increase performance.

for (var = 0, obj; (obj = markerarraydefs[i]); i++) {     setmarker(obj.id, obj.gisx, obj.gisy, i); } //the 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); // problem: 1200.000ms 

update have tried use suggestions given me, there's not alot of performance gainsee jsfiddle example this start point

put onclick event function on parent element of markers, not on each marker, , within determine (if any) of children clicked. have single event wire up--this should save memory.

also, great way find out costing use debugger , randomly stop code while running. note not function being run, functions on "call stack" above it. after 5 breaks, there should 1 function (from anywhere in call stack) showing in 3 or 4 of samples--this focus attention.