浏览器中回车(Enter)和刷新的区别是什么?[转载]
在浏览器中回车和F5刷新有什么区别那?今天就来说说:浏览器中回车(Enter)和刷新的区别是什么? 这点事。
概论:
1、回车在 Expires有效的时候,是不会去请求服务器的,打开调试看到的请求也只是伪造的,比如 谷歌浏览器可能显示 200(cached)(比正常的200多了) 其实是没有发起实际的缓存,直接读取本地硬盘缓存。
2、如果按了 f5则 Expires设置不再起效果,只有Last-Modified/ETag有效果,如果在缓存期间内则返回 304,再读取本地缓存内容
3、ctrl+f5则会发送 Cache-Control: no-cache,真正的从服务器重新获取文件,此时缓存完全失效
先来说“刷新”,它是在你现有页面的基础上,检查网页是否有更新的内容。在检查时,会保留之前的一些变量的值,因此有可能会造成刷新后网页出现错误,或者打不开的情况;“转到”和在地址栏回车,则相当于你重新输入网页的URL访问,这种情况下,浏览器会尽量使用已经存在于本机中的缓存。也就是,“刷新” 是取网页的新内容来更新本机缓存,在更新的同时保留之前的一些变量;“转到”则是一种全新的访问,它会尽量使用本机缓存中的文件,但不会保留之前的变量,这下应该明白了吧?另外,按着Ctrl,还可以进行强制刷新,跟转到的作用差不多。
不少同学问,不都是刷新吗?还有什么区别?其实,还是有的。
其中,在地址栏按回车又分为两种情况。一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP请求消息头如下:
Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive
HTTP返回状态显示200 OK,但是,后台Nginx服务器的access.log并没有找到该请求的记录,说明请求并没有真正提交到HTTP服务器。而是被浏览器发现缓存中还有 未过期的文件,直接把请求拦截了,firebug里面显示所谓的“请求头消息”、“响应头消息”都是浏览器“伪造”的。这种刷新,使用的网络流量是最小 的,可以说完全没有,时间消耗也是最少的。就像你找到一盒没有过期的牛奶,觉得肯定没有问题,谁都没告诉就喝了。
二是请求的URI在浏览器缓存中已过期,此时,firebug显示的HTTP请求消息头如下:
Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive
If-Modified-Since Mon, 04 Jul 2011 10:12:40 GMT
多了一行If-Modified-Since,后台Nginx服务器的access.log也找到了该请求的记录,说明浏览器对这种情况的处理方法是:再 问一下服务器,请求的URI在某个时间之后有没有被修改过,而这个时间是由上次HTTP响应的Last-Modified决定的。服务器鉴定之后,没有修 改的话,返回304 Not Modified,浏览器收到后,从缓存里读出内容;有修改的话,返回200 OK,并返回新的内容。这种情况,就像你找到一盒已经过期的牛奶,于是问别人,还能不能喝,如果别人说可以,你就把它喝了,如果别人说不行,那你得就另外找一盒新鲜的牛奶。
至于F5刷新,其HTTP请求消息头如下:
Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive
If-Modified-Since Mon, 04 Jul 2011 10:12:40 GMT
Cache-Control max-age=0
又多了一行Cache-Control: max-age=0,意思是说,我不管浏览器缓存中的文件过期没有,都去服务器询问一下,相当于上次HTTP响应的Expires暂时失效。服务器的响应 处理流程同上。这种情况,就像你找到一盒牛奶,没有看它的有效期,直接就问别人能不能喝。
最后是Ctrl+F5刷新,其HTTP请求消息头如下:
Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive
Pragma no-cache
Cache-Control no-cache
If-Modified-Since没有了,Cache-Control换成了no-cache,此外Pragma行是为了兼容HTTP1.0,作用与 Cache-Control: no-cache是一样的。意思是,我不要缓存中的文件了,强制刷新,直接到服务器上重新下载,于是服务器的响应处理与首次请求这个URI一样,返回 200 OK和新的内容。这种刷新,使用的网络流量是最大的,也是最耗时的。这就像你虽然发现了一盒牛奶,但是把它扔掉了,直接去买一盒新的。
所以,当利用页面上的隐藏域value时,有可能在页面的操作时更改了该隐藏域的值,所以(按钮)刷新浏览器时,隐藏域的value是不会恢复到初始值,所以应在文档加载完成
$(document).ready(function () {
//初始化菜单隐藏域
$("#menu_value").val(1);
}。
而不能依赖
<input id="menu_value" value="1" type="hidden"/>
浏览器中回车(Enter)和刷新的区别是什么?[转载]的更多相关文章
- 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)
1.问题 在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){ var {search,hre ...
- react中回车enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...
- VSCode中代码在浏览器中打开及实时刷新
实时刷新方法一: 在项目目录下运行命令: browser-sync start --server --files "**/*.css,**/*.html,**/*.js" 实施刷新 ...
- 浏览器中F5和CTRL F5的行为区别
前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为也是刷新页面,但是会清除浏览器缓存,这在前端调试时候会常用.二者真正的区别是什么呢?在stackove ...
- 【转】浏览器中F5和CTRL F5的行为区别
原文地址:http://www.cnblogs.com/jiji262/p/3410518.html 前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为 ...
- WebForm中如何防止页面刷新,后退导致的重复提交
当用户按下浏览器中的 F5 键刷新当前页面时,对这一过程进行检测所需的操作步骤.页面刷新是浏览器对特定用户操作(按 F5 键或单击"刷新"工具栏按钮)的响应.页面刷新操作是浏览器内 ...
- 如何在浏览器中运行 VS Code?
摘要: WEB IDE新时代! 作者:SHUHARI 的博客 原文:有趣的项目 - 在浏览器中运行 Visual Studio Code Fundebug按照原文要求转载,版权归原作者所有. 众所周知 ...
- 浏览器缓存如何控制? && 在url框中回车、F5 和 Ctrl + F5的区别是什么?
第一部分: 浏览器缓存如何控制? 最近在做网站,但是不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明: 浏览器向服务器请求 ...
- 在浏览器中输入URL并回车后都发生了什么?
1.解析URL ________________________________________________________________________ 关于URL: URL(Universa ...
随机推荐
- Sublime Text 使用介绍/全套快捷键及插件推荐
如果说Notepad++是一款不错Code神器,那么Sublime Text应当称得上是神器滴哥.Sublime Text最大的优点就是跨平台,Mac和Windows均可完美使用:其次是强大的插件支持 ...
- 在shell脚本中调用另一个脚本的三种不同方法(fork, exec, source)——转载
原文链接:http://blog.chinaunix.net/uid-22548820-id-3181798.html fork ( /directory/script.sh) :如果shell中包含 ...
- [转] offsetParent 到底是哪一个?
正文 不同情况 没有已定位的父节点,且自身position:relative的DIV元素的offsetParent为BODY 没有已定位的父节点,且自身position: absolute的DIV元素 ...
- 阿里云服务器(windows)配置项目域名
一.数据库是放在阿里云上!二.项目部署到服务器上,tomcat会一直运行(除非你手动停止)三.设置域名及tomcat配置(1)在阿里云控制台上的域名解析设置中添加记录,将域名映射到你的阿里云esc公网 ...
- 优雅的将Map转为String工具类
import com.alibaba.fastjson.JSONObject;import org.apache.commons.lang3.StringUtils; import java.lang ...
- 使用djcelery发送邮件
发送邮件作为一个独立的业务模块,我们把它放到另外一个文件中,定义一个task文件,里面定义发送邮件的功能, 需要用到django.core.mail 里面的send_mail这个函数 发送邮件与网络环 ...
- 面向对象设计原则 接口分离原则(Interface Segregation Principle)
接口隔离原则 使用多个专门的接口,而不使用单一的总接口,即客户端不应该依赖那些它不需要的接口. 从接口隔离原则的定义可以看出,他似乎跟SRP有许多相似之处. 是的其实ISP和SRP都是强调职责的单一性 ...
- android 地图
========= Y:\AMap_Android_API_3DMap_Demo\android_studio\AMap3DDemo>keytool -v -list -keystore C:\ ...
- java集合系列之LinkList
概要 第1部分 LinkedList介绍第2部分 LinkedList数据结构第3部分 LinkedList源码解析(基于JDK1.6.0_45) 第5部分 LinkedList示例 转载请注明出处 ...
- BZOJ4115 : [Wf2015]Tile Cutting
设一种方案里三角形上三个点的坐标分别为$(0,0),(-a,b),(c,d)$,则得到的平行四边形的面积为$ac+bd$. 设$d(n)$为$n$的约数个数,$D$为$d$的生成函数,则答案的生成函数 ...