一、前言

好久没更新了，今年因为工作和搬家等一系列因素，基本上都没怎么进行学习，也没记录等等，最近掘金刚好有活动，就随笔记录一下。

二、起因

最近在开发项目，比较旧的项目的，用的element-ui版本也比较低，如下

"element-resize-detector": "^1.2.4",
"element-ui": "2.13.0",

随后就遇到一个很奇怪的现象。

页面里有使用el-cascader组件，数据量也不多，刚好在测功能，我就多切换了几次，结果就页面卡死了，打开网页的任务管理器一看，好家伙，cpu直接干到90多100，这不卡死都说不过去。

三、排查

1、首先排查写法上的问题

写法无误，能正常加载和切换，排除。

2、排查数据量

数据也就10条左右，没道理这个数据量就卡死的，也排除。

3、组件自身原因

查询资料后，我发现这个问题在低版本的element-ui和谷歌104版本触发率极高，在2022年8月3日已经有人提bug上去了。

触发原因就是：el-cascader加载元素的时候，会生成el-cascader-node这些子元素节点，子元素默认使用了aria-owns属性，多次点击切换后，因为这个属性没有及时释放掉，才导致了cpu飙升。基本原因就是这里了，更深入的就是浏览器的原理了，这部分就不深究了，没那个能力。

四、解决方法

1、在合适的时机，移除掉el-cascader-node即可

visible-change | 下拉框出现/隐藏时触发 

是在组件那里挂载visible-change事件，函数名为visibleChange

@visible-change="visibleChange"

具体函数

   visibleChange() {
      this.$nextTick(() => {
        // 添加这段代码
        const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
        Array.from($el).map((item) => item.removeAttribute('aria-owns'));
      });
    },

2、高版本的element-ui和element-resize-detector已经修复该问题，直接升级就可以。

五、结束

为什么旧版本不直接升级呢，因为旧项目牵扯多，不敢保证升级之后，项目还能适配，如果不能适配，那还得增加额外工作量，所以就采用了第一种解决方法，简单有效

ps: 我是地霊殿__三無，日常小记录，每天一点点，进步一点点。