专栏首页前端词典【前端词典】F5 同 Ctrl+F5 的区别你可了解

【前端词典】F5 同 Ctrl+F5 的区别你可了解

前言

今天在把代码部署到测试环境后,告知产品 UI 问题已修复。几分钟过后,产品说问题还可以复现。而后去产品那才发现她一直使用 F5 刷新页面。我告诉她 F5Ctrl+F5 的区别后,也就有了这篇文章。

其实 F5Ctrl+F5 使用的频率是很高的,可是在使用的时候有没有想过 F5Ctrl+F5 的区别是什么? 这篇文章会将 F5Ctrl+F5 刷新页面的原理讲清楚。通过这篇小文,即便是对浏览器缓存机制加深一点点的认知,也是有所裨益的。

入题

下图是我们第一次打开掘金的 Network 界面,由于是第一次打开,所以全部资源是从服务器请求的, Status 都是 200

接下来我们按一下 F5,看看效果;

发现静态资源的 Size 都是 fromdisk cache;说明此时的静态资源是从缓存中取的。具体为什么 Sizefromdisk cache 我先按下不表。我先来说说 size 选项的 4 种情况。

size 选项的 4 种情况

  1. 资源的大小
  2. from disk cache
  3. from memory cache
  4. from ServiceWorker

from memory cache

表示此资源是取自内存,不会请求服务器。已经加载过该资源且缓存在内存当中;关闭该页面此资源就被内存释放掉了,再次打开相同页面时不会出现 frommemory cache 的情况。

from disk cache

表示此资源是取自磁盘,不会请求服务器。已经在之前的某个时间加载过该资源,但是此资源不会随着该页面的关闭而释放掉,因为是存在硬盘当中的,下次打开仍会 fromdisk cache

资源本身大小数值

http 状态为 200 是实实在在从浏览器获取的资源,当 http 状态为 304 时该数字是与服务端通信报文的大小,并不是该资源本身的大小,该资源是从本地获取的。

from ServiceWorker

表示此资源是取自 fromServiceWorker

现在我们再按下 Ctrl+F5,看看效果

发现 Size 显示的又是资源自身的大小,说明 Ctrl+F5 后的资源又是重新从服务器中请求得到的。

F5 同 Ctrl+F5 的区别

为什么 F5 后请求的是缓存,而 Ctrl+F5 就重新请求资源呢?答案就是这两种方式发送的请求头不一样(不同的浏览器发送的请求头也有一些区别)。

F5

chrome 浏览器中按 F5 后,看到资源的请求头中有 provisional headers are show 字样。这是为什么呢?

原因:未与服务端正确通信。该文件是从缓存中获取的并未进行通信,所以详细标头并不会显示。强缓存 fromdisk cache 或者 frommemory cache ,都不会正确的显示请求头。

下面看看按 F5 后在 firefox 浏览器中的表现。

从图中可以看出返回的状态码是 304NotModified

这是因为按 F5 进行页面刷新时请求头会添加 If-Modify-Since 字段,如果资源未过期,命中缓存,服务器就直接返回 304 状态码,客户端直接使用本地的资源。

可以看出 chromefirefox 在按下 F5 后,其内部使用的缓存机制不同。 firefox 使用的是协商缓存,而 chrome 使用的是强缓存。

Ctrl+F5

我们还是先看看在 chromeCtrl+F5 的表现。

我们发现在请求头中多了两个 Cache-Control:no-cache,Pragma:no-cache 参数,这两个参数什么意思呢?

在请求头中的 Cache-Control:no-cache 表示客户端不接受本地缓存的资源,需要到源服务器进行资源请求,其实可以使用缓存服务器的资源,不过需要到源服务器进行验证,验证通过就可以将缓存服务器的资源返回给客户端。

那么在 Firefox 中的表现是怎样的呢?

请求头中同样多了两个 Cache-Control:no-cache,Pragma:no-cache 参数。

可以看出 chromeFirefox 在按下 Ctrl+F5 后,都不会使用本地缓存,并且对缓存服务器的资源会再验证。

写到这里差不多就把 F5Ctrl+F5 的缓存原理讲的差不多了。不过每个浏览器它们在实现同一个动作的时候,总是会有差异,不过在业界内 chrome 的缓存优化机制是做的最好的。这也是为什么我们在使用 chrome 开发或者是浏览网站的时候体验都不错的原因。

读完 F5Ctrl+F5 刷新页面的原理,其实你也把强缓存和协商缓存的区别也复习了一遍。

补充

我们可以通过勾选 Network 面板中的 Disablecache 选项,这样当你按 F5 的时候,也是直接请求服务器资源的效果。

本文分享自微信公众号 - 小生方勤(XSFQ_HSD)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端词典】必备知识-原型与原型链

    继承是我们前端必须熟悉的一个知识点。可依旧有很多前端对继承的实现和应用没有一个整体的把握。追其原因无非有二:

    小生方勤
  • 前端缓存最佳实践

    在介绍缓存的时候,我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效。顾名思义,协商缓存,就是...

    小生方勤
  • 【前端词典】从输入 URL 到展现涉及哪些缓存环节

    但我们输入一个常用的网址时,经常会有这样的情况,我们只是输入了几个字母,浏览器就自动补全了该网址。如下图:我只输入 j,就自动给我补全了 juejin.im:

    小生方勤
  • HTTP数据包头部格式解读1

    HTTP协议的大部分功能其实通过其协议包头来实现。因为HTTP协议包头作用如此重要,因此需要单独列出一节来详细讲解。协议包头大体上分为4类,分别为通用包头,请求...

    望月从良
  • 优化网站性能必备的6种架构方案,你知道吗?

    一个成熟的大型网站(如淘宝、天猫、腾讯等)的系统架构并不是一开始设计时就具备完整的高性能、高可用、高伸缩等特性的,它是随着用户量的增加,业务功能...

    lyb-geek
  • 地图和无人车越来越密不可分:Mobileye宝马HERE三方合作

    △ 来自Here实时高清地图的图像 陈桦 李林 | 整理编译 对于未来的无人车来说,地图的重要性不亚于传感器和算法,有了它,无人车才知道该去哪、怎么走。于是,在...

    量子位
  • ​都说高清地图重要,自动驾驶厂商们打算如何搞定它?

    李林 若朴 发自 GHGJ 量子位·QbitAI 出品 总有一天,当你早上出门坐进自己的车里,主要的任务就是刷手机或者看视频,而不需要全神贯注的驾驶汽车,行驶在...

    量子位
  • vue白屏优化方案

      vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况。那么该问题产生原因是什么呢?我们又该如何应对呢?

    流眸
  • 优化网站性能必备的6种架构方案,你知道吗?

    一个成熟的大型网站(如淘宝、天猫、腾讯等)的系统架构并不是一开始设计时就具备完整的高性能、高可用、高伸缩等特性的,它是随着用户量的增加,业务功能的扩展逐渐演变完...

    技术zhai
  • 微信页面入口文件被缓存解决方案

    缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式...

    木子墨

扫码关注云+社区

领取腾讯云代金券