JS渲染十萬數據列表

直入正題：假設有十萬條數據的列表要展現，該如何優化？
若是直接上，無論你是一條一條插入，仍是先存入fragment再一次性插入，白屏時間都在6s+，瀏覽器應該是合併了dom更新操做，若是不作優化，並不會分批渲染。
注意：測試所用的item結構是極其簡單的，一旦渲染的item是複雜結構那麼渲染的時間倍增

item.innerHTML = <p><i>${text}</i></p><strong>測試</strong>;

1. 優化一，分批渲染requestAnimationFrame
   requestAnimationFrame和setTimeout的區別就很少複述了，網上一大把。先渲染一部分，而後執行循環邏輯。可是這個部分究竟是多少，須要本身調試了，我寫的是300，但不必定適用。

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

這樣能作到秒開，無長時間白屏。

but,若是隻是這樣就回答的太簡單了點，可能面試官還但願更深刻的解答，好比我十萬條數據就算能秒加載，可是渲染複雜邏輯，說不定會卡卡的，由於頁面元素太多了。在不考慮分頁的狀況下，如何進一步優化。

1. 優化二，只渲染可視區範圍內的dom(只提供思路了)

這塊涉及的交互就略複雜了，首先爲了保證和一次性加載出來的效果一致，好比有滾動慣性,須要計算總高度。
簡單的玩法，每個item是一樣的高度，那麼計算高度就很簡單了，可是若是每一個item的高度不一樣，那麼要就須要隱藏計算（把dom插入隱藏域，並且須要採用優化一的手段，否則會卡），可是那樣又會致使整個計算過程過於漫長，須要尋找到最適合的點。
獲得高度後，綁定scroll事件，根據scrollTop的值，動態計算展現哪一塊內容，爲了保證位置，還須要在首部填充空白塊佔位。
仍然可能存在的問題，好比scroll觸發的時機，scroll在ios下是不能作到實時觸發的，好比在慣性滾動過程當中，觸發不了scroll事件，可能會致使部分白屏（暫時沒有想到如何解決），若是用iscroll.js,不知道能不能
模擬到原生的效果。