前端性能优化

性能优化是为了提高网页的加载速度，给用户带来更好的体验和用户满意度，同时还能减少服务器的压力,一下几个因素
1，提高用户体验
2，增加页面访问量
3，提高搜索引擎排名
4，减少服务器压力
5，节约成本
6，提高用户留存率
性能优化方式有哪些
HTML&CSS
减少DOM数量，减轻浏览器渲染计算负担。
使用异步和延迟加载js文件，避免js文件阻塞页面渲染
压缩HTML、CSS代码体积，删除不要的代码，合并CSS文件，减少HTTP请求次数和请求大小。
减少CSS选择器的复杂程度，复杂度与阿高浏览器解析时间越长。
避免使用CSS表达式在javascript代码中
使用css渲染合成层如transform、opacity、will-change等，提高页面相应速度减少卡顿现象。
动画使用CSS3过渡，减少动画复杂度，还可以使用硬件加速。
减少DOM操作数量
避免使用with语句、eval函数，避免引擎难以优化。
尽量使用原生方法，执行效率高。
将js文件放到文件页面底部，避免阻塞页面渲染
使用事件委托，减少事件绑定次数。
合理使用缓存，避免重复请求数据。
Vue
合理使用watch和computed，数据变化就会执行，避免使用太多，减少不必要的开销
合理使用组件，提高代码可维护性的同事也会降低代码组件的耦合性
使用路由懒加载，在需要的时候才会进行加载，避免一次性加载太多路由，导致页面阻塞
使用Vuex缓存数据
合理使用mixins，抽离公共代码封装成模块，避免重复代码。
合理使用v-if 、v-show
v-for 不要和v-if一起使用，v-for的优先级会比v-if高
v-for中不要用index做key，要保证key的唯一性
使用异步组件，避免一次性加载太多组件
避免使用v-html，存在安全问风险和性能问题，可以使用v-text
使用keep-alive缓存组件，避免组件重复加载
Webpack优化
代码切割，使用code splitting将代码进行分割，避免将所有代码打包到一个文件，减少响应体积。
按需加载代码，在使用使用的时候加载代码。
压缩代码体积，可以减小代码体积
优化静态资源，使用字体图标、雪碧图、webp格式的图片、svg图标等
使用Tree Shaking 删除未被引用的代码
开启gzip压缩
静态资源使用CDN加载，减少服务器压力
网络优化
使用HTTP/2
减少、合并HTTP请求，通过合并CSS、JS文件、精灵图等方式减少请求数量。
压缩文件， 开启nginx，Gzip对静态资源压缩
使用HTTP缓存，如强缓存、协商缓存
使用CDN，将网站资源分布到各地服务器上，减少访问延迟