jquery html数据太大会卡顿,如何做到10万条数据渲染不卡顿

requestAnimationFrame方法

Document

• 控件

setTimeout(() => {

// 插入十万条数据

const total = 100000;

// 一次20条，可根据性能问题自己调整

const MAX_ONCE = 20;

// 渲染数据需要的次数

const loopCount = total / MAX_ONCE;

let countOfRender = 0;

let el = document.querySelector("ul");

function add() {

// 优化，不允许插入数据引起回流

const fragment = document.createDocumentFragment();

for (let i = 0; i < MAX_ONCE; i++) {

const li = document.createElement("li");

li.innerText = `${i} + ${Math.floor(Math.random() * total)}`;

fragment.appendChild(li);

}

el.appendChild(fragment);

countOfRender += 1;

loop();

}

function loop() {

if (countOfRender < loopCount) {

window.requestAnimationFrame(add);

}

}

loop();

}, 0);

作者：faker