性能优化

网络请求优化

1、使用 link ref="dns-prefetch" 标签去通知浏览器对页面中出现得其他域名去做DNS的预解析

2、由于http请求需要三次握手=》会造成额外的网络损耗 所以我们可以让文件尽可能的少

  a、先将文件打包后上线

  b、使用css雪碧图进行图片打包

3、除了让文件尽可能少，也可以让文件尽可能的小

  a、js、css代码再上线前进行压缩

  b、大部分图片使用jpg、高精细度图片使用png。优先使用Webp

  c、多使用懒加载==图片懒加载和路由懒加载

4、尽可能高效的利用浏览器的缓存机制，在文件内容没有发生变化的时候，做到一次加载多次使用

代码效率优化

1、尽可能遵循Vue官方的最佳实践

  a、使用computed 内置有缓存机制 比使用watch函数好一些
  
  b、组件中优先使用template激活Vue内置的静态标记
  
  c、v-for循环渲染一点要有key=> 再虚拟DOM计算Diff的时候更高效复用标签等
  
  d、v-if和v-for不要连用（v-for优先于v-if解析，同时出现，每次渲染都会先执行循环再判断条件，无论怎么循环都不可避免）
  
  e、v-if代替v-show
  

2、JavaScript本身的性能优化

用户体验优化

1、可以损失一些性能去换取交互体验的提升

  a、可以预先加载一个模糊版本的图片 再加载清晰的版本
  
  b、上传超大文件时，可以选择断点续传 =》如果中间中断上传 下次再上传的时候 只需要上传缺失的那些部分
  
  c、使用骨架图的组件 首先渲染一个页面和loading状态 
  

可以使用性能监测的工具对具体的项目瓶颈去有针对性的进行性能优化