前端實現數組里面幾萬條數據,做到不卡頓


window.requestAnimationFrame()告訴瀏覽器——你希望執行一個動畫,並且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數,該回調函數會在瀏覽器下一次重繪之前執行。

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)
    }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM