一.什么是数据懒加载，为什么要用数据懒加载
前端项目优化分为懒加载和预加载
1.懒加载顾名思义就是延迟加载，项目中常见的就是图片懒加载比如滚动条触底加载，虚拟列表，包括我们经常用的延时器加载数据，大家面试经常被问到后端返回十万条数据前端怎么渲染？这也是懒加载的内容。
在项目中我们经常会遇到前后端通过websocket通信，数据会返回的很快，如果一下全部渲染出来必然会造成浏览器堵塞，前端页面卡顿，渲染不流畅等问题。这时候我们就用到了数据懒加载。
我们首页图片比较多的时候会用到图片懒加载和滚动条触底加载这两种方式。
2.预加载从字面意思就是提前缓存，到用的时候加载出来，预加载我们常用的方式就是把图片先下载到本地然后加载。
二.数据懒加载
1.滚动条触底加载（http）
getSoroll () { // 获取数据容器的dom const ldTable = this.$refs.ld; // 获取滚动条的dom let ldDiv = ldTable.bodyWrapper let that = this; // 触底函数，关键代码 ldDiv.addEventListener("scroll", function () { // 滚动条距离底部的距离 //ldDiv.scrollHeight 整个容器的高度 //ldDiv.scrollTop滚动条的高度 //ldDiv.clientHeight可视区的高度 const scrollDistantance = ldDiv.scrollHeight - ldDiv.scrollTop - ldDiv.clientHeight; if (scrollDistantance <= 0) { if (that.cullentPage < that.totalPage) { that.cullentPage++ // 调接口返回数据 } } }) }
2. 数据分割加载（websocket）
data () { return { timer:3000, websocketData:[], tableData:[], }; }, mounted () { }, methods: { // 数据分割 getSlice(){ // websocketData就是websocket拿到的数据，tableData表格中要渲染的数据 this.timer = setInterval(()=>{ if(this.websocketData.length>100){ this.tableData.unshift(...this.websocketData.splice (this.websocketData.length-(this.websocketData.length-100),(this.websocketData.length-100))); }else{ this.tableData.unshift(...this.websocketData); } if(this.tableData.length>100){ this.tableData.splice (this.tableData.length-(this.tableData.length-100),(this.tableData.length-100)); console.log(this.websocketData); console.log(this.tableData); } this.websocketData=[]; },this.timer) } },
大家还有啥好的方法可以评论区留言
