记录一次前端优化

优化记录

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

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

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

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

1、el-select组件优化

我们系统的一些下拉菜单可能会有几百项，用户选择下拉菜单时是一次直接渲染出来，显然是一种资源浪费，我们做了一个懒加载，一次只渲染50条，如果继续向下滚动鼠标才继续加载。但是这样还不够，如果用户根本就不选择下拉菜单，那就没必要渲染，所以我们又在下拉菜单项那里判断面板是否激活，如果激活才渲染面板，如果未激活直接注销（在options上增加v-if），这里有一个坑，如果直接注销options选项，虽然组件里注销了，但是浏览器里没有回收，还需要调用el-select中的doDestroy方法，否则回一直存在浏览器内存中。（这里推荐使用edge浏览器，可以直接查看分离的元素，chrom也能看，麻烦一点）

2、编辑页面弹窗优化

前面说到，我们的编辑和新增数据都是在列表中进行中，每一列都相当于是一个表单，这些表单中有些重复的下拉菜单和弹窗面板会一直存在每一列上，如果添加1000条他们就重复渲染1000次，这1000个下拉菜单和弹窗都存在与这个页面上，所以要把这些提取到公共的区域，让这1000条重复数据变成一个公共组件，反复渲染这一个。

3、路由name和vue文件中的name不一致的问题

我们系统中有大量新增和编辑页面都是同一个vue文件，但是他们在页签中显示的title是不一样的，所以有人就在router定义了两个path，起了两个名字，但是对应同一个vue，这样就照成了路由中的name和vue中的name不一致，而我们的keep-alive :include="router.name" 是使用的路由中的name，所以会一直认为是个新页面，每次打开或者路由切换，都会渲染一次页面，从edge中看分离的元素，都是新增，内存就会一直增加。最后还是改成了一直的，内存就稳定了，页面切换基本不会是一直升的样子。

4、字典取值优化

从官网上看，vuex是一个比较重的框架，store也是一个比较珍贵的资源，使用的时候还是要谨慎，我们用的时候有点随然，登录成功后就开始加载各种字典和下拉菜单，其中一个接口有48m的数据量，还有一个接口2000多个字典项，每次去都是去遍历这个2000的数组。因为这里使用的地方太多了，没有做太大的修改，只是去掉来了多余的数据项，把数组改成了kv形式的数据结果。这样是缩短了系统的登录成功后的等待时间，优化了取字典项的逻辑。

5、object.freez优化

如果一个表格中的数据只是显示，有这个可以大福提示页面性能，尤其是页面切换时，更顺滑。官网有介绍，自己找把。

6、低版本动画延迟

本来设置的路由切换的动画，但是在低版本浏览器上，延迟非常厉害，也很消化性能，我们直接去掉了，在路由进入和离开时增加了loading动画。

7、路由切换卡顿

我们新打开一个页面很快，但是切换一个已经打开的就很慢，这中情况就是页面销毁耗时。因为我们使用的是vxe-table这个组件，一开始页面滑动的时候会出现白屏的问题，所以把虚拟滚动的参数设置的比较大，页面渲染的数据多，针对这个情况就把参数调低。路由卡顿的问题就明显改善了。

8、tap-pane增加lazy属性

这个是el的标签，很有用，可以明显提示页面性能。

9、周期性任务和定时任务

这种严重影响性能的操作，最好能禁止，如果非要用，一定要严格控制。定时任务我们最后是添加了删除操作，周期性的时间调大了一点，尽量周期不要那么频繁。

10、借口减少无用的字段

这个前端很难去控制，需要去协调后端。我们是排查了超过1m的接口，后端改了一部分。

11、v-resize="resize" 刷新

这是一个0.1s刷新一下样式的指令，其实没什么用处，还严重影响页面性能，删除了。

12、全局混入，全局组件引入

全局的混入会严重影响性能，应该直接禁止使用。我们是发现了直接删除，改成按需引入。全局组件也应该禁止使用，但是使用的太多了，只能有选择的优化了一部分。

以上就是优化的全部内容，其中还有很多小细节没有说，比如下拉菜单值如果有默认值怎么回显，三方组件使用的优化，数据渲染的优化。但是总体说来，优化主要就是做了两件事，1、去掉多余的东西；2、让不规范的代码规范起来。多余东西就比如接口中返回的无用数据，全局引入的组件，全局混入，下拉菜单使用的时候再渲染这些；而不规范的代码主要是name不一致，定时任务使用了之后不删除，未劫持数据，懒加载等等。

好了今天就到这吧。