嘉定营销型 网站制作,旅游电子商务网站建设与研究,中国做外贸的网站有哪些内容,做电商设计在哪个网站接单目录 前言一、卡顿的原因#xff1f;二、解决1、滚动懒加载2.官方 总结 前言
提示#xff1a;这里可以添加本文要记录的大概内容#xff1a;
在element-plus中#xff0c;如果数据超过1k#xff0c;就会感觉到明显的卡顿#xff0c;应该是渲染的卡顿吧。反正我在请求回… 目录 前言一、卡顿的原因二、解决1、滚动懒加载2.官方 总结 前言
提示这里可以添加本文要记录的大概内容
在element-plus中如果数据超过1k就会感觉到明显的卡顿应该是渲染的卡顿吧。反正我在请求回来接口之后loading会卡顿。用户体验十分不佳。然后吧这个列表还不能分页得全部展示出来因为设计的不能改上面要求。。。 好吧现在开始优化~
一定要说一句我们项目的分页一般都是前端做的分页感觉体验十分不佳为什么就不好好的后端分页尼因为说不过 提示以下是本篇文章正文内容下面案例可供参考
一、卡顿的原因
请求接口返回之后关闭loading但是界面并没有及时的关闭这个问题应该是有什么阻塞了开始定位发现应该是界面中的一个长列表没有进行懒加载优化导致渲染DOM花费了太长的时间。然后kakaka
二、解决
1、滚动懒加载 代码如下示例 el-tableidlazyLoad:datashowDataL:max-heighttemp_len_l...
/el-table/*** desc table懒加载*/
const lazyLoading () {// 这个地方就是为了得到滚动的那个元素大家随意let dom document.getElementById(lazyLoad);let scrollDOM dom.querySelector(.el-scrollbar__wrap);scrollDOM.addEventListener(scroll, (v) {const scrollDistance scrollDOM.scrollHeight - scrollDOM.scrollTop - scrollDOM.clientHeight;if (scrollDistance 1) {if (pagination.page pagination.totalPage) {//当前页数小于总页数就重新设置table的数据pagination.page; //当前页数自增console.log(页面已经到达底部,可以重新设置table数据,现在是加载第 pagination.page 页数据);showDataL.value dataL.value.slice(0, pagination.page * 20)}}});
};onMounted(() {lazyLoading();
});2.官方
官方有一个虚拟表格目前孩子啊测试阶段大家也可以尝试一下我就不贴出来了 点击进入 总结
提示这里对文章进行总结
长列表性能优化主打一个减少DOM元素的一次性渲染加载
