DOM performance in Javascript

Question

I have an question about performance of loading alot off DOM objects. First i have an array of the length of 9540, of something like this:

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

The problem is not the loop, but the problem is then i load all the click event to the DOM, which takes 1200ms in Chrome(IE it takes 8700ms), the problem is in Leafletjs using markerCluster. But any idea to increase the performance.

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 I have tried to use the suggestions given to me, but there's not alot of performance gainSee JSFiddle example This is the start point

Quonux · Answer 1 · 2013-04-05T21:36:57.427

1

Don't use setContent because it is damn slow ,building the DOM nodes manually is maybe faster.

A very good tutorial to manipulate the DOM tree is here.

You can also circumvent the big DOM doom with the use of the canvas Element and some javascript magic.

edited Apr 05 '13 at 21:36

answered Apr 05 '13 at 21:08

Quonux

2,975
1
24
32

score 1 · Accepted Answer · answered Apr 05 '13 at 21:13

1

Put the onclick event function on the parent element of your markers, not on each marker, and then within it determine which (if any) of the children was clicked. Then you have only a single event to wire up--this should also save some memory.

Also, a great way to find out what is costing the most is to use the debugger and randomly stop your code while it is running. Note not just the function currently being run, but all the functions on the "call stack" above it. After about 5 breaks, there should be one function (from anywhere in the call stack) that was showing in 3 or 4 of the samples--this is where to focus your attention.

answered Apr 05 '13 at 21:13

ErikE

48,881
23
151
196

I'm quit new at javascript. So i'm not sure have to move the onclick of my markers. Do you no if that are an guide about have to do it. – mortenstarck Apr 05 '13 at 23:39
Please see [this post](http://stackoverflow.com/questions/9914587/javascript-event-delegation-handling-parents-of-clicked-elements) for an example. There are also a lot of [online resources for this](https://www.google.com/search?q=javascript+handle+click+on+parent+element). – ErikE Apr 11 '13 at 17:02

DOM performance in Javascript

2 Answers2