element-ui使用el-cascader级联选择器，IE内存泄漏【已解决】

Question

最近新的项目，IE运行起来巨卡，特别是前同事负责的那个模块（现在已离职，交给了我），
现在刚好有个机会能够将这个模块重构，看看能不能解决IE巨卡的问题，结果写了一半，发现打开重写的页面，IE内存飙升。
仔细排查了一下，发现element-ui中的el-cascader级联选择器在IE中渲染起来十分占内存。
这是一个用来选择省市区级联选择器，供给渲染的数组抹平后又3000多项。
另外用到省市区的级联，这个页面有3个……
下面我做的一个demo：
刚开始

切到包含3个省市区级联的页面：

切到其他页面再切回

这样来回几下，妥妥爆内存。

我想把这个省市区级联拆成3个来做，不知道效果会不会好些，
请问各位大神有没有解决的思路？

采用@code莱斯 大佬的方法，效果十分的好，来回切换页面，内存占用没有明显的上升。
不过element-ui 2.11.0版本，貌似有小bug：

像这样，重复步骤：
1.选择北京->展现北京的菜单
2.勾选澳门行政区，级联自动关闭（澳门没有二级）
3.再次点击控件，展示了北京的二级菜单，并且选中澳门行政区

Answer 1

第一：这并非elementui的问题，省市区3000多，你自己插入3000多嵌套dom且绑定相关事件试试，内存高，卡一样存在，还得看环境硬件配置情况。
第二：有一个已知问题，需要一个应用程序添加数百个模块并在之后立即取消注册，这导致堆内存未被清除。 你可以想象下一步会发生什么...... 内存泄漏。https://mp.weixin.qq.com/s/2y...

建议：依然使用 cascader,把省市区三级做成异步加载，亲测，我项目中一个页面3个千条数据的cascader都不卡

Answer 2

数据量比较大的组件渲染是必定会拖死浏览器的，加上 IE 没有 Chrome V8 引擎强大的代码优化，常见的问题主要出现表格或列表分页、下拉选项卡等加载的时候。提供两种方案：
1.偏向服务端的按需远程加载，UI 框架通常会有远程加载数据的选项，分页单独请求，下拉菜单点击时加载有限数量，滚动时请求加载等等，都是在用户进行交互的时候再临时去服务器取。这类方法的问题是，如果后台查询性能不够到位，会严重影响用户体验和渲染效果，并且严重依赖网络，所以最好每次取也是小数据，并且需要后端配合优化数据库检索性能，一般还是很容易实现的，对于大型项目来说也是比较常用的稳妥方案。
2.偏前端处理的数据预加载。在应用或系统进入首页时，通常会初始化一些公用数据字典数据，也就是基本上不会常改变的数据，即使是比较大量的数据也是一次性获取，在还没有使用到的时候就先储存在本地，高级的应用可能会使用本地数据库，由于初始并没有进入到操作页面组件也还没有渲染所以不存在渲染问题。在进入组件渲染的时候，纯靠前端操作筛选数据，按需渲染，这样的方案速度比较有优势，不会有用户体验的损失。