Skip to content

[html] 第135天 如何刷新浏览器的应用缓存? #1124

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第135天 如何刷新浏览器的应用缓存?

Activity

qhdxwdm

qhdxwdm commented on Aug 28, 2019

@qhdxwdm

按F5或浏览器刷新按钮
浏览器会在请求中附加必要的缓存协商,但不允许浏览器直接使用本地缓存,它能够让 Last-Modified、ETag发挥效果,但是对Expires无效。

按Ctrl+F5或按Ctrl并点击刷新按钮
这种方式就是强制刷新,总会发起一个全新的请求,不使用任何缓存

HCLQ

HCLQ commented on Aug 29, 2019

@HCLQ

ctrl+f5等于是给请求都加上 Cache-Control: no-cache 头,和打开chrome控制台 勾上 disable cache原理一致

LinStan

LinStan commented on Aug 29, 2019

@LinStan

浏览器缓存可分为强缓存和协商缓存。
强缓存指的是设置了expires或者cache-control:max-age的请求,此类缓存在设定的过期时间之前刷新不会再次向浏览器发起请求,直接由客户端决定使用缓存进行页面展示。
协商缓存指的是未设置强缓存对应字段的缓存,浏览器会向服务器发送请求,并带IF-Modified-Since和IF-None-Match字段,服务器对应的返回字段为Last-Modified或 Etag,如果在etag未更改 或 last-modified 的时间早于IF-Modified-Since 则服务器不返回文件,使用浏览器本地缓存。

回到问题,如何刷新应用缓存。
当你直接点击浏览器的刷新按钮或者F5刷新时,浏览器会忽略强缓存,必定向服务器发起请求,但是如果服务器返回304则会继续使用本地缓存。
当点击Ctrl+F5 浏览器会忽略一切缓存(cache-control:no-cache),向服务器发起请求,并且一定会使用服务器的返回来渲染页面。

cxwht

cxwht commented on Aug 31, 2019

@cxwht

ctrl+F5是可以刷新 还有在开发工具中网络那一块 可以按 ctrl+R重新接受数据,所以也会清除缓存

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@HCLQ@LinStan@cxwht@qhdxwdm

        Issue actions

          [html] 第135天 如何刷新浏览器的应用缓存? · Issue #1124 · haizlin/fe-interview