前端性能优化

前端性能优化

（一）代码层面的优化

• 1.v-if和v-show的场景使用
• 2.computed和watch的使用
• 3.v-for遍历必须为item添加key，同时避免同时使用v-if
• 4.长列表性能优化，推荐使用虚拟列表
• 5.在组件销毁时，注意清除定时器和解绑他的指令和事件监听器
• 6.第三方插件的按需引入
• 7.图片资源懒加载的使用，vue-lazyload
• 8.路由懒加载

（二）webpack层面的优化

• 1.使用image-webpack-loader对图片进行压缩
• 2.减少es6转为es5的冗余代码
• 3.线上环境去除掉soucemap

web层面的优化

• 1开启gzip
• 2浏览器缓存（强缓存和协商缓存）
• 3.cdn使用，浏览器从服务器加载css/js/image等文件时候都要和服务器连接，而服务器的带宽有限，如果超过限制，网页就会半天加载不出来。而CDN可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加