后端一次性传了10w条数据,前端该如何处理-面试高频
后端一次性传了10w条数据，前端该如何处理？—— 面试高频
- index.js 代码如下
const getList = () => {
return new Promise((resolve, reject) => {
// 创建请求
let ajax = new XMLHttpRequest();
// 这里请求的是本地服务器
ajax.open(‘get’, ‘http://127.0.0.1:8000’);
ajax.send();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
resolve(JSON.parse(ajax.responseText))
}
}
})
}
const container = document.getElementById(“container”)
- 常规处理方案
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
list.forEach( item => {
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML =
<img src="${item.src}" /><span>${item.text}</span>
container.appendChild(div)
});
console.timeEnd(‘列表时间’)
}
renderList()
- 这种方案就是简单粗暴的循环渲染
- 此方案耗时大概是 13s
- 这种做法当然是不可取的，等到天都黑了，用户可能会骂娘
- 优化的第一种方式 —— 前端分页
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
const total = list.length;
const page = 0;
const limit = 200;
// 总页数
const totalPage = Math.ceil(total / limit); // Math.ceil 1.1 => 2
const render = (page) => {
if(page >= totalPage) return
setTimeout(() => {
for(let i = page * limit; i < page * limit + limit; i++){
const item = list[i];
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML =
<img src="${item.src}" /><span>${item.text}</span>
container.appendChild(div)
}
render(page + 1)
}, 0)
}
render(page);
console.timeEnd(‘列表时间’)
}
renderList()
- 思路是把十万条数据分成 10w / 200页，再加上setTimeout，每次渲染一页， 速度得到了大幅度提升 。
- 方案耗时： 不到 1s 搞定
- 再次优化
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
const total = list.length;
const page = 0;
const limit = 200;
// 总页数
const totalPage = Math.ceil(total / limit); // Math.ceil 1.1 => 2
const render = (page) => {
if(page >= totalPage) return
requestAnimationFrame(() => {
for(let i = page * limit; i < page * limit + limit; i++){
const item = list[i];
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML =
<img src="${item.src}" /><span>${item.text}</span>
container.appendChild(div)
}
render(page + 1)
})
}
render(page);
console.timeEnd(‘列表时间’)
}
renderList()
- 使用 requestAnimationFrame 代替 setTimeout， 减少了重排的次数，极大提高了性能
- 极致优化（最佳方案）
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
const total = list.length;
const page = 0;
const limit = 200;
// 总页数
const totalPage = Math.ceil(total / limit); // Math.ceil 1.1 => 2
const render = (page) => {
if(page >= totalPage) return
requestAnimationFrame(() => {
const fragment = document.createDocumentFragment()
// 文档碎片 => dom节点 不是在dom树上一部分
// N次追加 => 1次
for(let i = page * limit; i < page * limit + limit; i++){
const item = list[i];
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML =
<img src="${item.src}" /><span>${item.text}</span>
fragment.appendChild(div)
// container.appendChild(div)
}
container.appendChild(fragment)
render(page + 1)
})
}
render(page);
console.timeEnd(‘列表时间’)
}
renderList()
- 这里的优化点主要是：之前是创建一个div就追加一次：
div.innerHTML =
<img src="${item.src}" /><span>${item.text}</span>
container.appendChild(div)
- 现在改成一次性追加，极大的提高了性能。
container.appendChild(fragment)
- 知识点补充
- window.requestAnimationFrame()
- 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
- 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；
- 若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()
- DocumentFragments —— 文档碎片
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
链图片转存中…(img-RTK7FFmt-1715140744611)]
[外链图片转存中…(img-gRugVuVl-1715140744612)]
[外链图片转存中…(img-YUeh4tIB-1715140744612)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！