前端性能优化之http缓存

更新日期: 2019-08-16阅读: 1.9k标签: 缓存

缓存以及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了,虽然这点没什么用


链接: https://www.fly63.com/article/detial/5345

浏览器缓存_HTTP强缓存和协商缓存

浏览器缓存主要分为强强缓存(也称本地缓存)和协商缓存(也称弱缓存),强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。协商缓存就是由服务器来确定缓存资源是否可用.

angularjs 缓存详解

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。

浏览器缓存问题原理以及解决方案

浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中,为什么使用缓存:减少网络带宽消耗,降低服务器压力,减少网络延迟,加快页面打开速度

Web缓存相关知识整理

一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了下Web缓存的知识

使用缓存加速之后的网站访问过程变化

在描述CDN的实现原理之前,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别,用户访问未使用CDN缓存网站的过程为:用户向浏览器提供要访问的域名;

html页面清除缓存

页面打开时,由于缓存的存在,刚刚更新的数据有时无法在页面得到刷新,当这个页面作为模式窗口被打开时问题更为明显, 如何将缓存清掉?

HTTP之缓存 Cache-Control

通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值:缓存头Cache-Control只能在服务端设置,在客户端是由浏览器设置的,自己不能修改它的值。

工程化_前端静态资源缓存策略

增量更新是目前大部分团队采用的缓存更新方案,能让用户在无感知的情况获取最新内容。具体实现方式通常是(一般我们通过构建工具来实现,比如webpack):

前端静态资源自动化处理版本号防缓存

浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。

vue后台管理系统解决keep-alive页面路由参数变化时缓存问题

一个后台管理系统,一个列表页A路由配置需要缓存,另一个页面B里面有多个跳转到A路由的链接。问题描述:首先访问/A?id=1页面,然后到B页面再点击访问A?id=2的页面,发现由于页面A设置了缓存,数据还是id=1的数据,并没有更新。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!