通過DOM操作插入到頁面熟丸，勢必導致頁面運行出現(xiàn)卡頓， 為此我還特意寫了一個 demo測試了一下伪节， 代碼如下
//data.json
var data=[{"title":"標題","content":"hahahahaha"},]
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script src="./data.json"></script>
<script>
loadAll( data);
function loadAll(response) {
var html = "";
for (var i = 0; i < response.length; i++) {
var item = response[i];
html += "<li>title:" + item.title + " content:" + item.content + "</li>";
}
$("#content").html(html);
}
</script>
data.json中大概有13萬條數(shù)據(jù)左右光羞， 通過ajax獲取數(shù)據(jù)后以最簡單粗暴的方法展示數(shù)據(jù)，在chrome瀏覽器下怀大， 刷新頁面到數(shù)據(jù)顯示雏逾，我心中默數(shù)防泵， 整個過程大概花掉5秒鐘左右的時間， 卡頓非常明顯。 我大致觀察了一下代碼的運行時間馏鹤，發(fā)現(xiàn)循環(huán)生成字符串這過程其實并不算太耗時， 性能瓶頸是在將html字符串插入到文檔中這個過程上蓉坎， 也就是 $("#content").html(html); 這句代碼的執(zhí)行黎烈， 畢竟有13萬個li元素要被挺入到文檔里面， 頁面渲染速度緩慢也在情理之中蒜焊。
既然一次渲染13萬條數(shù)據(jù)會造成頁面加載速度緩慢倒信，那么我們可以不要一次性渲染這么多數(shù)據(jù)，而是分批次渲染泳梆， 比如一次10000條鳖悠，分13次來完成， 這樣或許會對頁面的渲染速度有提升优妙。 然而乘综，如果這13次操作在同一個代碼執(zhí)行流程中運行，那似乎不但無法解決糟糕的頁面卡頓問題套硼，反而會將代碼復雜化卡辰。 類似的問題在其它語言最佳的解決方案是使用多線程，JavaScript雖然沒有多線程熟菲，但是setTimeout和setInterval兩個函數(shù)卻能起到和多線程差不多的效果看政。 因此，要解決這個問題抄罕， 其中的setTimeout便可以大顯身手允蚣。 setTimeout函數(shù)的功能可以看作是在指定時間之后啟動一個新的線程來完成任務。
loadAll( data);
function loadAll(response) {
//將13萬條數(shù)據(jù)分組呆贿， 每組500條嚷兔，一共260組
var groups = group(response);
for (var i = 0; i < groups.length; i++) {
//閉包森渐， 保持i值的正確性
window.setTimeout(function () {
var group = groups[i];
var index = i + 1;
return function () {
//分批渲染
loadPart( group, index );
}
}(), 1);
}
}
//數(shù)據(jù)分組函數(shù)（每組500條）
function group(data) {
var result = [];
var groupItem;
for (var i = 0; i < data.length; i++) {
if (i % 500 == 0) {
groupItem != null && result.push(groupItem);
groupItem = [];
}
groupItem.push(data[i]);
}
result.push(groupItem);
return result;
}
var currIndex = 0;
//加載某一批數(shù)據(jù)的函數(shù)
function loadPart( group, index ) {
var html = "";
for (var i = 0; i < group.length; i++) {
var item = group[i];
html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
}
//保證順序不錯亂
while (index - currIndex == 1) {
$("#content").append(html);
currIndex = index;
}
}
以上代碼大致的執(zhí)行流程是
- 用ajax獲取到需要處理的數(shù)據(jù)， 共13萬條
- 將數(shù)組分組冒晰，每組500條同衣，一共260組
- 循環(huán)這260組數(shù)據(jù)，分別處理每一組數(shù)據(jù)壶运， 利用setTimeout函數(shù)開啟一個新的執(zhí)行線程（異步）耐齐，防止主線程因渲染大量數(shù)據(jù)導致阻塞。
loadPart函數(shù)中有這段代碼
while (index - currIndex == 1) {
$("#content").append(html);
currIndex = index;
}
是為了保證不同的線程中最終插入html到文檔中時順序的一致性蒋情， 不至于同時執(zhí)行的代碼在插入html時互相篡位埠况。
通過這種方式執(zhí)行， 頁面瞬間就刷出來了棵癣，不用絲毫等待時間辕翰。 從同步改為異步，雖然代碼的整體資源消耗增加了狈谊， 但是頁面卻能瞬間響應喜命， 而且， 前端的運行環(huán)境是用戶的電腦河劝，因此些許的性能損失帶來的用戶體驗提升相對來說還是值得的壁榕。
雖然示例中提到的情況在現(xiàn)實環(huán)境中幾乎不可能出現(xiàn)， 但是在我們平時的工作中總會有一些似是而非的場景出現(xiàn)赎瞎， 利用里面的處理思路护桦， 或許對我們解決問題會有一定的幫助。
ps：setTimeout并不算真正的多線程煎娇， 但是為了方便表達，便借用了線程一詞
