浏览器缓存

        浏览器的缓存是性能优化中最高效的方法看,他可以显著减少网络传输带来的损耗。

        浏览器缓存可以帮助以下两种情况下进行优化:

  1. 发起请求:使用缓存不发起的请求
  2. 浏览器响应:后端与前端数据是一致的,那么没有必要再将数据传回来

        那么对于缓存,我们有下面几个问题要考虑:

  1. 缓存位置
  2. 缓存策略
  3. 实际场景应用
   1、缓存位置

        有四种缓存的位置,并且有各自的优先级,只有当依次没有命中的时候才会进行网络请求。

  1. service worker:他可以让我们自由控制缓存哪些文件、如何匹配缓存、并且持续缓存的。
  2. memory cache:内存中的缓存,内存中的数据肯定比磁盘快。但是,缓存持续性会很短,会随着进程的释放而释放,一旦关闭Tab页面,内存只能够的缓存就被释放了。
  3. disk cache:硬盘中的缓存,读取速到慢点,但是相对于内存缓存容量和存储时效上较好。所有的缓存中disk cache覆盖面最大,会根据HTTP Header中的字段判断哪些资源需要缓存,或者已经过期,跨站点的情况下,相同地址的资源一旦被硬盘缓存下来,就不会再次去请求数据。                                            
  4. push cache:是HTTP/2中的内容,以上三种缓存没有命中,它才会被使用,并且缓存时间也很短暂,只在session中存在。一旦回话结束就会被释放。
  5. 网络请求:所有缓存没有命中,就会发起请求来获取资源了
2、缓存策略

        缓存策略分成强缓存和协商缓存两种,并且通过设置HTTP Header来实现的。

  1. 强缓存:HTTP Header:Expires、Cache-Control(优先级高于expires)表示缓存期间不需要请求,state code为200。
  2.  协商缓存:HTTP Header:Last-Modified、Etag(优先级高于Last-Modified)如果资源没有做改变,那么服务端就会返回304状态码,并且更新浏览器缓存有效期。

下面是cache-control的一些常见的指令:

浏览器缓存_第1张图片

缓存的流程:

浏览器缓存_第2张图片

3、实际场景应用缓存策略
  • 频繁变动的资源:Cache-Control:no-cache

指先要和服务器确认是否有资源更新。也就是没有强缓存,而是会有协商缓存。

然后配合协商缓存的Last-Modified、Etag(优先级高于Last-Modified)来验证是否有效。

  • 代码文件 :HTML以外的代码文件,HTML文件一般不缓存或者缓存时间短。

一般来说。现在都会使用工具来打包代码,那么对于文件进行哈希处理,只有当代码修改后才会生成新的文件名。因此我们可以设置缓存时间为一年有效期Cache-Control: max-age=31536000。只有当文件名改变才去下载新的代码文件,否则一直缓存。

参考:

前端进阶之旅

做了一份前端面试复习计划,保熟~ - 掘金

你可能感兴趣的:(面试,缓存,前端,网络)