zoukankan      html  css  js  c++  java
  • 浏览器刷新的三种方式

    原文:https://cnodejs.org/topic/4f43614e6ade5ec0780003c3

    我们一直在用着浏览器刷新,其实刷新也是有一些小学问的哦,我们常见的三种刷新:

    1、url+enter或者a标签的超链接点击

    2、F5刷新

    3、ctrl+F5刷新

    这三种刷新究竟有何不同呢?举三个简单的例子大家就明白了。

    条件:此url路径您已经使用浏览器最近访问过,并没有超过缓存的时间,比如您在前1分钟刚刚访问过此url路径。

    1、url+enter或者a标签的超链接点击

    enter image description here

    哇!一张我梦想座驾三菱EVO X的图片出现了。

    我们发现用firebug查看网络请求是灰色的,后面说明此请求来自于缓存,其实此请求并没有发送到后端node.js,而是浏览器直接读取的缓存的数据。这里只需要在 response.setHeader(‘Cache-Control’, ‘public, max-age=3600’); //缓存一小时

    2、F5刷新

    还是那个url地址,只不过这次我轻轻的按了下F5哦~

    enter image description here

    EVO X还是那么帅啊,哈哈。

    我们仔细看响应状态码,变成304了,这里浏览器是去请求了后端node.js服务器,同时它带上了2个重要的参数:

    1、If-Modified-Since:对应的node.js响应头 Last-Modified

    2、If-None-Match:对应的node.js响应头 Etag

    当node.js服务器收到这样的http请求后,则去判断是否需要更新客户端的缓存,至于使用 Last-Modified 还是 Etag 来判断缓存是否更新就要看您的node.js服务器代码是怎么写的了。

    expressjs是优先判断Etag,至于Etag的值如何获取,也要看您使用的web服务器是怎么获取的,可以是修改时间+文件大小的md5值或者其他。

    如果node.js服务器判断 Last-Modified 还是 Etag 后认为此请求资源还在缓存,然后返回 304状态码,和最新的 Last-Modified和Etag。

    并且响应头没有“Content-Length”属性,说明响应的body是空的,

    浏览器收到304状态码以后,认为资源未被修改,所以就去取缓存响应给用户了。

    3、ctrl+F5刷新

    强制刷新!

    enter image description here

    EVO X还是那么霸气!虽然已经停产了!

    我们可以仔细看下请求头,没有了第2种情况的2个缓存头,和第一次来访问此url地址是一样的,所以node.js服务器就直接将图片响应给浏览器了,所以这里的151.1KB是这张图片的大小,不使用任何浏览器缓存。

    总结发言:

    三种刷新的情况相信您已经全看明白了,百分之90%的用户是使用第一或者第二种的,所以缓存技术至关重要。对于一些不经常修改的页面完全可以使用 Cache-Control 让请求都不用发了,节约服务器资源,快速响应。对于一些静态图片等一定要加上 Last-Modified 或者 Etag,因为一般此类资源体积都比较大,缓存做好的话可以提高不少效率。

    当然不论是静态文件还是json数据或者是html数据都可以充分的利用浏览器缓存,只要你遵循http协议。

  • 相关阅读:
    Python之模块
    Python之request模块-基础用法
    Linux小知识点
    python之pip安装软件包常用命令
    windows设置多个JDK环境
    window配合虚拟机VMware搭建虚拟ubuntu服务器入坑集锦
    Linux服务器相关信息查询
    达梦数据库
    创业公司如何快速构建高效的监控系统?
    干货分享:智慧工厂时代下大数据 + 智能的深度实践
  • 原文地址:https://www.cnblogs.com/zs-note/p/4994623.html
Copyright © 2011-2022 走看看