【性能优化】在大批量数据下使用 HTML+CSS实现走马灯，防止页面卡顿

切换效果

页面结构变化

1.需求背景

项目首页存有一个小的轮播模块,保密原因大概只能这么展示,左侧图片右侧文字,后端一次性返回几百条数据(开发环境下,生产环境只会更多).无法使用分页解决,前端需要懒加载防止页面卡顿

写个小demo演示,如下

2.解决思路

获取到数据后,取第一条数据展示.切换时,这里以查看下一张为例演示.切换下一张时,动态创建一个dom元素,通过字符串的方式设置innerHtml,将下一张的dom元素插入父节点.

同时父元素的第一个子元素(初始展示第一条数据的dom元素)和新创建的展示下一条数据的dom元素同时向左偏移自身宽度,然后把切走的dom元素清除,实现切换效果,同时避免页面大量结构堆积

3.代码如下

仅做了’下一张’功能,其他请自行补充

<template><div class="container"><button @click="golast">上一张</button><button @click="gonext">下一张</button><div class="windows"><div class="scrollBox"><div class="scrollItem"><div class="img"><el-image :src="initialData.imgUrl"></el-image></div><div class="messBox">{{ initialData.mess }}</div></div></div></div></div>
</template>
<script>
export default {data () {return {localData: [{ imgUrl: '../assets/xxx.png', mess: '11111' },{ imgUrl: '../assets/xxx.png', mess: '22222' },{ imgUrl: '../assets/xxx.png', mess: '33333' },{ imgUrl: '../assets/xxx.png', mess: '44444' },{ imgUrl: '../assets/xxx.png', mess: '55555' },{ imgUrl: '../assets/xxx.png', mess: '66666' },],initialData: '', // 初始展示数据nowIndex: 0// 当前展示数据的索引}},created () {},mounted () {this.initData()},computed: {},methods: {initData () {// 初始副职this.initialData = this.localData[this.nowIndex]},// 点击查看上一张golast () {},// 点击查看下一张gonext () {if (this.localData.length <= this.nowIndex + 1) returnthis.readyBox('next')const fatherDom = document.querySelector('.windows')const moveDistanceX = fatherDom.offsetWidthconst domArr = fatherDom.querySelectorAll('.scrollBox')// 这里判断.初始结构和动态创建的元素的初始位置不同,导致偏移时的数值是不同的if (!domArr[0].classList.contains('newScrollBox')) {domArr[0].style.transform = `translate(-${moveDistanceX}px,0px)`} else {domArr[0].style.transform = `translate(-${moveDistanceX * 2}px,0px)`}domArr[1].style.transform = `translateX(-${moveDistanceX}px)`this.nowIndex++// 移除上一个dom元素const timeId1 = setTimeout(() => {fatherDom.removeChild(domArr[0])clearTimeout(timeId1)}, 501)},// 为下一次切换准备dom元素readyBox (type) {// 信息展示列表无数据或只有一条数据时,不执行if (this.localData.length <= 1) returnlet nextShowData = ''// 上一张或下一张要展示的数据const fatherDom = document.querySelector('.windows')// 获取父元素const newDom = document.createElement('div')// 创建新元素// 设置新元素的样式newDom.className = 'scrollBox'newDom.classList.add('newScrollBox')newDom.style.width = '100%'newDom.style.height = '100%'newDom.style.position = 'absolute'newDom.style.transition = 'all 0.5s'// 上一张if (type === 'last') {// 判断当前展示列表是否合法if (this.nowIndex - 1 < 0) returnnextShowData = this.localData[this.nowIndex - 1]//此处省略........,自行补充}//   下一张if (type === 'next') {// 判断当前展示列表是否合法if (this.localData.length <= this.nowIndex + 1) returnnextShowData = this.localData[this.nowIndex + 1]// 下一张的数据newDom.style.left = '100%'}// 新元素的内部结构const innerHtml = `<div class="scrollItem" style=" display: flex;  width: 100%; height: 100%; background-color: pink;"><div class="img" style="width:50%; height:100%" ><el-image src="${nextShowData.imgUrl}"></el-image></div><div class="messBox" style=" font-size: 16px; width:50%; height:100%; background-color: skyblue; ">${nextShowData.mess}</div></div>`// 插入子元素newDom.innerHTML = innerHtmlfatherDom.appendChild(newDom)}}
}
</script>
<style lang='scss' scoped>
.container {width: 100%;height: 100%;
}.container .windows {position: relative;left: 30%;font-size: 0px;overflow: hidden;width: 40%;height: 40%;border: 1px solid red;
}.scrollBox {position: absolute;width: 100%;height: 100%;transition: all 0.5s;
}.windows .scrollItem {display: flex;width: 100%;height: 100%;background-color: pink;
}.windows .scrollItem .img {width: 50%;height: 100%;
}.windows .messBox {font-size: 16px;width: 50%;height: 100%;background-color: skyblue;
}
</style>