0

我对加载大量 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

更新 我尝试使用给我的建议，但性能提升不多见 JSFiddle 示例 这是起点

4

2 回答 2

1

不要使用 setContent 因为它太慢了，手动构建 DOM 节点可能会更快。

一个非常好的操作 DOM 树的教程在这里。

您还可以使用 canvas 元素和一些 javascript 魔法来规避大 DOM 厄运。

于 2013-04-05T21:08:08.103 回答
1

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

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

于 2013-04-05T21:13:07.280 回答