使用 requestanimationframe與
settimeout相比，requestanimationframe最大的優勢是由系統來決定**函式的執行時機。
如果螢幕重新整理率是60hz,那麼**函式就每16.7ms被執行一次，如果重新整理率是75hz，那麼這個時間間隔就變成了1000/75=13.3ms，換句話說就是，requestanimationframe的步伐跟著系統的重新整理步伐走。它能保證**函式在螢幕每一次的重新整理間隔中只被執行一次，這樣就不會引起丟幀現象。
我們使用requestanimationframe來進行分批渲染：
//需要插入的容器let ul = document.getelementbyid('container');
// 插入十萬條資料
let total = 100000;
// 一次插入 20 條
let once = 20;
//總頁數
let page = total/once
//每條記錄的索引
let index = 0;
//迴圈載入資料
function loop(curtotal,curindex)
//每頁多少條
let pagecount = math.min(curtotal , once);
window.requestanimationframe(function()
loop(curtotal - pagecount,curindex + pagecount)
})}loop(total,index);
使用 documentfragment
documentfragment，文件片段介面，表示乙個沒有父級檔案的最小文件物件。它被作為乙個輕量版的document使用，用於儲存已排好版的或尚未打理好格式的xml片段。最大的區別是因為
documentfragment不是真實dom樹的一部分，它的變化不會觸發dom樹的（重新渲染) ，且不會導致效能等問題。
可以使用document.createdocumentfragment方法或者建構函式來建立乙個空的documentfragment
我們得知documentfragments是dom節點，但並不是dom樹的一部分，可以認為是存在記憶體中的，所以將子元素插入到文件片段時不會引起頁面回流。
//需要插入的容器let ul = document.getelementbyid('container');
// 插入十萬條資料
let total = 100000;
// 一次插入 20 條
let once = 20;
//總頁數
let page = total/once
//每條記錄的索引
let index = 0;
//迴圈載入資料
function loop(curtotal,curindex)
//每頁多少條
let pagecount = math.min(curtotal , once);
window.requestanimationframe(function()
loop(curtotal - pagecount,curindex + pagecount)
})}loop(total,index);
前端渲染幾十萬條資料不卡頓
渲染大資料時,合理使用createdocumentfragment和requestanimationframe,將操作分為一小段執行.用來建立乙個虛擬的節點物件,或者說說是用來建立文件碎片節點,可以包含各種型別的節點,在建立之初是空的.建立的節點不屬於文件樹,繼承的parentnode屬性總是nul...
數十萬條資料如何快速插入資料庫中
引言 這幾天工作這邊同事遇到了乙個問題，對十五萬條資料進行計算，插入資料庫的時候耗時很嚴重，使用了批量插入對十五萬條資料插入仍然耗費了30秒，前面計算也耗費了二十多秒，系統流暢度因此很難堪。經過我的排查發現主要是兩個點需要優化。1 計算的演算法冗餘，優化前23秒計算完成，優化後0.8秒完成計算 由於...
Js實現渲染上萬條資料頁面不卡住
settimeout countofrender 1 loop function loop loop 0 原理 渲染大資料時，合理使用createdocumentfragment和requestanimationframe，將操作切分為一小段一小段執行。documentfragment 是乙個虛擬的...