前端优化

• 减少http请求

  • 小于1kb的图片使用base64编码，直接嵌在html中

  • 使用精灵图csssprite
  • 合并js， 合并css
• 优化js、css
  • 使用CDN
    • 浏览器对每个域名的并发请求数量有限制，所有使用CDN可以增大并发请求数量
    • 请求CDN不许要携带cookie，节省空间
  • CSS放在header标签里，使其尽早下载，有些浏览器需要下载完所有的css后才渲染页面，如chrome，CSS放在靠下的部分可能会导致渲染时间延迟
  • js放在body的最后，因为外部脚本加载时会阻塞其他脚本的加载，阻塞浏览器的并发请求
• 使用懒加载
  • 组件懒加载

  • const xxx = ()=>import('xxx.vue');

     

  • 路由懒加载

• 合理设置http缓存

• 

http缓存自能缓存get请求响应的资源，第一次请求资源时，服务器返回资源，并在response header中传回资源的缓存参数，第二次请求时浏览器判断请求参数，如果是强缓存，则直接返回200，否则就把请求参数加到request header中发送到服务器，看是否命中协商缓存，命中则返回304，否则浏览器返回新资源

栗子  < meta http-equiv = "Cache-Control" content = "max-age=7200" />，也可以在服务端设置

跟强制缓存有关的header属性有 

header属性	可选值
Cache-control	1、no-cache,不使用强制缓存，根据新鲜度使用缓存 2、no-store,不使用缓存，每次都请求下载新资源 3、max-age:xxx秒，缓存时长 4、public/private, 是否只被单个用户使用，默认private 5、must-revalidata,每次访问都需要缓存校验
Expires	GMT时间

当第一次请求的响应头中没有cache-control和expires，或者cache-control设置为no-cache时，浏览器的第二次请求就会和浏览器协商，判断资源是否发生变化，若变化则返回200，将更新后的资源和缓存信息一起返回，否则返回304，告诉浏览器使用缓存，

跟协商缓存相关的header属性

header属性	可选值
ETag/If-Not-Match	校验值
Last-Modified/If-Modified-Since	GMT时间

顺便贴一下本地缓存