在DOM中的DOM性能

我有关于加载关闭DOM对象的性能的问题。首先我的9540长度的阵列中，这样的事情：在DOM中的DOM性能

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

问题不循环，但问题是，然后我加载所有的单击事件的DOM，这需要1200ms在Chrome （IE需要8700ms），问题出现在使用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

来源

2013-04-05 mortenstarck

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

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

来源

2013-04-05 21:13:07 ErikE

我在javascript中退出了新功能。所以我不确定必须移动我的标记点击。如果这是一个关于必须这样做的指南，你会否认。 – mortenstarck 2013-04-05 23:39:33

请参阅[这篇文章]（http://stackoverflow.com/questions/9914587/javascript-event-delegation-handling-parents-of-clicked-elements）为例。还有很多[在线资源]（https://www.google.com/search?q=javascript+handle+click+on+parent+element）。 – ErikE 2013-04-11 17:02:41

，因为它是该死的慢，建立DOM节点不要使用setContent手动可能会更快。

一个非常好的操作DOM树的教程是here。

你也可以通过使用canvas元素和一些javascript魔术来规避大DOM厄运。

来源

2013-04-05 21:08:08 Quonux

在DOM中的DOM性能

回答

相关问题