面試題--如何渲染幾萬條資料並不卡住介面
阿新 • • 發佈:2019-01-02
根據題意,如果我們一次性渲染重新整理幾萬條資料,頁面會卡頓,因此只能分批渲染,既然知道原理我們就可以使用setInterval和setTimeout、requestAnimationFrame來實現定時分批渲染,實現每16 ms 重新整理一次
requestAnimationFrame跟setTimeout/setInterval差不多,通過遞迴呼叫同一方法來不斷更新畫面以達到動起來的效果,但它優於setTimeout/setInterval的地方在於它是由瀏覽器專門為動畫提供的API,在執行時瀏覽器會自動優化方法的呼叫,並且如果頁面不是啟用狀態下的話,動畫會自動暫停,有效節省了CPU開銷。
function refresh(total, onceCount) { //total -> 渲染資料總數 onceCount -> 一次渲染條數 let count = 0, //初始渲染次數值 loopCount = total / onceCount //渲染次數 function refreshAnimation() { /* * 在此處渲染資料 */ if (count < loopCount) { count++ requestAnimationFrame(refreshAnimation) } } requestAnimationFrame(refreshAnimation) }