vue高级前端面试,vue数据展示
本文主要介绍vue前端优雅展示后端10万条数据的考点分析。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
前端工作，后端构造，前端页面直接渲染setTimeout分页渲染requestAnimationFrame文档片段requestAnimationFrame懒加载虚拟列表
前置工作
如果后端真的返回10万条数据给前端，我们前端怎么优雅的展现出来？(哈哈，假设后端真的可以传输10万条数据到前端)
先把前期工作做好，之后可以测试。
后端搭建
创建一个新的server.js文件，简单的设置一个服务，返回10w条数据到前端，通过nodemon server.js启动服务
没有安装nodemon的同学可以先全局安装。
npm i nodemon -g
//server.js
const http=require(http )
const port=8000
http.createServer(function (req，res) {
//打开Cors
res.writeHead(200，{
//设置允许跨域的域名，或设置*允许所有域名。
访问控制允许起源: * ，
//跨域允许的请求方法，或者set * allow all方法。
access-Control-Allow-Methods : DELETE，PUT，POST，GET，OPTIONS ，
//允许的标头类型
“访问控制允许标题”:“内容类型”
})
let list=[]
设num=0
//生成100，000条数据的列表
for(设I=0；我100000；i ) {
数字
list.push({
src: 3359 P3-passport . byteacctimg . com/img/user-avatar/d 71 c 38d 1682 c 543 b 33 f 8d 716 B3 b 734 ca ~ 300 x300 . image ，
文字：“我是林三鑫，客人号${num} ”,
tid:编号
})
}
RES . end(JSON . stringify(list))；
}).listen(端口，函数(){
console.log(服务器正在监听端口 port)；
})
前端页面
先建设一个新index.html。
//index.html
//样式
风格
* {
填充：0；
边距：0；
}
#容器{
身高：100vh
溢出：自动；
}。阳光
显示器：flex
填充：10px
}
img {
宽度：150px
高度：150px
}
/风格
//html部分
身体
div id=容器
/div
脚本src=。/index . js /脚本
/body
然后创建一个新的index.js文件并封装一个AJAX函数来请求这10w条数据。
//index.js
//请求函数
const getList=()={
返回新承诺((解决，拒绝)={
//步骤1:创建一个异步对象
var Ajax=new XMLHttpRequest()；
//第二步：设置请求的url参数。第一个参数是请求的类型，第二个参数是请求的url，它可以带参数。
ajax.open(get ， http://127 . 0 . 0 . 1:8000 )；
//步骤3:发送请求
Ajax . send()；
//第四步：状态改变时会调用注册事件onreadystatechange。
Ajax . onreadystatechange=function(){
if(Ajax . ready state==4 Ajax . status==200){
//第五步如果能到这个判断，说明数据返回完美，请求的页面存在。
resolve(JSON . parse(Ajax . responsetext))
}
}
})
}
//获取容器对象
const container=document . getelementbyid(容器)
直接渲染
最直接的方法就是直接渲染，但这肯定是不可取的，因为一次性渲染10w个节点是非常耗时的。我们来看看耗时，大概需要12秒，非常耗时。
const renderList=async ()={
Console.time(列表时间)
const list=await getList()
list.forEach(item={
const div=document . createelement( div )
阳光
div . innerhtml=` img src= $ { item . src } /span $ { item . text }/span `的
container.appendChild(div)
})
Console.timeEnd(列表时间)
}
呈现列表()
setTimeout分页渲染
这个方法就是，把10w按照每页数量限制分成总共Math.ceil(总计/限额)页，然后利用setTimeout，每次渲染一页数据，这样的话，渲染出首页数据的时间大大缩减了
const renderList=async ()={
console.time(列表时间)
const list=await getList()
console.log(列表)
常量合计=列表.长度
const page=0
常量限制=200
const totalPage=Math.ceil(总计/限制)
const render=(page)={
if (page=totalPage)返回
setTimeout(()={
对于(设i=页面*限制I页*极限极限；i ) {
const item=list[i]
const div=文档。createelement( div )
阳光
div。innerhtml= img src= $ { item。src } /span $ { item。text }/span 的
container.appendChild(div)
}
渲染（第一页)
}, 0)
}
呈现（第页)
console.timeEnd(列表时间)
}
requestAnimationFrame
使用requestAnimationFrame代替setTimeout，减少了重排的次数，极大提高了性能，建议大家在渲染方面多使用requestAnimationFrame
const renderList=async ()={
console.time(列表时间)
const list=await getList()
console.log(列表)
常量合计=列表.长度
const page=0
常量限制=200
const totalPage=Math.ceil(总计/限制)
const render=(page)={
if (page=totalPage)返回
//使用requestAnimationFrame代替定时器
requestAnimationFrame(()={
对于(设i=页面*限制I页*极限极限；i ) {
const item=list[i]
const div=文档。createelement( div )
阳光
div。innerhtml= img src= $ { item。src } /span $ { item。text }/span 的
container.appendChild(div)
}
渲染（第一页)
})
}
呈现（第页)
console.timeEnd(列表时间)
}
文档碎片 + requestAnimationFrame
文档碎片的好处
1、之前都是每次创建一个差异标签就appendChild一次，但是有了文档碎片可以先把一页的差异标签先放进文档碎片中，然后一次性appendChild到容器中，这样减少了appendChild的次数，极大提高了性能
2、页面只会渲染文档碎片包裹着的元素，而不会渲染文档碎片
const renderList=async ()={
console.time(列表时间)
const list=await getList()
console.log(列表)
常量合计=列表.长度
const page=0
常量限制=200
const totalPage=Math.ceil(总计/限制)
const render=(page)={
if (page=totalPage)返回
requestAnimationFrame(()={
//创建一个文档碎片
const fragment=文档。createdocumentfragment()
对于(设i=页面*限制I页*极限极限；i ) {
const item=list[i]
const div=文档。createelement( div )
阳光
div。innerhtml= img src= $ { item。src } /span $ { item。text }/span 的
//先塞进文档碎片
fragment.appendChild(div)
}
//一次性appendChild
container.appendChild(片段)
渲染（第一页)
})
}
呈现（第页)
console.timeEnd(列表时间)
}
懒加载
为了比较通俗的讲解，咱们启动一个某视频剪辑软件前端项目，后端服务还是开着
其实实现原理很简单，咱们通过一张图来展示，就是在列表尾部放一个空节点空白，然后先渲染第一页数据，向上滚动，等到空白的出现在视图中，就说明到底了，这时候再加载第二页，往后以此类推。
至于怎么判断空白的出现在视图上，可以使用方法方法获取顶端属性
交叉观测器性能更好，但是我这里就拿方法来举例
脚本安装语言=ts
从“vue”导入{ onMounted，ref，computed }
const getList=()={
//跟上面一样的代码
}
const container=refHTMLElement()//容器节点
const blank=refHTMLElement()//blank节点
const list=refany([]) //列表
const page=ref(1) //当前页数
常量限制=200 //一页展示
//最大页数
const maxPage=computed(()=math。ceil(列表。价值。长度/限制))
//真实展示的列表
const showList=computed(()=list。价值。slice(0，page.value * limit))
const handleScroll=()={
//当前页数与最大页数的比较
if (page.value maxPage.value)返回
const客户端高度=容器。价值？客户端高度
const blankTop=blank.value？getBoundingClientRect().顶端
if (clientHeight===blankTop) {
//空白出现在视图，则当前页数加一
page.value
}
}
onMounted(async ()={
const res=await getList()
列表。值=资源
})
/脚本
模板
div id=容器@scroll=handleScroll ref=容器
div class= sunshine v-for=(item)in show list :key= item。tid
img :src=item.src /
span{{ item.text }}/span
/div
div ref=blank/div
/div
/模板
虚拟列表
虚拟列表需要讲解的比较多，在这里我分享一下我的一篇虚拟列表的文章
结合"康熙选秀",给大家讲讲"虚拟列表"
以上就是某视频剪辑软件前端优雅展示后端十万条数据考点剖析的详细内容，更多关于前端展示后端数据的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。