浏览器与CDN缓存

前端缓存分为浏览器缓存和cdn缓存

 

关于是否缓存，是浏览器缓存还是CDN缓存，缓存保留多长时间，由cache-control控制

请求：

响应：

特别说明：　

Cache-control: public 表示缓存的版本可以被代理服务器或者其他中间服务器识别（浏览器，cdn都能缓存）。

Cache-control: private 意味着这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存，公共的代理服务器不允许缓存（只能用户的浏览器缓存）。

Cache-control: no-cache 意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用，因为同样的URL，对应的内容会发生变化。

 

Cache-control: max-age

max-age 标签可以让我们更加容易的处理过期时间。我们只需要说，这份资料你只能用一个星期就可以了。

　　Max-age 使用秒来计量，如：

　　Cache-Control:max-age=645672

　　指定页面645672秒(7.47天)后过期。

　　Last-Modified

　　服务器为了通知浏览器当前文件的版本，会发送一个上次修改时间的标签，例如：

　　Last-Modified:Tue, 06 Jan 2015 08:26:32 GMT

这样浏览器就知道他收到的这个文件创建时间，在后续的请求中，浏览器会按照下面的规则进行验证：

　　1. 浏览器：Hey，我需要jQuery.min.js这个文件，如果是在 Tue, 06 Jan 2015 08:26:32 GMT 之后修改过的，请发给我。

　　2. 服务器：(检查文件的修改时间)

　　3. 服务器：Hey，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。

　　4. 浏览器：太好了，那我就显示给用户了。

　　在这种情况下，服务器仅仅返回了一个304的响应头，减少了响应的数据量，提高了响应的速度。

　　下图是按F5刷新页面后，页面返回304响应头。可以看到返回304后其他东西都没下载，都是缓存直接获取的

 

 

 

 

cdn缓存就是在浏览器和服务器间增加的一层缓存，缓存一些html、图片、css、xml等静态资源。

 

无cdn：

　   用户在浏览网站的时候，浏览器能够在本地保存网站中的图片或者其他文件的副本，这样用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了下载量意味着提高了页面加载的速度。

有cdn：

如果中间加上一层CDN，那么用户浏览器与服务器的交互如下：

客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接响应用户请求，此时一个完成http请求结束;如果数据已经过期，那么CDN还需要向源站发出回源请求(back to the source request),来拉取最新的数据。

 
1.CDN加速原理
通过动态域名解析，网友的请求被分配到离自己最快的服务器。CDN服务器直接返回缓存文件或通过专线代理原站的内容。
网络加速+内容缓存，有效提供访问速度

2.CDN缓存什么内容
缓存html、图片、css、xml等静态资源，不缓存含有？的动态地址、jsp、PHP，js文件也不缓存【除非特殊设置】
缓存原站返回HTTP状态为20*或304，不缓存其他状态(例如404，500，503)

4.CDN缓存内容的更新
a）用户首次请求，CDN从原站抓取后缓存，直到文件过期后有用户请求再次更新
b）程序主动通知CDN抓取

5.CDN缓存内容的有效期
a）原站apache吐出的静态文件：由apache的expire和header模块控制
主要两项：last-modified，cache-control：max-age
apache缺省配置，所有静态文件在cdn只缓存3600s【需要我们按需求调整被加速服务器的apache设置】
3600s后cdn失效，用户访问时会重新请求原站，如果没有变化，缓存失效周期自动延长10%。
b）原站jsp或php吐出的动态内容（url形式必须是静态的）
由程序控制last-modified，cache-control：max-age public ，apache的设置将不起作用
cdn根据这两项判断是否需要到原站更新内容

 

 页面缓存优化：http://www.cnblogs.com/futan/archive/2013/04/21/cachehuancun.html

设置优良的网站缓存机制方法

有很多的方法可以让你的网站缓存更加友好：

• 使用一致的 URLs — 这是使用缓存的黄金法则.如果你为不同的用户提供、或是从不同的网站采集相同的内容到不同的网站页面，请使用一条URL地址。For example,如果你一旦使用了 “/index.html” ，对于其他的 HTML 文件URL也采用相同的命名方式.
• 使用图片库 来查阅不同地方使用的图片.
• 创建缓存保存不常变动的图片和页面 ，可以把参数 Cache-Control: max-age 报头参数的值设置得大些.
• 为规律更新的网页设置定时缓存， 可以设置合适的 max-age or expiration 时间参数.
• 如果一个资源（尤其是可下载文件）改变了，把它的名字也改了. 用这种方式，你可以让缓存在很长的一段时间之后才过期，并且保证提供的版本是正确的。链接到改资源的网页需要将缓存时间设置得短一些.
• 除非必要，不要随意修改文件. 如果随意修改,报头参数 Last-Modified 将始终使用最新的日期.比如,当你升级网站,不要复制整个站点; 只要移动你修改的文件即可.
• 只在有必要的地方使用cookies — cookies 非常难缓存, 大多数情况也没必要缓存.如果你一定需要有cookies,将它们限制在动态页面中.
• 尽量少地使用 SSL安全协议 — 因为加密的页面将不会采用共享缓存的方式储存，尽量在需要的时候使用SSL, 并且在SSL页面尽量少用图片.
• 用 REDbot检测你的网站页面— 本教程所描述的大多数概念在使用该工具时都很有用.

怎样写动态网站的缓存脚本

默认情况下，大多数的脚本语言将不会返回验证器（Last-Modified or ETag 响应头）或者缓存更新提示（Expires or Cache-Control）。同时，一些真正的脚本语言是动态的（意味着他们对每个请求返回不同的响应资源），大多数站点（像搜索引擎和数据库驱动站点）都能从缓存脚本从受益。

一般来讲，如果在间隔的时间段（不管是相差几天还是几分钟），发出相同的请求，能够复写一个脚本输出，那么它就能够缓存。如果脚本输出的内容会随着URL的改变而改变，也是可以进行缓存的；但是如果脚本输出要依赖cookies，认证等，则不能缓存。

• 写一个优良的缓存脚本的最好办法是：不管内容何时更改，都将脚本的内容输出到普通的文件中，以便网站的服务器能够想其他网页一样对待它，从而生成和使用缓存的验证器。记住只对那些已经改变的文件进行写入，这样可以让Last-Modified 的值被保护起来.
• 另一个让脚本可以缓存的方法是，设置一个有关存活时间的响应头，值设置为脚本能够使用的时间。虽然 Expires设置可以实现这一点,但是设置Cache-Control: max-age是最简单的， 它可以在一次请求发生后的一段时间里又发出新的请求。
• 如果你不能做到这些,你将需要让脚本生成一个验证器,然后对浏览器发出请求中的 If-Modified-Since 和/或 If-None-Match做出响应. 通过分析HTTP 头你能够做到这一点，只要在适当的时候返回304(缓存读取)响应状态即可。

小技巧：

• 如非必要，尽量不使用 POST方式. 大多数的缓存无法保持对POST方式响应，你过你想通过路径或请求（GET）发送一些信息，缓存能够在未来存贮信息。
• 除非整个内容是要呈现给完整的用户，否则不要用URL来传递用户的身份信息.
• 不要指望来自一个用户的所有请求都是从同一个主机发出的, 因为缓存经常一起产生作用.
• 设置响应头中的Content-Length （用于描述HTTP消息实体的传输长度）. 它允许你的脚本可以在长连接通信时仍有响应，并且客户端可以通过一个TCP/IP连接请求不同的资源,而不是为一次请求的都建立一个通信