Javascript庫中的性能問題dtree.js

在我的應用程序（早在2006年發展起來）中，開發人員使用dtree.js（Link）來呈現層次結構樹。這個問題發生在2010年，樹長達1300節點，深度達到13層。在此之後，頁面開始加載非常緩慢，在IE中，它給臭名昭着的「停止運行此腳本？」錯誤。我想提高性能，但我所有的技巧都失敗了：Javascript庫中的性能問題dtree.js

緩存變量，DOM元素。
計算循環外的數組長度。
最小化循環的使用。

除此之外，我嘗試使用setTimeout（）來中斷較小任務的執行，但由於它有許多限制，我無法使其工作。另外，我無法將樹的渲染移動到服務器端。

任何幫助表示讚賞。

感謝，希德

來源

2011-06-02 Sid

典型的是在任何瀏覽器速度慢是什麼做的DOM。

如果您可以延遲加載樹的HTML表示的任何部分，請執行此操作。

通常儘量減少您編輯DOM的次數。

例子：

for(var i = 0; i < data.length; i += 1) { 
    dom_element.innerHTML += data.some_data; 
}

var string = ""; 
for(var i = 0; i < data.length; i += 1) { 
    string += data.some_data; 
} 
dom_element.innerHTML += string; // only one call to innerHTML, likely much faster!

的innerHTML也比使用DOM文檔樣式（document.createElement，element.append等）

來源

2011-06-02 17:12:00 Halcyon

在我的代碼快，innerHTML的通話僅僅是一次，但dtree.js固有地有很多循環。有了1200個節點，它花了很多時間。 – Sid 2011-06-02 18:34:39

只需要一次，或者每個節點只需要一次？在前一種情況下，您的確可以簡化爲優化JavaScript代碼。請記住，沒有用戶會一次需要「看」1300個節點。沒有顯示的任何東西都不需要渲染;） – Halcyon 2011-06-02 18:39:59

不，只有一次用於所有節點。循環創建一個字符串，然後插入到元素中。關於渲染，進入的數據是無序的，並且循環迭代來查找父級子關係。所以我們需要整個數據。 – Sid 2011-06-02 19:10:13

Javascript庫中的性能問題dtree.js

回答

相關問題