浏览器缓存那些事

2024年4月25日 250次阅读 来源: wens

浏览器读取资本的流程

  • 浏览器在加载资本时，依据要求头的expires和cache-control推断是不是掷中强缓存，是则直接从缓存读取资本，不会发要求到服务器。
  • 假如没有掷中强缓存，浏览器一定会发送一个要求到服务器，经由过程last-modified或许etag考证资本是不是掷中协商缓存，假如掷中，服务器会将这个要求返回，然则不会返回这个资本的数据，依然是从缓存中读取资本
  • 假如前面二者都没有掷中，直接从服务器加载资本

强迫缓存（不发送要求）

  1. 怎样设置
    平常我们会同时设置expires和cache-control两种，保证不管在http1照样1.1的状况下都有用

    • expires
      逾期时刻，假如设置了时刻，则浏览器会在设置的时刻内直接读取缓存，不再要求

    • cache-control

      http1.1新规范，包含这些属性：

      （1）max-age：用来设置资本（representations）可以被缓存多长时刻，单元为秒；
（2）s-maxage：和max-age是一样的，不过它只针对代理服务器缓存而言；
（3）public：指导响应可被任何缓存区缓存；
（4）private：只能针对个人用户，而不能被代理服务器缓存；
（5）no-cache：强迫客户端直接向服务器发送要求,也就是说每次要求都必须向服务器发送。服务器接收到要求，然后推断资本是不是变动，是则返回新内容，不然返回304，未变动。这个很轻易让人产生误解，使人误以为是响应不被缓存。现实上Cache-Control:no-cache是会被缓存的，只不过每次在向客户端（浏览器）供应响应数据时，缓存都要向服务器评价缓存响应的有用性。
（6）no-store：制止统统缓存（这个才是响应不被缓存的意义）。

  2. 缓存的两种表现形式

    • memory cache

      来自于内存的数据，会跟着历程的完毕而消灭，读取速率相对快(0ms)
      平常寄存剧本，图片，字体等文件

    • disk cache

      来自于硬盘的数据，不会跟着历程的完毕而消灭，读取速率慢于memory cache(2-10ms 硬盘读写的IO操纵)
      平常寄存css文件

      依据履历状况来看：浏览器的现实处置惩罚逻辑是如许的

      初次加载资本 -> 200 -> 封闭标签页
      再次进入 -> 200 from disk cache -> 革新 -> 200 from memory cache
      （不过彷佛css都是from disk cache, base64都是from memory cache）

协商缓存（发送要求）

客户端向服务端发送要求时刻（没有掷中强迫缓存），服务端会搜检是不是有对应的标识，没有则返回200并天生一个新的标识带到header，下次在要求的时刻服务端搜检到对应的这个标识并做响应的校验，经由过程则返回304，读取缓存。

  • Last-modify / If-modify-since

    浏览器初次要求资本的时刻，服务器会返回一个last-Modify到header中. Last-Modify 寄义是末了的修正时刻。
    当浏览器再次要求的时刻，request header会带上 if-Modify-Since，该值为之前返回的 Last-Modify。服务器收到if-Modify-Since后，依据资本的末了修正时刻(last-Modify)和该值(if-Modify-Since)举行比较，假如相称的话，则掷中缓存，返回304，不然, 则会给出200响应，而且更新Last-Modify为新的值

  • Etag / If-none-match（http1.1范例）
    ETag的道理和上面的last-modified是相似的。ETag对当前要求的资本做一个唯一的标识。该标识可以是一个字符串，文件的size,hash等。只需可以合理标识资本的唯一性并能考证是不是修正过就可以了。ETag在服务器响应要求的时刻，返回当前资本的唯一标识(它是由服务器天生的)。然则只需资本有变化，ETag会从新天生的。浏览器再下一次加载的时刻会向服务器发送要求，会将上一次返回的ETag值放到request header 里的 if-None-Match内里去，服务器端只需比较客户端传来的if-None-Match值是不是和本身服务器上的ETag是不是一致，假如一致申明资本未修正过，因而返回304，假如不一致，申明修正过，因而返回200。而且把新的Etag赋值给if-None-Match来更新该值。

协商缓存两种体式格局对照

  • 在精度上，ETag要优先于 last-modified。

    last-modified这类体式格局精度差在那里：
    a. 一些文件或许会周期性的变动，然则他的内容并不转变(仅仅转变的修正时刻)，这个时刻我们并不愿望客户端以为这个文件被修正了
    b. 某些文件修正异常频仍，比如在秒以下的时刻内举行修正，(比方说1s内修正了N次)，If-Modified-Since能搜检到的粒度是s级的，这类修正没法推断(或许说UNIX纪录MTIME只能准确到秒)；

  • 在性能上，Etag要逊于Last-Modified，Last-Modified须要纪录时刻，而Etag须要服务器经由过程算法来计算出一个hash值。
  • 在优先级上，服务器校验优先斟酌Etag。

怎样设置index.html不被缓存

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">  <!-- http1.1规范 -->
<meta http-equiv="Pragma" content="no-cache">  <!-- http1.0规范 -->
    原文作者：wens
    原文地址: https://segmentfault.com/a/1190000019351434
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞