vue优化篇-1.前端性能优化及注意点

一.页面级优化

1.减少HTTP请求数
2.使用静态资源CDN加速
3.使用字体图标 iconfont 代替图片图标
4.使用 fontmin-webpack 插件对字体文件进行压缩。
5.使用雪碧(精灵)图,多张图片合为一张图片
6.提取公共样式,减少css样式获取
7.图片懒加载 v-lazy-conmpent
8.压缩文件用gzip, 前端webpack开启gzip,服务端也开启gzip
9.尽可能利用 CSS3 效果代替图片,代码大小比图片小,并且显示效果好
10.为避免卡顿,初次请求页面应延迟启动请求较慢的请求,对页面进行切分
11.使用 transform 和 opacity 属性更改来实现动画,不会触发页面重排与重绘

二.代码级别:

1.当判断大于三个时,使用Switch,可减少不必要的多次判断
但当条件语句特别多的时候,则if/else和switch都不是很好,应选用 查找表 ,将方法放入数组

2.组件按需引入,禁止全局引入

3.使用eslint,定义统一的开发规范

4.定时器销毁

5.防抖和节流
https://blog.csdn.net/r657225738/article/details/115373278

三.Vue相关

1.v-show，v-if 用哪个？
（1）只要涉及到权限相关的展示无疑要用 v-if
（2）在没有权限限制时根据用户点击的频次选择，频繁切换的使用 v-show,不频繁切换的使用 v-if（减少页面中 dom 数量）

2.合理利用vue生命周期
减少在created生命周期中做ajax请求,而是放在mounted生命周期中,以不阻塞页面生成dom

3.不要在模板里面写过多的表达式与判断
　　v-if=“isShow && isAdmin && (a || b)”，这种表达式虽说可以识别，但是不是长久之计，当看着不舒服时，适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。

四.网页相关:

1.通过谷歌浏览器的performance面板查看网页耗能

五.其它:

1.fastDom, 优化图片渲染,拆分dom https://zhuanlan.zhihu.com/p/359326214