requestAnimationFrame

About me

1. requestAnimationFrame(cb) 告诉浏览器在下次渲染前执行一次cb
2. 多个requestAnimationFrame是通同步运行的不会出现前面等待后面的情况
3. 时间间隔是固定的

如何渲染几万条数据并不卡住界面

var total = 100000;
var size = 100;
var count = total / size;
var done = 0;
var ul = document.getElementById('list');
 
function addItems() {
    var li = null;
    var fg = document.createDocumentFragment();
    for (var i = 0; i < size; i++) {
        li = document.createElement('li');
        li.innerText = 'item ' + (done * size + i);
        fg.appendChild(li);
    }
    ul.appendChild(fg);
    done++;
    if (done < count) {
        requestAnimationFrame(addItems);
    }
};
 
requestAnimationFrame(addItems);