面试被问到如何一次性渲染十万条数据，我该怎么答？

<!---->
    <body>        <ul id="container"></ul>
        <script>            let ul = document.getElementById('container');            const total = 100000        // 总数据条数            let once = 20               // 每次渲染条数            let page = total / once     // 需要渲染的总次数            let index = 0               // 每条记录的索引，防止数据丢失或没有渲染到最后一条
            // 两个参数：剩余需要渲染的数据条数，当前渲染的索引            function loop(curTotal, curIndex) {                  let pageCount = Math.min(once, curTotal)
                setTimeout(() => {                    for (let i = 0; i < pageCount; i++) {                        let li = document.createElement('li');                        li.innerText = curIndex + i + ':' + ~~(Math.random() * total);                         ul.appendChild(li);                    }                    loop(curTotal - pageCount, curIndex + pageCount)                })            }            loop(total, index)
        </script>    </body>

    <body>        <ul id="container"></ul>
        <script>            let ul = document.getElementById('container');            const total = 100000            let once = 20            let page = total / once              let index = 0  
            function loop(curTotal, curIndex) {                  let pageCount = Math.min(once, curTotal)
                requestAnimationFrame(() => {                    // 创建一个文档碎片，是一个虚拟的DOM结构                    let fragment = document.createDocumentFragment();
                    for (let i = 0; i < pageCount; i++) {                        let li = document.createElement('li');                        li.innerText = curIndex + i + ':' + ~~(Math.random() * total);                         fragment.appendChild(li);                    }                    // 固定每20个li只回流一次                    ul.appendChild(fragment);
                    loop(curTotal - pageCount, curIndex + pageCount)                })            }            loop(total, index)        </script>    </body>

<!---->
    <template>      <div class="app">        <virtualList :listData="data" />      </div>    </template>
    <script setup>    import { ref } from 'vue';    import virtualList from './components/virtualList.vue';
    // 数据源    const data = ref([])
    for(let i = 0; i < 1000; i++) {      data.value.push({id: i, value: i})    }
    </script>
    <style lang="css" scoped>    .app{      width: 300px;      height: 400px;      border: 1px solid #000;    }    </style>

<!---->
    <template>        <div ref="listRef" class="infinite-list-container" @scroll="scrollEvent()">            <div class="infinite-list-phantom" :style="{height: listHeight + 'px'}"></div>
            <div class="infinite-list" :style="{transform: getTransform}">                <div                     class="infinite-list-item"                     v-for="item in visibleData"                     :key="item.id"                    :style="{height: itemSize + 'px', lineHeight: itemSize + 'px'}"                >                    {{ item.value }}                </div>            </div>        </div>    </template>

  <script setup>    import { onMounted, reactive, ref, computed } from 'vue';    const props = defineProps({        listData: [],        // 每个item的高度        itemSize: {            type: Number,            default: 50        }    })
    const state = reactive({        screenHeight: 0,   // 可视区域的高度        startOffset: 0,    // 偏移量        start: 0,          // 起始数据下标        end: 0             // 结束数据下标    })
    // 可视区域显示的数据条数    const visibleCount = computed(() => {        return state.screenHeight / props.itemSize    })
    // 可视区域显示的真实数据    const visibleData = computed(() => {         return props.listData.slice(state.start, Math.min(props.listData.length, state.end))    })
    // 当前列表总高度    const listHeight = computed(() => {        return props.listData.length * props.itemSize    })
    // list跟着父容器移动了，现在列表要移回来    const getTransform = computed(() => {        return `translateY(${state.startOffset}px)`    })

    // 获取可视区域的高度    const listRef = ref(null)    onMounted(() => {        state.screenHeight = listRef.value.clientHeight        state.end = state.start + visibleCount.value    })

    const scrollEvent = () => {        let scrollTop = listRef.value.scrollTop        state.start = Math.floor(scrollTop / props.itemSize)        state.end = state.start + visibleCount.value        state.startOffset = scrollTop - (scrollTop % props.itemSize)    }
    </script>
    <style lang="css" scoped>    .infinite-list-container {        height: 100%;        overflow: auto;        position: relative;        -webkit-overflow-scrolling: touch; /* 启用触摸滚动 */    }    .infinite-list-phantom{        position: absolute;        left: 0;        top: 0;        right: 0;        z-index: -1;    /* 置于背景层 **/    }    .infinite-list{        position: absolute;        left: 0;        top: 0;        right: 0;        text-align: center;    }    .infinite-list-item {        border-bottom: 1px, solid, #000;        box-sizing: border-box;    }
    </style>