前端性能优化之http缓存

Posted 2022-11-04 wzcsqaws

前不久，公司前端开会，领导抽问了4个问题，前3个简单大家都答起来了，第4个问题关于缓存的这方面我只是了解，结果刚好问到我了（会的不问，专门挑我不熟悉的问，我这运气真是没话说），20多个前端看着我，答得不是很好，感觉很臊皮，遂重新研究并记录下成果。

讲下缓存以及200 form cache 和304的区别

如果每次都要求用户从服务器获取数据，那么速度和流量势必有问题，所以就需要http缓存来解决了。如果文件没有更新就用缓存起来的原文件。
缓存分为强缓存和协商缓存
强缓存是指不问服务器这个文件有没有更新，只要在缓存时间范围内，就使用缓存的文件，这时network上显示200 form cache，
有2个属性控制强缓存，Expires和Cache-Control: max-age，Expires是http 1.0定义的，使用的是相对时间，如果2边与服务器时间不统一就会出现问题，为了解决这个问题于是就出现了http 1.1定义的Cache-Control: max-age，这个属性使用的是相对时间，一般来说都是2个都加，然后取相对时间属性。
协商缓存是先向服务器询问下是否文件有更新，根据服务器的提示来决定是否使用缓存，由于比强缓存多了去服务器询问这一步所以势必没有强缓存快。
协商缓存也有2对属性，分别是ETag和If-None-Match，Last-Modified和If-Modified-Since，每次请求的时候，浏览器会保存获取的ETag和Last-Modified，下次在调的时候会传If-None-Match和If-Modified-Since过去，值就是上次获取ETag和Last-Modified的值，然后根据返回的值是否有变化来决定是否取缓存的数据，Last-Modified是用时间来判断，ETag用标识符，之所以出现2个是因为Last-Modified只能精确到秒，如果1秒内有多次数据调用，它就无能为力了，所以出现了进阶的ETag，使用协商缓存的时候status显示的是304

工作中nginx+vue@cli3+缓存优化

工作中正常情况下除了html其余资源都使用强缓存，html使用协商缓存，当打包重新构建的时候，html使用协商缓存会发现html变了，然后从服务器读取新的html，由于打包后html引用的文件hash值不一样，就会重新加载新的各种文件，但是通过查看hash值发现，

1 没有任何文件改动，app.js的hash值都会改变
2 明明改动的只有js文件，但app.js和app.css的hash都会改变
hash变了就意味着会重新加载，但是文件明明没有变化，为什么要改变hash值，让某些文件白白多加载一次呢，
查找资料发现，HashedModuleIdsPlugin可以解决你的问题

configureWebpack: config => 
    return 
      plugins: [
        new webpack.DllReferencePlugin(
          context: process.cwd(),
          manifest: require('./public/vendor/vendor-manifest.json')
        ),
        // 在控制台中输出可读的模块名
        new webpack.NamedModulesPlugin(),
        // 不做改动hash保持不变
        new webpack.HashedModuleIdsPlugin()
       
      ]
    
  ,

还有一点很有趣的是假如你想试着把html也设成强缓存（配置nginx来设置缓存时间），刷新浏览器页面，你会发现html还是304，查看头部，发现Expires和Cache-Control: max-age这2个都有，但是为什么还是304呢，网上也没有讲这个的，后面瞎折腾发现，网页新起一个标签页，然后输入你的网页，第一次是用的强缓存，后面就是304了，虽然这点没什么用。。。