- 新聞類app抖剿，或者現(xiàn)在流行的視頻app，用戶需要無感知上下拉取無限資源
- 100萬條數(shù)據(jù)怎么加載到頁面上狂巢，考慮加載撑毛，性能等
// 插入十萬條數(shù)據(jù)
const total = 100000
// 一次插入 * 條，如果覺得性能不好就減少
const once = 200
// 渲染數(shù)據(jù)總共需要幾次
const loopCount = total / once
let countOfRender = 0
const looptimer = setTimeout(() => {
let ul = document.getElementById("ntp-contents");
function add() {
// 優(yōu)化性能唧领，插入不會造成回流
const fragment = document.createElement('li');
for (let i = 0; i < once; i++) {
const li = document.createElement("li");
// li.innerText = Math.floor(Math.random() * total);
li.innerText = `這里是第 ${countOfRender} 次的 li ${i}`;
fragment.appendChild(li);
}
ul.appendChild(fragment);
countOfRender += 1;
loop();
}
function loop() {
if (countOfRender < loopCount) {
window.requestAnimationFrame(add);
}else{
clearInterval(looptimer)
}
}
loop();
}, 0);
常見的大量數(shù)據(jù)加載策略藻雌，分段加載，但是整個頁面元素還是太多斩个，滑動會引起卡頓
