在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性能

回答

相關問題