javascript - JavaScript 中的 DOM 性能

Question

我对加载大量 DOM 对象的性能有疑问。首先我有一个长度为 9540 的数组，如下所示:

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

问题不是循环，而是问题是我将所有点击事件加载到DOM，这在Chrome中需要1200毫秒(IE需要8700毫秒)，问题出在使用markerCluster的Leafletjs中。但任何提高性能的想法。

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

更新 我尝试使用给我的建议，但没有太多性能提升See JSFiddle example This is the start point

Answer 1

将 onclick 事件函数放在标记的父元素上，而不是每个标记上，然后在其中确定单击了哪个子元素(如果有)。那么您只需连接一个事件 - 这也应该节省一些内存。

此外，找出成本最高的一个好方法是使用调试器并在代码运行时随机停止它。不仅要注意当前正在运行的函数，还要注意其上方“调用堆栈”上的所有函数。大约 5 次中断后，应该有一个函数(来自调用堆栈中的任何位置)显示在 3 或 4 个示例中 - 这是您要集中注意力的地方。