三沣开发知识 购物 网址 小说 美女秀 游戏 电影下载 图说天下 生肖星座 新闻 笑话 | IT开发 软件下载 手机论坛 三沣软件 360图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 浏览器缓存分析 -> 正文阅读
 

[Html-Css]浏览器缓存分析

浏览器缓存分析 缓存这个概念不管是在前端还是后端都是息息相关,且需要前后端一起配合,本文以前端的视角做分析。
一道被问过多次的面试题:
浏览器请求跟缓存相关的概念有哪些?
cache-control,expires。。。 
ETag知道吗?
没有(这是神马东西?)
以chrome抓取到的百度请求一个js文件为例:
200初次请求

-------------------------------

304刷新请求

-------------------------------

等回来经过大量查询,总结如下:
1:浏览器接收到服务器响应相关的缓存概念有:
  Cache-Control  http1.1
       max-age   资源在本地缓存多少秒(注意单位是秒)
       no-cache  浏览器不会缓存文件,不管刷新,回车,回退都请求最新
       privite  响应只能够作为私有的缓存(e.g., 在一个浏览器中),不能再用户间共享
       public  响应会被缓存,并且在多用户间共享。正常情况, 如果要求HTTP认证,响应会自动设置为 private
     Expires:
   缓存过期时间,允许客户端在这个时间之前不去检查(发请求),属于http1.0,优先级比cache-control低,根据客户端的时间计算,如果客户端和服务器端时间不一致
   就会有问题。所以在http1.1里有了cache-control的
    概念, 
     last-modified: 服务器端文件最后修改时间,数值如果和request的if-Modified-Since相同则使用304缓存
   ETag: 一个标记,当服务器端资源发送改变时,ETag也随之发生变化,数值如果和request的if-None-Match相同则使用304缓存。
2:浏览器发出请求相关的缓存概念有:
  If-Modified-Since: 客户端缓存文件的最后修改时间last-modified
  if-none-match:  客户端缓存文件的etag值
  cache-control: max-age=0
                           no-cache
  Prama:no-cache HTTP 1.0中定义的, 所以为了兼容HTTP 1.0. 会同时使用Pragma: no-cache和Cache-Control: no-cache
3:last-modified和ETag都是看服务器端文件是否修改了,为什么同时使用了?
  使用ETag主要是为了解决Last-Modified 无法解决的一些问题。
  1. 某些服务器不能精确得到文件的最后修改时间, 这样就无法通过最后修改时间来判断文件是否更新了。
  2. 某些文件的修改非常频繁,在秒以下的时间内进行修改. Last-Modified只能精确到秒。
  3. 一些文件的最后修改时间改变了,但是内容并未改变。 我们不希望客户端认为这个文件修改了。 
4:页面有几种方式重新显示?
  1. 刷新
  2. 浏览器的回退按钮
  3. 地址栏回车
  4. 强制刷新(command+shift+r)
  区别:
      刷新会去请求服务器,如果返现if-none-match和if-modified-since 分别与服务器的etag和last-modified一致,则返回304,浏览器使用缓存,注意此过程是有请求的
      浏览器回退和地址栏回车都是浏览器的行为,直接使用客户端的缓存,即200  from cache
      强制刷新会重新请求,没有304
  不过以上如果服务器端设置cache-control:none,则不管是哪种行为,都会重新请求 200 没有缓存
5:特殊情况 ,动态加载的js文件
     发现这个问题还是从requirejs说起,
     

    图中的r.js就是requirejs,当刷新的时候发现requirejs加载的js文件一直是200 from cache,最初以为跟requirejs内部实现有关,查看源码发现并没有做缓存,每次都是重新
  用新的script标签请求,然后就开始猜测难道跟动态加载有关系,那就试试jquery加载的
  

  结果是jquery动态加载的刷新后也是200 from cache,那就来个自己动态加载,经过测试,也是如此,所以初步判断是动态加载的缓存后刷新默认使用浏览器的缓存,  
  因为并不是很确定,所以请教了公司的大牛,得到的答复为
  “
刷新的时候,会忽略Expires/Cache-Control的设置,再次向服务器请求
而页面后续异步加载的资源不受影响,
所以还会from cache

  Html-Css 最新文章
学习CSS制作菜单列表,举一反三
行内元素转为块级元素的方法
CSS3动画功能
margin赋值为负值的几种效果(负值像素,负
display:flex css
html5 css选择器 井号, 句点的区别
5种实现垂直居中css
利用锚点制作简单索引效果
最锋利的Visual Studio Web开发工具扩展:W
过渡
上一篇文章      下一篇文章      查看所有文章
加:2015-09-07 16:29:29  更:2017-05-16 04:59:52 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频
2017-6-29 11:36:57
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库