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

2021-09-11 09:55:21 字數 2630 閱讀 6124

事情的由來是這樣紫的,目前我負責公司內部的核心業務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方法

這是結果

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

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

事情的由來是這樣紫的,目前我負責公司內部的核心業務gis天眼系統開發,遇到乙個問題就是 後端返回幾千條資料導致瀏覽器渲染失敗,瀏覽器幾乎是停滯狀態。後來沒有想到合適的解決方案,臨時渲染少量資料解決了。我記得清清楚楚,我已經看過關於這樣的問題怎麼解決,可惜我沒有使用,原因是學而不思,看而不用。後來由於...

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

事情的由來是這樣紫的,目前我負責公司內部的核心業務gis天眼系統開發,遇到乙個問題就是 後端返回幾千條資料導致瀏覽器渲染失敗,瀏覽器幾乎是停滯狀態。後來沒有想到合適的解決方案,臨時渲染少量資料解決了。我記得清清楚楚,我已經看過關於這樣的問題怎麼解決,可惜我沒有使用,原因是學而不思,看而不用。後來由於...

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

原始碼位址 swift 2.3 alamofire3.0版本支援 ios 8 swift 3 alamofire4.0以上版本支援 ios 9及以上系統 json資料 pic msg u6210 u529f ret 1 複製 模型 import uikit class basemodel nsobj...