SOURCE

<h2>如何渲染上万条数据且不卡住页面</h2>
<ul></ul>

<script>
    'use strict';
	// const arr = new Array(100000)    // 10W条数据渲染时间长，但是同样不卡
	const arr = new Array(10000), 
    total = arr.length, 
    perCount = 20;
    const ul = document.querySelector('ul');

    function add() {
        const fragment = document.createDocumentFragment();
        for(let i = 0;i < perCount;i++){
            arr.shift();
            let li = document.createElement('li');
            li.innerHTML = Math.random() * 2000;
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        if (arr.length){
            // 相当于 setTimeout(add, 16);  此方法使用浏览器的刷新率，16ms刷新一次
            window.requestAnimationFrame(add);  
        }
    }
    if(arr.length){
        add();
    }

</script>