您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)JavaScript一次性展示幾萬條數(shù)據(jù)的方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
代碼如下
$.get("data.json", function (response) { //response里大概有13萬條數(shù)據(jù) loadAll( response ); }); 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); }
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í)行流程中運行,那似乎不但無法解決糟糕的頁面卡頓問題,反而會將代碼復(fù)雜化。 類似的問題在其它語言最佳的解決方案是使用多線程,JavaScript雖然沒有多線程,但是setTimeout和setInterval兩個函數(shù)卻能起到和多線程差不多的效果。 因此,要解決這個問題, 其中的setTimeout便可以大顯身手。 setTimeout函數(shù)的功能可以看作是在指定時間之后啟動一個新的線程來完成任務(wù)。
$.get("data.json", function (response) { //response里大概有13萬條數(shù)據(jù) loadAll( response ); }); 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í)行流程是
1. 用ajax獲取到需要處理的數(shù)據(jù), 共13萬條
2. 將數(shù)組分組,每組500條,一共260組
3. 循環(huán)這260組數(shù)據(jù),分別處理每一組數(shù)據(jù), 利用setTimeout函數(shù)開啟一個新的執(zhí)行線程(異步),防止主線程因渲染大量數(shù)據(jù)導(dǎo)致阻塞。
loadPart函數(shù)中有這段代碼
while (index - currIndex == 1) { $("#content").append(html); currIndex = index; }
是為了保證不同的線程中最終插入html到文檔中時順序的一致性, 不至于同時執(zhí)行的代碼在插入html時互相篡位。
通過這種方式執(zhí)行, 頁面瞬間就刷出來了,不用絲毫等待時間。 從同步改為異步,雖然代碼的整體資源消耗增加了, 但是頁面卻能瞬間響應(yīng), 而且, 前端的運行環(huán)境是用戶的電腦,因此些許的性能損失帶來的用戶體驗提升相對來說還是值得的。
雖然示例中提到的情況在現(xiàn)實環(huán)境中幾乎不可能出現(xiàn), 但是在我們平時的工作中總會有一些似是而非的場景出現(xiàn), 利用里面的處理思路, 或許對我們解決問題會有一定的幫助。
ps:setTimeout并不算真正的多線程, 但是為了方便表達(dá),便借用了線程一詞
感謝各位的閱讀!關(guān)于“JavaScript一次性展示幾萬條數(shù)據(jù)的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。