渲染大量資料我是這樣操作的

事情的由來是這樣紫的，目前我負責公司內部的核心業務gis天眼系統開發，遇到乙個問題就是：後端返回幾千條資料導致瀏覽器渲染失敗，瀏覽器幾乎是停滯狀態。後來沒有想到合適的解決方案，臨時渲染少量資料解決了。我記得清清楚楚，我已經看過關於這樣的問題怎麼解決，可惜我沒有使用，原因是學而不思，看而不用。後來由於家裡有些事情，我請假回家休假休息了一段時間。回來之後開了一次會議，說我同事實現了乙個上述問題，用到了js執行緒。然後我就針對此問題開始了二次思考。就有了本文。

瀏覽器內分js執行緒、gui渲染執行緒、事件觸發執行緒、等。大家都知道js是單執行緒，但是問題來了，單執行緒如何實現非同步，比如說我們經常使用的ajax是怎麼實現的呢？當你真正了解js的event loop你就會明白！哦：原來如此。這裡我就對執行緒進行拋磚引玉，如果想深入學習可以看一下這篇文章：

渲染大量資料肯定會涉及到gui渲染執行緒與js執行緒。如下簡單的**：

//js**			
for(var i=0;i<100;i  )

從上面**可以分析、每次for迴圈使用dom進行渲染。瀏覽器是怎麼渲染的呢？js執行緒是單執行緒，它如果執行js執行緒，gui渲染執行緒肯定會等候，這樣一來渲染大量資料就會造成頁面卡頓，甚至停滯、奔潰。頁面顯示效果就是一下子這些dom節點全部渲染出來。知道了這一點，我們就可以想辦法解決它（渲染大量資料）。

如下**：

console.log(1);
settimeout(function
(),100);
console.log(3);

大家肯定會說這個很簡單，輸出1 3 2。我想說的是大家看js的event loop了嗎？看了肯定知道其原理。

首先判斷js是同步還是非同步,同步就進入主程序,非同步就進入event table

非同步任務在event table中註冊函式,當滿足觸發條件後,被推入event queue

同步任務進入主線程後一直執行,直到主線程空閒時,才會去event queue中檢視是否有可執行的非同步任務,如果有就推入主程序中。

我使用了遞迴呼叫實現如下**：

var j=1;

/** * 渲染方式

* * @number 數量

* */

function showdom(number)

}/**

* 渲染大資料量的dom節點

* * @count 總數量

* * */

function init(count)

if(count>500),200);

}else

}init(4000);

可以看出利用上述方式可以簡單輕鬆實現渲染大量資料，給使用者的感覺是，當前資料很多，我需要一步一步渲染。比之前一下子渲染幾千條資料導致gui渲染引擎卡頓、甚至停滯強多啦。

接下來我又參考書籍使用了下面的**。

/**
* 分時函式
* @ary  資料
* @callback  回掉函式，乙個引數，當前資料項
* @count  數量
*  * */
function timechunk(ary,callback,count)
if(objts.call(callback)!=="[object function]")
if(objts.call(count)!=="[object number]")
//開始執行函式    
function
start
()			start();
},200);	}}
//後端返回資料
var ayy=;
for (var a=0;a<50000;a  ) 
//開始使用 分時函式
var init=timechunk(ayy,function(i),500);
//開始渲染大資料
init();

dome1

dome2

document.createdocumentfragment是最完美的選擇。

setinterval不是最優選擇，應該使用settimeout實現setinterval

什麼時候會出現記憶體洩漏？

var fragment=document.createdocumentfragment();

/** * 渲染方式1

* 使用createdocumentfragment

* * @number 數量

* */

function showdom(number)

}showdom(10000);

/** * 渲染方式2

* * @number 數量

* */

function showdom1(number)

}//showdom1(10000);

//可以使用chrome瀏覽器 timeline檢視js執行緒與渲染執行緒占用時間。

這是結果

這是使用createdocumentfragment方法

這是結果

要在學習中思考，在專案中實戰。總有一天你會變得更加厲害！

渲染大量資料我是這樣操作的

渲染大量資料我是這樣操作的

渲染大量資料我是這樣操作的

二 Swift網路請求回來的資料我這樣取

相關推薦