在地址栏输入一个链接到页面打开，页面打开缓慢、卡顿、空白等问题都会影响用户的留存率，那么，前端性能优化就是一个绕不开的话题，其目的就是让前端资源更少、加载更快。
一、减小前端资源体积
1、gzip压缩
一般是指当访问WEB服务器时会将网页内容压缩后传输到来访的电脑浏览器中，对纯文本内容一般可压缩到原大小的40%，进而让传输速度变快。
2、图片压缩
前端资源图片多则几M，在不降低客户浏览体验的前提下，可以进行图片的压缩，降低其体积。
3、html、css和javascript资源压缩
采用合适的插件进行html、css和javascript的资源压缩，降低其体积。
4、规范编写
在实际开发项目中随着不断的项目维护和功能迭代会产生一些冗余代码或者注释代码，保持代码洁癖，也可以减少代码量。
二、加快访问速度
1、cdn使用
通过使用cdn广泛采用各种缓存服务器，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，响应速度更快。
2、合理使用缓存
合理使用强制缓存或者协商缓存，在非首次访问资源时如果资源在过期时间内未进行修改则直接访问，进而加快访问速度。
3、合理浏览器存储技术
浏览器提供的本地缓存技术有sessionStorage、localStorage和cookie，有些信息可以获取后存放到本地，如果本地能找到数据，则不进行网络接口请求，进而减少http的请求。
4、保持TCP链接
通常情况下，一次请求结束后TCP会关闭。TCP的建立也需要耗费时间，可以通过Connection:Keep-Alive保持TCP的连接，减少TCP建立的时间，进而提升加载速度。
三、javaScript语言特性
1、减少js动画
js操纵的动画一般都会涉及到元素位置的移动和尺寸的改变，进而引起页面的重排，让页面重新渲染，消耗比较大。可以采用css3推出的好用的动画属性进行效果的替代，减少因为页面重排引起的时间消耗。
2、减少js阻塞
对于一些可以异步加载的资源，可以为其增加async或defer属性等待其他资源的加载，也可以将js的加载放至</body>之前，等待页面渲染完成再进行加载。
3、防抖节流
按钮频繁点击通过ajax获取数据、页面下拉监听用户行为等业务场景可以通过防抖或节流的方式来减少ajax的请求或者页面的行为。
4、合理使用闭包
闭包使用不合理，会造成持有的变量无法释放，进而造成内存的浪费。
5、使用事件委托
使用事件委托减少事件绑定的数量。
四、合理使用框架(vue)
1、v-if和v-show
- 频繁切换时使用
v-show，利用其缓存特性 - 首屏渲染时使用
v-if，如果为false则不进行渲染
2、v-for的key
- 列表变化时，循环时使用唯一不变的
key，借助其本地复用策略 - 列表只进行一次渲染时，
key可以采用循环的index
3、侦听器和计算属性
- 侦听器
watch用于数据变化时引起其他行为 - 多使用
compouter计算属性顾名思义就是新计算而来的属性，如果依赖的数据未发生变化，不会触发重新计算
4、合理使用生命周期
- 在
destroyed阶段进行绑定事件或者定时器的销毁 - 使用动态组件的时候通过
keep-alive包裹进行缓存处理，相关的操作可以在actived阶段激活
5、数据响应式处理
- 不需要响应式处理的数据可以通过
Object.freeze处理，或者直接通过this.xxx = xxx的方式进行定义 - 需要响应式处理的属性可以通过
this.$set的方式处理，而不是JSON.parse(JSON.stringify(XXX))的方式
6、路由加载方式
- 页面组件可以采用异步加载的方式
7、插件引入
- 第三方插件可以采用按需加载的方式，比如
element-ui。
8、减少代码量
- 采用
mixin的方式抽离公共方法 - 抽离公共组件
- 定义公共方法至公共
js中 - 抽离公共
css
9、编译方式
- 如果线上需要
template的编译，可以采用完成版vue.esm.js - 如果线上无需
template的编译，可采用运行时版本vue.runtime.esm.js，相比完整版体积要小大约30%
10、渲染方式
- 服务端渲染，如果是需要
SEO的网站可以采用服务端渲染的方式 - 前端渲染，一些企业内部使用的后端管理系统可以采用前端渲染的方式
11、字体图标的使用
- 有些图片图标尽可能使用字体图标
小结
前端项目优化，需要根据不同的场景采用不同的方式。
