前端性能如何优化？谈谈vue的性能优化有哪些？

前端开发过程中有许多性能优化的点，这个在面试过程中也经常被问到，今天就在此简单总结一下！

一、加载时的优化

主要是减少http请求
完整的http请求需要经历
DNS查找 —> tcp握手 —> 发起请求 —> 服务器接收请求 —>服务器处理请求并响应请求…
请求较多时将直接体现在消耗性能上面。

那么如何优化？

1. 将多个小文件合并为一个大文件减少http请求
2. 使用服务器端渲染，服务器返回html文件，客户端只需要渲染html文件即可
3. 静态资源使用CDN（内容分发网络），多个不同地理位置的web服务器，再多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
4. css写在顶部，js写在底部，所有放在head里面的css和js都会阻塞渲染。那为什么css放在上面呢，是因为如果html加载完，让用户看到的是没有样式的页面，用户体验不好。js文件也不是不可以放在head里，只要给script标签加上defer属性就可以了
5. 字体图标代替图片图标。字体图片是矢量的不会失真，生成的文件也特别小。
6. 利用缓存不重复加载相同的资源
7. 图片优化

1. 图片延迟加载，在页面中不给图片设置路径，只有图片真正出现在可视区域内，在加载真正的图片，图片懒加载
2. 降低图片质量，再用ps切图时，我们可以将图片切成jpg格式
3. 使用雪碧图

8. 使用webpack按需加载代码，懒加载，按需加载。这个主要是在一些逻辑断点处分离开，然后在一些代码块中完成某些操作之后立即引用新的代码块，可以减少代码的体积，加快加载速度。

二、运行时的优化

1. 减少重绘重排，js修改样式时不要直接修改样式，而是替换成class类来改变样式，如果是需要对dom元素进行操作，最好是让dom元素脱离文档流，修改完之后在带回文档流，推荐使用隐藏元素或者文档碎片
2. 使用事件委托（充分利用了事件冒泡），只要指定一个事件处理程序，就可以管理某一类的事件，可以节省内存
3. switch 与 if else，如果判断条件很多时，推荐使用switch。但是switch只适用于case为常量的情况，if-else更加灵活
4. 不要覆盖原生方法，原生方法都是用低级语言写的，可以被编译成机器码，成为浏览器的一部分
5. 降低css选择器的复杂性
6. 使用弹性布局，性能比较好，但是存在兼容问题
7. 用transform和opacity进行动画修改，这两个属性不会触发重绘重排

在写vue项目时可以注意的性能优化

1. 数据层级不要过深，合理的设置响应式数据
2. 使用数据时，缓存值的结果，不频繁取值
3. 合理设置key
4. v-show(频繁切换性能高)和v-if(开销较大)的合理使用

我们知道v-show是通过display 控制dom的展示隐藏，他并不会删除dom 而我们在切换v-show的时候其实是减少了diff的对比，而KeepAlive 则是直接复用dom，连diff 的过程都没了，并且他们俩的合理使用还不会影响到初始化渲染。如此一来减少了js 的执行开销，但是值得注意的是，他并不能优化你初始化的性能，而是操作中的性能

5. 采用函数式组件->函数式组件开销低

在vue中我们知道组件的初始化是比较损耗性能的，大家可以去试一下，使用vue 直接渲染一个文字内容，和直接渲染一个app.vue 组件他的分数是略有不同的。但是当有了函数式组件，这个问题就迎刃而解了.因为函数是组件顾名思义他就是个函数，说白了就是个render函数，他少了组件初始化的过程，省去了很多初始化过程的开销

6. 采用异步组件->借助webpack的分包策略
7. 使用keep-alive来缓存组件
8. 使用虚拟滚动

啥是虚拟滚动呢?
在一含有长列表页面中,你有没有发现你是往下越滑越卡，此时虚拟滚动就排上用场了， 他的基本原理就是只渲染可视区域内的几条数据，但是模拟出正常滑动的效果，因为每次只渲染可是剧域内的数据,在滑动的时候他的性能就会有飞速提升
在vue中比较好用的插件有两个vue-virtual-scroller和vue-virtual-scroll-list