背景

正常的后端返回幾十條數(shù)據(jù)數(shù)據(jù)直接渲染還好，但是現(xiàn)在需求是表格上面的每一行數(shù)據(jù)都要編輯的操作（各種下拉和輸入），最后整體保存，保存完成后再次進(jìn)來(lái)回顯之前的已經(jīng)填的數(shù)據(jù)，現(xiàn)在的問題是每次回顯比較慢（接口數(shù)據(jù)很快就返回了），在頁(yè)面很卡頓，體驗(yàn)很不好。

問題排查

通過(guò)審查代碼也沒發(fā)現(xiàn)什么問題，找不出原因，代碼邏輯是很簡(jiǎn)單的，就是等接口數(shù)據(jù)返回然后賦值給表格展示，到頁(yè)面就loading了。。

問題解決

之前看到了列表可以切片渲染，就是前端對(duì)數(shù)據(jù)做一個(gè)分頁(yè)然后按照順序加載，假設(shè)每個(gè)頁(yè)面都有 limit 記錄，那么數(shù)據(jù)可以分為 Math.ceil(total/limit) 個(gè)頁(yè)面。然后可以使用setTimeout順序渲染頁(yè)面，一次只渲染一個(gè)頁(yè)面。

• 使用setTimeout

const renderList(list = []){
  const total = list.length
  const page = 0
  const limit = 200
  const totalPage = Math.ceil(total / limit)
  const render = (page) => {
    if (page >= totalPage) return
    setTimeout(() => {
      for (let i = page * limit; i < page * limit + limit; i++) {
        const item = list[i]
        if(item) {
          // ...這里寫當(dāng)前表格賦值邏輯
          // this.tableData.push(item)
        }
      }
      render(page + 1)
    },0)
  }
  render(page)
}

• 使用requestAnimationFrame來(lái)代替 setTimeout

readerList(list = []) {
      const total = list.length
      const page = 0
      const limit = 10
      const totalPage = Math.ceil(total / limit)
      const render = (page) => {
        if (page >= totalPage) return
          for (let i = page * limit; i < page * limit + limit; i++) {
            const item = list[i]
            if(item) {
               // ...這里寫當(dāng)前表格賦值邏輯
               // this.tableData.push(item)
            }
          }
          requestAnimationFrame(() => { render(page + 1) })
      }
      requestAnimationFrame(() => { render(page) })
    }

關(guān)于requestAnimationFrame

requestAnimationFrame

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行。
備注： 若你想在瀏覽器下次重繪之前繼續(xù)更新下一幀動(dòng)畫，那么回調(diào)函數(shù)自身必須再次調(diào)用 requestAnimationFrame()。requestAnimationFrame() 是一次性的。

requestAnimationFrame 比起 setTimeout、setInterval的優(yōu)勢(shì)主要有兩點(diǎn)：

• requestAnimationFrame 會(huì)把每一幀中的所有DOM操作集中起來(lái)，在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率，一般來(lái)說(shuō)，這個(gè)頻率為每秒60幀。
• 在隱藏或不可見的元素中，requestAnimationFrame 將不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的cpu，gpu和內(nèi)存使用量。

以上就是JS使用window.requestAnimationFrame()對(duì)列表切片進(jìn)行渲染的詳細(xì)內(nèi)容，更多關(guān)于JS window.requestAnimationFrame()的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論