关于后端一次性返回十万条数据,前端怎么处理问题。
/**
* @description 数据懒加载变色
* @param 通过interSectionObserver实现
*/
function handleDivBack(entries) {
entries.forEach(item => (item.isIntersecting ? (item.target.style.background = 'red') : (item.target.style.background = 'black')));
}
let observer = new IntersectionObserver(handleDivBack, {
threshold: 0.4,
});
/**
* @description 十万条数据加载
* @params 直接加载十万条数据,加载很慢
* @params 将十万条数据设置分页,拿到总页数配合定时器加载
* @params 将十万条数据设置分页,拿到总页数配合requestAnimationFrame
* @params 将十万条数据设置分页,拿到总页数配合requestAnimationFrame加文档碎片
*/
// 直接加载十万条数据,加载很慢
document.getElementById('ul_list').innerHTML = new Array(100000).fill('<div class="ul_item"></div>').join('');
//将十万条数据设置分页,拿到总页数配合定时器加载
// function renderList(renderLength, renderSize) {
// let container = document.getElementById('ul_list');
// let page = 0;
// let totalPage = Math.ceil(renderLength / renderSize)
// let render = page => {
// setTimeout(() => {
// if (page >= totalPage) return true;
// for (let i = page * renderSize; i <= page * renderSize + renderSize; i++) {
// let div = document.createElement('div');
// div.className = 'ul_item';
// div.innerHTML = i;
// container.appendChild(div);
// }
// render(page + 1);
// }, 0);
// };
// render(page);
// }
// renderList(100000, 200);
// 将十万条数据设置分页,拿到总页数配合requestAnimationFrame
// function renderList(renderLength, renderSize) {
// let container = document.getElementById('ul_list');
// let page = 0;
// let totalPage = Math.ceil(renderLength / renderSize)
// let render = page => {
// requestAnimationFrame(() => {
// if (page >= totalPage) return true;
// for (let i = page * renderSize; i <= page * renderSize + renderSize; i++) {
// let div = document.createElement('div');
// div.className = 'ul_item';
// div.innerHTML = i;
// container.appendChild(div);
// }
// render(page + 1);
// });
// };
// render(page);
// }
// renderList(100000, 200);
// 将十万条数据设置分页,拿到总页数配合requestAnimationFrame加文档碎片
function renderList(renderLength, renderSize) {
let container = document.getElementById('ul_list');
let page = 0;
let totalPage = Math.ceil(renderLength / renderSize);
let render = page => {
requestAnimationFrame(() => {
if (page >= totalPage) return true;
let frg = document.createDocumentFragment();
for (let i = page * renderSize; i <= page * renderSize + renderSize; i++) {
let div = document.createElement('div');
observer.observe(div); //监听div的父容器
div.className = 'ul_item';
div.innerHTML = i;
frg.appendChild(div);
}
container.appendChild(frg);
render(page + 1);
});
};
render(page);
}
renderList(400, 200);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库