前端性能优化之http缓存

Posted wzcsqaws

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化之http缓存相关的知识,希望对你有一定的参考价值。

前不久,公司前端开会,领导抽问了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了,虽然这点没什么用。。。

以上是关于前端性能优化之http缓存的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化之HTTP缓存策略

前端性能优化之----静态文件客户端离线缓存_20191110

前端性能优化之----静态文件客户端离线缓存_20191110

大型网站技术架构,4网站的高性能架构之Web前端性能优化

前端性能优化总结

前端性能优化之缓存利用