渲染大資料時,合理使用createdocumentfragment和requestanimationframe,將操作分為一小段執行.用來建立乙個虛擬的節點物件,或者說說是用來建立文件碎片節點,可以包含各種型別的節點,在建立之初是空的.
建立的節點不屬於文件樹,繼承的parentnode屬性總是null,當請求把乙個documentfragment節點插入文件樹,插入的不是documentfragment自身,而是它的子孫節點,插入的是括號裡的節點.它有利於實現文件的剪下,複製和貼上.
當需要新增多個dom元素時,如果先將這些元素新增到documentfragment中,在統一將documentfragment新增到頁面,會減少頁面渲染dom的次數,效率會明顯提公升.
requestanimationframe
requestanimationframe比起settimeout,setinterval的優勢主要是兩點:
requestanimationframe會把每一幀中的所有dom操作集中起來,在一次重繪和回流中完成,並且重繪或回流的時間間隔緊緊會隨瀏覽器的重新整理頻率,一般來說頻率為每幀60秒
在隱藏不可見元素中,requestanimationframe將不會進行重繪或回流.有更少的cpu,gpu和記憶體使用量.
<
/ul>
const total =
100000
;// 插入十萬條資料
const oncecount =50;
// 每次插入50條資料
const sumcount = math.
ceil
(total/oncecount)
;// 插入資料需要的次數
var rendercount =0;
// 渲染次數
var ul = document.
queryselector
("ul");
// 獲取要插入資料的父節點
function
add(
) ul.
(fragment)
; rendercount++
;loop()
;}function
loop()
}loop()
;<
/script>
<
/body>
高效能渲染十萬條資料（時間分片）
使用 requestanimationframe 與settimeout相比，requestanimationframe最大的優勢是由系統來決定 函式的執行時機。如果螢幕重新整理率是60hz,那麼 函式就每16.7ms被執行一次，如果重新整理率是75hz，那麼這個時間間隔就變成了1000 75 13...
數十萬條資料如何快速插入資料庫中
引言 這幾天工作這邊同事遇到了乙個問題，對十五萬條資料進行計算，插入資料庫的時候耗時很嚴重，使用了批量插入對十五萬條資料插入仍然耗費了30秒，前面計算也耗費了二十多秒，系統流暢度因此很難堪。經過我的排查發現主要是兩個點需要優化。1 計算的演算法冗餘，優化前23秒計算完成，優化後0.8秒完成計算 由於...
百萬條資料分頁
寫出 之前，先說明一下原理，比較簡單。有一張表 test 如下 結構是 id 自動編號 txt 假設40條記錄 現在要每頁顯示10條記錄，則每頁要顯示的資料應該是 第一頁 10 第二頁 11 20 第三頁 21 30 第四頁 31 40 如要顯示第一頁，最簡單的方法就是 select top 10 ...