一次加载1w条数据的最优解是什么？

/*
 * @Author: pym
 * @Date: 2022-04-27 12:07:41
 * @LastEditors: pym
 * @Description: TODO xxx
 * @LastEditTime: 2022-04-27 13:31:34
 */
// import _ from 'lodash';
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

import './index.less';

// 利用babel来写jsx 运行的时候会转换成createElement创建
function Element() {
    const [state, setState] = useState(false)
    useEffect(() => {
        const now = Date.now()
        let ul = document.getElementById('container');
        const total = 10000
        let curNumer = 0
        const key = 4
        const pageCount = 100
        switch (key) {
            case 0:
                // 一下子加载1w条总时间：382ms
                for (let i = 0; i < total; i++) {
                    let li = document.createElement('li');
                    li.innerText = ~~(Math.random() * total)
                    ul.appendChild(li);
                }

                console.log('JS运行时间：', Date.now() - now);
                setTimeout(() => {
                    console.log('总运行时间：', Date.now() - now);
                }, 0)
                break;
            case 1:
                // setTimeout分页（100条）加载1w条总时间：1965ms
                function loop() {
                    if (curNumer < total) {
                        for (let i = 0; i < pageCount; i++) {
                            let li = document.createElement('li');
                            li.innerText = ~~(Math.random() * total)
                            ul.appendChild(li);
                        }
                        curNumer = curNumer + pageCount
                        console.log('运行时间：', Date.now() - now, curNumer);
                        setTimeout(function () {
                            loop()
                        })
                    } else {
                        console.log('总运行时间：', Date.now() - now, curNumer);
                    }
                }
                loop()
                break;
            case 2:
                // requestAnimationFrame分页（100条）加载1w条总时间：2156ms
                function loop2() {
                    if (curNumer < total) {
                        for (let i = 0; i < pageCount; i++) {
                            let li = document.createElement('li');
                            li.innerText = ~~(Math.random() * total)
                            ul.appendChild(li);
                        }
                        curNumer = curNumer + pageCount
                        console.log('运行时间：', Date.now() - now, curNumer);
                        window.requestAnimationFrame(() => loop2())
                    } else {
                        console.log('总运行时间：', Date.now() - now, curNumer);
                    }
                }
                loop2()
                break;
            case 4:
                // 一下子使用DocumentFragment加载1w条总时间：382ms
                const documentFrag = new DocumentFragment()
                for (let i = 0; i < total; i++) {
                    let li = document.createElement('li');
                    li.innerText = ~~(Math.random() * total)
                    documentFrag.appendChild(li);
                }
                ul.appendChild(documentFrag)

                console.log('JS运行时间：', Date.now() - now);
                setTimeout(() => {
                    console.log('总运行时间：', Date.now() - now);
                }, 0)
                break;
            default:
                break;
        }
        // 将数据插入容器中



        return function clean() {
            console.log('clean')
        }

    }, [])
    return <div className="container">
        bigList
        <div id='container'></div>
    </div>

}
// 渲染dom元素 指定容器
ReactDOM.render(<Element />, document.getElementById('root'));