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,不知道能不能
模拟到原生的效果。