精华内容
下载资源
问答
  • js history.go 使用浏览器缓存

    千次阅读 2011-12-05 17:38:52
    js的history.go()方法,实际上就是使用浏览器缓存来前进或者后退,所以使用这个方法达到的页面是滞后的,如果做了更新操作,用history.go()达到的页面状态是未更新时的状态,所以如果做ajax操作,操作成功时使用...

    js的history.go()方法,实际上就是使用浏览器缓存来前进或者后退,所以使用这个方法达到的页面是滞后的,如果做了更新操作,用history.go()达到的页面状态是未更新时的状态,所以如果做ajax操作,操作成功时使用history.go(),就不能达到刷新页面最新数据状态的效果,只能使用location.reload()方法。

    在不需要及时更新数据的页面,使用history.go()跳转,速度会比较快。

    如果想要使用history.go(),又想更新页面,就要在使用history.go()的行之前,禁用掉浏览器缓存,在PHP中的方法是:

    <?php   
      
    //设置此页面的过期时间(用格林威治时间表示),只要是已经过去的日期即可。   
    header("Expires: Mon, 26 Jul 1970 05:00:00 GMT");     
      
    //设置此页面的最后更新日期(用格林威治时间表示)为当天,可以强制浏览器获取最新资料    
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");     
      
    //告诉客户端浏览器不使用缓存,HTTP 1.1 协议    
    header("Cache-Control: no-cache, must-revalidate");     
      
    //告诉客户端浏览器不使用缓存,兼容HTTP 1.0 协议    
    header("Pragma: no-cache");   
      
    ?>

    但是这样的话,history.go()的作用就和location.reload()一样了,还不如直接使用location.reload()。

    展开全文
  • 如何使用浏览器缓存来加快站点的访问速度

    千次阅读 多人点赞 2014-01-17 12:00:33
    当我们想尽办法提高服务器负载能力的时候,是否曾想过,其实浏览器也有缓存功能,我们也可以利用浏览器的缓存功能来减少服务器的负载,...但是,你是否想过在你的程序中加入代码主动告诉浏览器,更好地利用浏览器缓存


     当我们想尽办法提高服务器负载能力的时候,是否曾想过,其实浏览器也有缓存功能,我们也可以利用浏览器的缓存功能来减少服务器的负载,提高网站吞吐量? 
           当我们使用抓包工具查看http状态时,我们可以看到200,304,from cache之类的标识,也许你也早已注意到了他们,并明白他们的意思。但是,你是否想过在你的程序中加入代码主动告诉浏览器,更好地利用浏览器缓存。 
    备注:本章所有案例都是使用chrome 17.0.963.79 m浏览器,测试方式为每次打开浏览器新窗口的方式测试,而不是F5刷新。 
    我们先做一个没有缓存的页面,叫做nocache.php
    代码如下: 

     <?php 
    echo time(); 
    ?>

    用浏览器打开,我们可以看到每次打开页面,都是打印新的时间,返回的状态码是200,表明在默认情况下,我们的浏览器没有使用缓存。
    我们再做一个页面,叫做last_modified.php
    代码如下: 

    <?php 
    $cache_time = 3600; 
    $modified_time = @$_SERVER['HTTP_IF_MODIFIED_SINCE']; 
    if( strtotime($modified_time)+$cache_time > time() ){ 
        header("HTTP/1.1 304"); 
        exit; 
    } 
    header("Last-Modified: ".gmdate("D, d M Y H:i:s", time() )." GMT");  
    echo time(); 
    ?>

    用浏览器打开,我们可以看到第一次打开,返回的状态码为200,打印时间为最新时间。然后我们第二次打开,可以看到状态码为304,时间和刚才的时间一样,表明我们是使用到缓存了。我们删除last_modified.php文件,然后第三次打开页面,浏览器返回404错误,可见Last-Modified虽然使用了缓存,但是每次打开页面依然需要向服务器发起http请求,浏览器根据用户的$_SERVER['HTTP_IF_MODIFIED_SINCE']来判断浏览器的内容是否过期,没过期的话返回304状态,浏览器内容从缓存中读取。
    我们再做一个页面,叫做 expires.php
    代码如下: 

    <?php 
    $cache_time = 3600; 
    header("Expires: ".gmdate("D, d M Y H:i:s", time()+$cache_time )." GMT");    
    echo time(); 
    ?>

    用浏览器打开,我们可以看到第一打开,返回的状态为200,时间为最新的时间。然后我们第二次打开,可以看到状态码依然是200,时间依然是旧的时间,Size栏目显示为from cache,表示内容是直接从浏览器读取。我们删除expires.php文件,然后第三次在新窗口中打开,可以看到返回200状态码,打印时间依然是旧的,Size依然提示为from cache,由此可见,设置了Expires,就算删除页面,浏览器端依然可以显示,表明浏览器根本就没有向服务器发起http请求。 
          到这里,也许你会感觉Expires比Last-Modified缓存效果更好是吧,因为本地有缓存数据时,不需要向服务器发起http请求,服务器的并发数会明显的减少,可以少处理很多http请求。但是Expires也有缺点,那就是设置的过期时间是服务器的时间,而不是你本地的时间,这样如果服务器时间跟你本地时间不一致时,可能并没有起到缓存的效果。HTTP/1.1为了弥补Expirse的不足,引入了Cache-Control标记。格式如下Cache-Control: max-age=<second>,这个时间是相对浏览器本地时间,所以更加准确。
    我们再做一个页面,叫做cached_control.php
    代码如下: 

     <?php 
    $cache_time = 3600; 
    header("Cache-Control: max-age=".$cache_time); 
    echo time(); 
    ?>

    我们测试可以得到设置Expires一样的效果,也就是缓存后,删除文件,依然在浏览器缓存有效期内可以正常访问页面。 
          好了,over了,下次当你服务器并发太高,服务器资源和带宽资源不足时,请记住伟大的浏览器缓存吧!也许你依然不以为然,觉得提高服务器的吞吐量有很多办法,比如在服务器端做缓存,把页面静态化,等等。但是我相信有一个东西你应该会在意,没错,就是带宽,在意吧?如果能利用好浏览器缓存,将可以降低你的宽带资源,这样不是很好吗。


    展开全文
  • html5页面不使用浏览器缓存

    千次阅读 2018-04-25 09:33:59
    如果需要在html页面上设置不缓存,这在&lt;head&gt;标签中加入如下语句:1 &lt;meta http-equiv="pragma" content="no-cache"&gt;2 &lt;meta http-equiv="cache-...
     如果需要在html页面上设置不缓存,这在<head>标签中加入如下语句:
    
    1 <meta http-equiv="pragma" content="no-cache">
    2 <meta http-equiv="cache-control" content="no-cache">

    3 <meta http-equiv="expires" content="0">


    附:html页面中meta的作用
      meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:
      name 属性
      1、<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;
      2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词;
      3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容;
      4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者;
      5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
      其中的属性说明如下:
      设定为all:文件将被检索,且页面上的链接可以被查询;
      设定为none:文件将不被检索,且页面上的链接不可以被查询;
      设定为index:文件将被检索;
      设定为follow:页面上的链接可以被查询;
      设定为noindex:文件将不被检索,但页面上的链接可以被查询;
      设定为nofollow:文件将不被检索,页面上的链接可以被查询。
      http-equiv属性
      1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">
    和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言;
      又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;
      2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http://yourlink
      3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;
      4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;
      5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;
      6、<meta http-equiv="Pics-label" contect="">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;
      7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;
      8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。

    展开全文
  • 前端优化之——使用浏览器缓存

    千次阅读 2014-04-28 01:10:31
    如果用户会多次访问您的网站,那么静态资源的浏览器缓存可以节省用户的时间。缓存标头应当应用到所有可缓存的静态资源中,而不仅仅是应用到一小部分静态资源(例如,图片)中。可缓存的资源包括JS和CSS文件、图像...

    问题产生原因:

    如果用户会多次访问您的网站,那么静态资源的浏览器缓存可以节省用户的时间。缓存标头应当应用到所有可缓存的静态资源中,而不仅仅是应用到一小部分静态资源(例如,图片)中。可缓存的资源包括JS和CSS文件、图像文件及其他二进制对象文件(媒体文件和PDF文件等)。通常情况下,HTML不是静态资源,默认情况下不应被视为可缓存资源。您应考虑哪些缓存政策适用于您网站的HTML。

    解决办法:

    为您的服务器启用浏览器缓存。静态资源应该至少有一周的缓存有效期。广告或小部件这类的第三方资源也应该至少有一天的缓存有效期。

    对于所有可缓存资源,我们建议您进行以下设置:

    • Expires设为将来日期,至少为一周,最多为一年(我们倾向于设置Expires,而不设置Cache-Control: max-age,因为前者受支持的范围更为广泛)。请勿将其设为超过一年的将来日期,因为这样就违反了RFC准则。
    • 如果您知道资源将具体在何时发生变化,则可以设置较短的过期日期。然而,如果您认为资源“可能将要发生变化”,但又不知道具体时间,则应设置较长的过期日期,并使用网址指纹(如下所述)。
    Expires和Cache-Control: max-age标头

    这些标头用于指定相应时间段,浏览器可在指定的这段时间内使用已缓存的资源,而无需查看网络服务器是否提供了新版资源。这些缓存标头功能强大,没有任何应用条件限制。在设置这些标头并下载资源后,浏览器不会为资源发出任何GET请求,除非过期日期到期或达到时间最大值,亦或是用户清除了缓存。

    Last-Modifed和ETag标头

    这些标头可用于指定浏览器应如何确定用于缓存的文件是否相同。在Last-Modified标头中指定的是日期,而在ETag标头中指定的则可以是唯一标识资源的任意值(通常为文件版本或内容哈希值)。Last-Modified是功能“较弱”的缓存标头,因为浏览器会使用试探法来确定是否需要从缓存中抓取内容。

    借助这些标头,浏览器可以通过在用户明确重新加载页面时发出条件式GET请求,有效地更新其已缓存资源。除非您在服务器端更改资源,否则条件式GET请求不会返回完整的响应,因此相较于完整GET请求,此类请求的延迟较小。

    我应使用哪个缓存标头?

    对于所有可缓存资源,指定一个Expires或Cache-Control max-age以及一个Last-Modified或ETag至关重要。您没必要同时指定Expires和Cache-Control: max-age;或同时指定Last-Modified和ETag。


    使用网址指纹

    对于偶尔发生变化的资源,我们可以让浏览器缓存相应的资源,直到该资源在服务器上出现变化,而服务器则在此时通知浏览器有新版本可用。我们可以通过为每个版本的资源指定一个唯一网址来实现这一目的。例如,假定我们有一个名为“my_stylesheet.css”的资源。我们可以将文件重命名为“my_stylesheet_fingerprint.css”。当资源发生变化时,其指纹就会发生变化,对应的网址也会随之更改。网址一经更改,系统就会强制浏览器重新抓取资源。通过指纹,我们甚至可以为变化更为频繁的资源设置将来的过期日期。

    指纹识别的常用方法是使用对文件内容的哈希值进行编码的128位十六进制数。

    另一个策略是直接为新版应用创建新版目录,然后为版本目录中的各个版本放置所有资源。这样做的缺点是,如果各个版本中的资源未发生变化,则其网址将仍会更改以强制重新下载。使用内容哈希值不会遇到该问题,但这种方法稍微复杂一些。


    展开全文
  • 浏览器缓存

    千次阅读 2016-08-27 19:17:04
    原文:http://blog.csdn.net/u010425776/article/details/51090027什么是浏览器缓存?在《动态内容缓存》中我们知道,当不同用户请求相同数据时,动态内容...若使用浏览器缓存,则同一个用户请求相同的数据时,浏览器只
  • 浏览器缓存中的人:通过浏览器缓存中毒持续进行HTTPS攻击
  • 使用Ajax解决浏览器缓存问题

    千次阅读 2019-06-20 14:36:00
    浏览器第一次向服务器发起HTTP请求,服务器会返回请求的资源,并在响应头中添加一些有关缓存的字段,如cache-control expires等,之后浏览器再向服务器请求资源就可以...使用Ajax解决浏览器缓存问题 在一些项目中,...
  • 浏览器缓存 浏览器缓存分为两种类型: 强缓存:也称为本地缓存,不向服务器发送请求,直接使用客户端本地缓存数据 协商缓存:也称304缓存,向服务器发送请求,由服务器判断请求文件是否发生改变。如果未发生改变...
  • 海报:浏览器缓存中的人:通过浏览器缓存中毒持续进行HTTPS攻击
  • 使用浏览器缓存下js文件后,在动态添加script标签再次调用这个js文件是,浏览器是再次发送一次请求还是直接使用缓存的js文件??
  • 浏览器缓存问题

    千次阅读 2014-05-20 01:35:57
    本专题主要讲的是如何更好地使用浏览器缓存,同时包括了一些今后浏览器缓存的发展趋势,如:globalStorage等。 影响浏览器本地缓存的因素及解决方案 因素:子域名 具体描述:berg.sharej.com/img/123.gif 这个...
  • 摘要:当我们在做web开发特别是在调试js代码时,会经常使用的Google浏览器,这个时候就会碰到我们写的js代码不能及时生效的问题。这是因为我们所用的Google浏览器默认是有缓存的,但是有的时候缓存可能使我们调试中...
  • 浏览器缓存机制剖析

    2021-02-25 17:49:19
    缓存一直是前端优化的主战场,利用好缓存就成功了一半。本篇从HTTP请求和响应的头域入手,让你对浏览器缓存有个整体的概念。最终你会发现强缓存,协商缓存和启发...浏览器缓存里,Cache-Control是金字塔顶尖的规则,它
  • 浏览器缓存常识

    2018-12-18 09:54:06
    浏览器缓存,目的就是加速各种静态资源的访问。对于静态资源来说,浏览器不会缓存html页面的,所以你每次改完html的页面的时候,html都是改完立即生效的,不存在什么有缓存导致页面不对的问题。浏览器缓存的东西有...
  • 浏览器缓存机制

    2016-12-06 11:58:03
    浏览器缓存机制、Expires策略(http1.0)和Cache-control策略(http1.1)、Last-Modified/If-Modified-Since、ETag/If-None-Match
  • php 浏览器缓存

    2019-04-06 00:19:10
    浏览器缓存动态内容,缓存的内容在浏览器本地,而内容由web服务器生成,任何一方都不可能完成这一系列过程,他们之间有一种沟通机制,这就是缓存协商. 如何协商 当浏览器向web服务器请求内容时,服务器需要告诉浏览器...
  • 浏览器缓存详细原理

    千次阅读 2015-12-12 00:56:14
    为什么使用浏览器缓存缓存存在的内容缓存协商缓存协商的简单演示缓存相关的header缓存相关header之间的关系用户的不同操作用户不同操作对应浏览器的不同处理方式测试环境与线上环境取js方式不同导致的问题 ...
  • 浏览器缓存机制介绍与缓存策略剖析.pptx
  • js浏览器缓存.doc

    2011-11-22 15:22:42
    js浏览器缓存.docjs浏览器缓存.docjs浏览器缓存.docjs浏览器缓存.doc
  • ajax时提交如何避免浏览器缓存
  • 前端解决js、css等浏览器缓存问题

    千次阅读 2019-06-03 14:01:38
    我们没办法要求用户每次更新版本之后清理浏览器缓存,所以要做的就是不使用浏览器缓存。 1.关于js、css在每次引用之后添加版本号,使其能区分版本: <link rel="stylesheet" type="text/css...
  • jsp去除浏览器缓存

    2013-04-17 22:12:43
    jsp去除浏览器缓存
  • atitit。浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结.pdf

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 439,766
精华内容 175,906
关键字:

使用浏览器缓存