JS渲染十萬(wàn)數(shù)據(jù)列表

nemo 發(fā)布于2019-08-23 18:26 / 2519人閱讀

摘要：直入正題假設(shè)有十萬(wàn)條數(shù)據(jù)的列表要展示，該如何優(yōu)化如果直接上，不管你是一條一條插入，還是先存入再一次性插入，白屏?xí)r間都在，瀏覽器應(yīng)該是合并了更新操作，如果不做優(yōu)化，并不會(huì)分批渲染。

直入正題：假設(shè)有十萬(wàn)條數(shù)據(jù)的列表要展示，該如何優(yōu)化？
如果直接上，不管你是一條一條插入，還是先存入fragment再一次性插入，白屏?xí)r間都在6s+，瀏覽器應(yīng)該是合并了dom更新操作，如果不做優(yōu)化，并不會(huì)分批渲染。
注意：測(cè)試所用的item結(jié)構(gòu)是極其簡(jiǎn)單的，一旦渲染的item是復(fù)雜結(jié)構(gòu)那么渲染的時(shí)間倍增

item.innerHTML =

${text}

測(cè)試;

優(yōu)化一，分批渲染requestAnimationFrame
requestAnimationFrame和setTimeout的區(qū)別就不多復(fù)述了，網(wǎng)上一大把。先渲染一部分，然后執(zhí)行循環(huán)邏輯。但是這個(gè)部分到底是多少，需要自己調(diào)試了，我寫(xiě)的是300，但不一定適用。

    const totalFn = () => {
      window.requestAnimationFrame(() => {
        if (i <= data.length) {
          computedHeight(data.slice(i, i + 300)); // 執(zhí)行插入dom操作
          i += 300;
          totalFn();
        } else {
          root.style.height = max + "px"
        }
      })
    }
    totalFn();

這樣能做到秒開(kāi)，無(wú)長(zhǎng)時(shí)間白屏。

but,如果只是這樣就回答的太簡(jiǎn)單了點(diǎn)，可能面試官還希望更深入的解答，比如我十萬(wàn)條數(shù)據(jù)就算能秒加載，但是渲染復(fù)雜邏輯，說(shuō)不定會(huì)卡卡的，因?yàn)轫?yè)面元素太多了。在不考慮分頁(yè)的情況下，如何進(jìn)一步優(yōu)化。

優(yōu)化二，只渲染可視區(qū)范圍內(nèi)的dom(只提供思路了)

這塊涉及的交互就略復(fù)雜了，首先為了保證和一次性加載出來(lái)的效果一致，比如有滾動(dòng)慣性,需要計(jì)算總高度。
簡(jiǎn)單的玩法，每一個(gè)item是同樣的高度，那么計(jì)算高度就很簡(jiǎn)單了，但是如果每個(gè)item的高度不同，那么要就需要隱藏計(jì)算（把dom插入隱藏域，而且需要采用優(yōu)化一的手段，不然會(huì)卡），但是那樣又會(huì)導(dǎo)致整個(gè)計(jì)算過(guò)程過(guò)于漫長(zhǎng)，需要尋找到最適合的點(diǎn)。
得到高度后，綁定scroll事件，根據(jù)scrollTop的值，動(dòng)態(tài)計(jì)算展示哪一塊內(nèi)容，為了保證位置，還需要在首部填充空白塊占位。
仍然可能存在的問(wèn)題，比如scroll觸發(fā)的時(shí)機(jī)，scroll在ios下是不能做到實(shí)時(shí)觸發(fā)的，比如在慣性滾動(dòng)過(guò)程中，觸發(fā)不了scroll事件，可能會(huì)導(dǎo)致部分白屏（暫時(shí)沒(méi)有想到如何解決），如果用iscroll.js,不知道能不能
模擬到原生的效果。