记录一次前端优化

优化记录

最近在搞一个项目的前端优化，断断续续持续了两个多月，现在基本告一段落，趁现在记得还比较清楚，写下总结，方便以后查看。

先介绍一下背景，我们的系统用的框架是elementui，然后所有的页面都要缓存（是的所有的页面都要缓存，spa）；每个页面的分页默认是100条，最大2000条；新增和编辑页面都是在列表中进行中（脑补excle编辑数据），这个编辑和新增基本都是几百条上千条数据，其中有些页面是支持模板导入的，有些测试会直接一次全部导入，基本都是一万条的样子。另外有些客户还在使用xp系统，所以还要考虑低版本的性能问题。优化之前打开几个页面，浏览器内存就暴涨到1G以上，低版本的浏览器会直接崩溃，连续打开几个页面，切换路由后内存就一直增加，直到崩溃。目前优化后浏览器基本比较稳定，即使低版本浏览器打开十几个页面也不会崩溃。

下面就是优化的主要内容。

由于系统已经上线，所以不能更改用户的使用习惯，只能从用户看不到的地方去入手。

1、el-select组件优化

我们系统的一些下拉菜单可能会有几百项，用户选择下拉菜单时是一次直接渲染出来，显然是一种资源浪费，我们做了一个懒加载，一次只渲染50条，如果继续向下滚动鼠标才继续加载。但是这样还不够，如果用户根本就不选择下拉菜单，那就没必要渲染，所以我们又在下拉菜单项那里判断面板是否激活，如果激活才渲染面板，如果未激活直接注销（在options上增加v-if），这里有一个坑，如果直接注销options选项，虽然组件里注销了，但是