在公司有乙個需求
由於之前沒有考慮到這種大資料量的情況下,在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這樣newgroup 卻是可以得到我想要的分組資訊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 }
但是有2個問題
1. 這樣的寫法 會改變原來的 json
當你得到 新的json 的時候
你會發現 你傳入的json 已經被改變.
如果是轉殖乙份 (ps: 還沒有測試), 但是確實擔心 轉殖乙份 在大量分組下 效能損失嚴重
這個只有再測試了。
2. 子節點不能先於父節點出現
當然 如果你是走正常新增,id順序的話 確實沒有問題;
所以我新增了乙個 errergroup 來存放找不到父節點,或者父節點後於子節點出現的情況
ps: 家裡vs 出問題了。 上面**記事本純手寫也沒有測試過.
補上測試後的**
finishingtree = ,ie6下 4毫秒的樣子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;
}}
就是這樣
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...