如题,多个cascader级联组件,下拉选项含大量数据,滚动时会有实时样式重新渲染,导致CUP内存溢满而卡顿
小优化技巧:可加loading一次性加载完多个cascader级联组件后再允许页面滚动。
方法一:使用elementui中的内部源码的方法处理(推荐)
<script>// visible-change事件const cascaderVisibleChange = (val) => {const popperJsEle = refs.cascaderRef[0].popperJSif (val) {// 打开下拉时监听popper样式popperJsEle._setupEventListeners()} else {popperJsEle._removeEventListeners()}nextTick(() => {// 防止下拉框中滚动卡顿,去掉属性aria-ownsconst $el = document.querySelectorAll('.el-cascader-node[aria-owns]')Array.from($el).map(item => item.removeAttribute('aria-owns'))})}onMounted(() => {nextTick(() => {// 防止取不到poppperJS对象setTimeout(() => {// 调用内部方法,清除页面滚动实时监听给popper添加样式,导致内存溢满refs.cascaderRef[0].popperJS._removeEventListeners()}, 1000)})})</script>
方法二:强制写入display: none;样式(次推荐)
<style lang="scss">.none-imp {display: none!important;}
</style>// 当级联组件数据量大,滚动实时监听样式导致渲染消耗CPU内存溢出,可将其和子元素样式强制隐藏
const cascaderScrollStyle = (type) => {const popperEle = refs.cascaderRef[0].$refs.popperif (type === 'add') {// 父元素popperEle.classList.add('none-imp')// 第一个子元素popperEle.firstChild.classList.add('none-imp')} else if (type === 'remove') {popperEle.classList.remove('none-imp')popperEle.firstChild.classList.remove('none-imp')}
}// 防止el-cascader数据量过大,选择时卡顿,去掉属性aria-owns
const cascaderVisibleChange = (val) => {if (val) {cascaderScrollStyle('remove')} else {cascaderScrollStyle('add')}nextTick(() => {// 下拉项滚动删除属性aria-ownsconst $el = document.querySelectorAll('.el-cascader-node[aria-owns]')Array.from($el).map(item => item.removeAttribute('aria-owns'))})
}onMounted(() => {nextTick(() => {cascaderScrollStyle('add')})
})