關於JS DOM建立大量資料 和 JS樹 的優化

2022-02-16 12:43:44 字數 3117 閱讀 9469

在公司有乙個需求

由於之前沒有考慮到這種大資料量的情況下,在1000條資料 甚至連ie8都沒有辦法正常使用。

有兩個選單乙個是

table 全列表,將所有的資料全部展現

乙個是樹形選單,有分級(理論上無限級)

在大量的拼接之下,效率還是innerhtml 來的更高

網上已經有很多對比,這裡就不贅述了。

當然 不能用 div.innerhtml += ""; 如果這樣。 還不如createlement

通過字串拼接 將所有的你想要的 html 拼接完成後,統一 innerhtml 建立.

2.說到字串拼接,吐槽的點又來了。

你在網上搜尋 往往都推薦你用陣列拼接字串,說速度要快一點 var arr = ; arr.push(""); arr.join('');

其實不然。

ie7,8  陣列拼接 和 string+string 其實速度差異不大

ie9,ff,google,opera 下 string+string 都明顯強於 arr

說穿了 還是為了照顧ie6

同樣的拼接字串 在ie6下。 陣列還過得去, string+string 直接假死半天

3.盡量使用大容器控制事件

在之前的**中 在使用$("")建立的同時,同時繫結了事件。

其實在大量資料情況下,這也是不小的消耗。比如a

textaa

atextaa

atextaa

atextaa

atextaa

我要在第一列和第三列的a標籤 加事件

那麼就應該在整個table上面click 事件

而不是在建立的時候給每乙個a標籤加上事件.

table 的 click的事件捕捉到後判斷是否是a標籤。 然後去做相應事件。

當然這種做法 還是有他的缺點。 不方面傳值。 往往只能通過a標籤 tr td 上的屬性來傳值

4.settimeout 非同步輸出。

其實在做完上面3的工作之後,除了ie6 已經完全是秒開了。

但是ie6還是有明顯的卡頓。

settimeout(function() = aaa

//詳細輸出**

settimeout(aaa,time)

},time);

判斷好一次最大輸出值,輸出多少次。

這樣的效果非常好。 在固定的一屏寬高下。 比如你一次輸出100行正好可以鋪滿。

使用者甚至感覺不到延時。

做完上面4部 在2000行 在ie6下面也毫無壓力。

可惜在測試部傳來噩耗。

我發現我忽略了乙個問題。

在大量分組下,不太好使用settimeout。而且遍歷樹的時候消耗極大

1.因為分組很瑣碎,無法像整個輸出一樣 分割來輸出(ps:其實這個都很好辦,硬輸出ie6 還是吃的下,在實在不行的情況下 還是可以settimeout 分組輸出)

2.遍歷樹 問題來了

類似於這樣的資料(理論上是無限層)

原來的方法,也就是最正統的方法。

遞迴遍歷

先遍歷pid=0

然後再通過結果一層一層的繼續遍歷。 在層數深且多的情況下。ie6直接 禁止指令碼。

想到了兩種辦法。

1. 採用101010101 這種方式。

id自帶節點資訊。可以順序遍歷 我可以一次遍歷就可以輸出樹

但是直接被boss pass掉。。 難道重新做資料庫啊

當然這種寫法也有他的問題

(1)首先不好支援無限層

(2)當移動節點的時候。 噁心事兒就來了

2.js端 重新整理

換句話說 當json 格式資料傳到客戶端後。

通過1-2次遍歷重新整理為我想要的格式

1

var newgroup ={};

2var errergroup ={};

3function

deep(json)411

}1213function

findnodes(g,arr)

1419

else

25else29}

30}3132

function

setnodes(g,arr)

3338

else

3945 tmpgroup[g.id] =g;

46 newgroup[g.id] =;47}

48 }

這樣newgroup 卻是可以得到我想要的分組資訊

但是有2個問題

1. 這樣的寫法 會改變原來的 json

當你得到 新的json 的時候

你會發現 你傳入的json 已經被改變.

如果是轉殖乙份 (ps: 還沒有測試), 但是確實擔心 轉殖乙份 在大量分組下 效能損失嚴重

這個只有再測試了。

2. 子節點不能先於父節點出現

當然 如果你是走正常新增,id順序的話 確實沒有問題;

所以我新增了乙個 errergroup 來存放找不到父節點,或者父節點後於子節點出現的情況

ps: 家裡vs 出問題了。 上面**記事本純手寫也沒有測試過.

補上測試後的**

finishingtree = ,

errorgroup: {},

pidtag: "pid",

indextag: "id",

tmpgroup: {},

deep: function(json)

},findnodes: function(g, arr)

else

else }},

setnodes: function(g, arr)

else

tmpgroup[g.id] = g;

}this.tmpgroup[g.id] = ;

},getnewgroup: function(json, strpid, strindex) ;

return this.newgroup;

}}

ie6下 4毫秒的樣子

就是這樣

ps. 最後讓我糾結的是。後來我才發現效能問題的源頭 tm 不是在這裡

關於大量一次性資料解決方案

關於大量一次性資料解決方案 適合大量的資料查詢增加 定期或偶然性查詢或統計。下面是一條gps位置資訊,儲存在上面的gpsbody 欄位中 下面是乙個連線表,想到與乙個索引表,比如說報警字段,其實還可以放入其他的重要輸入。當需要查詢的時候就在這個表中查詢,因為這張表就是乙個索引表,所以很快。查出結果後...

關於ESXi 特性和主機建立

上次的筆記提到了esxi是vsphere的核心元件,是乙個虛擬化伺服器,或者虛擬化監視器。esxi是乙個管理程式,具有下列功能 1.高安全性 基於主機的防火牆 記憶體強化 核心模組完整性 可信平台模組 uefi安全引導 鎖定模式 2.磁碟占用空間小 3.可安裝在硬碟 san lun usb裝置 sd...

SQL Server 將資料匯出為XML和Json

有時候需要一次性將sql server中的資料匯出給其他部門的也許進行關聯或分析,這種需求對於ssis來說當然是非常簡單,但很多時候僅僅需要一次性匯出這些資料而建立乙個ssis包就顯得小題大做,而sql server的匯入匯出工具其中bug還是蠻多的,最簡單的辦法是bcp。在sql server 2...