⑴ 如何有效利用浏览器本地缓存
资源在浏览器端的本地缓存可以通过Expires和Last-Modified返回头信息进行有效控制。
1)Expires告诉浏览器在该指定过期时间前再次访问同一URL时,直接从本地缓存读取,无需再向服务器发起http请求;
优点是:浏览器直接读取缓存信息无需发起http请求。
缺点是:当用户按F5或Ctl+F5刷新页面时浏览器会再次发起http请求。
2)当服务器返回设置了Last-Modified头,下次发起同一URL的请求时,请求头会自动包含If-Modified-Since头信息,服务器对静态内容会根据该信息跟文件的最后修改时间做比较,如果最后修改时间不大于If-Modified-Since头信息,则返回304。告诉浏览器请求内容未更新可直接使用本地缓存。(注意:只对静态内容有效,如js/css/image/html等,不包括动态内容,如JSP)
优点:无论用户行为如何都有效;
缺点:仍需向服务器发起一次http请求;
对IE来说,本地缓存一般是在这个位置:
C:\Documents and Settings\<user name>\Local Settings\Temporary Internet Files
下面我用一个图片缓存的例子来说明,如何结合这两个参数来有效利用本地缓存,例子中图片存储在一个分布式文件系统,需要通过特定API才能获取而非直接存储在服务器上静态文件:
response.setContentType("image/jpeg");
response.setHeader("Cache-Control", "public");
response.setHeader("Pragma", "Pragma");
//本地缓存10分钟过期
response.setDateHeader("Expires", System.currentTimeMillis()+10*60*1000);
//设置Last-Modified
response.setDateHeader("Last-Modified", System.currentTimeMillis());
//判断请求中的If-Modified-Since头信息
if(request.getHeader("If-Modified-Since") == null){
//首次访问或者用户按Ctl+F5,从文件系统重新读取图片
//...get file from dfs
} else {
//返回304,告诉浏览器使用本地缓存
response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);
}
这种做法的一个缺点就是假设用户在第一次图片下载过程中网络有异常,下载的照片不完整,那用户在刷新,甚至重启浏览器后还是无法获取完整的照片,可能会影响极小部分用户的体验,虽然可以通过ctl+f5忽略Last-Modified或者清空缓存重新下载照片但是大部分普通用户可能不了解这些技巧。
参考资料:
http://longrujun.name/index.php/2009/03/04/etag%E5%92%8Cexpires/
⑵ 关于浏览器缓存
首先浏览器缓存分为 内存缓存 和 文件缓存 。
内存缓存是浏览器自己控制的,不受 Cache-Control 影响,跟计算机内存空间大小有关,并且关闭浏览器就会消失。
文件缓存 就是我们常说的浏览器缓存。
文件缓存分为2种: 强制缓存 和 协商缓存 。
强制缓存 就是通过Header上配置Cache-Control:public,max-age=300这种形式实现的,Cache-Control可以客户端在请求Header配置,也可以服务端在响应Header配置。
强制缓存 比较适合用在变化频率比较低的文件上,比如图片,js,css都可以,通常我们都使用这种缓存再配合文件hash后缀实现缓存文件的即时更新。
协商缓存 是一种服务端控制文件缓存的策略,机制是服务端会根据最新更改时间和文件标识判断响应的时候是否要返回内容。虽然每次都会向服务端发起请求,但是如果服务端确定缓存,会返回很少响应内容。
这种方式比较适合需要频繁更新的文件,需要配合Cache-Control:no-cache阻止强制缓存。另外html不要配置强制缓存,通常我们请求的html文件地址不会加hash。
协商缓存 主要通过2组Header标签让客户端与服务端确认来达成:首先服务端在响应的时候会加上 Last-Modified 和 Etag ,前者表示文件最后更新时间,后者表示文件唯一标识;然后客户端再次请求的时候会带上 If-Modified-Since 和 If-None-Match ,值分别跟服务端的 Last-Modified 和 Etag 一致。
参考:
浏览器缓存
⑶ 浏览器缓存和服务器缓存
一、浏览器缓存
浏览器缓存即http缓存;浏览器缓存根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分,分别是 强制缓存 和 协商缓存 。
浏览器第一次请求资源的时候服务器会告诉客户端是否应该缓存资源,根据响应报文中HTTP头的缓存标识,决定是否缓存结果,是则将请求结果和缓存标识存入浏览器缓存中。如下图:
1.强制缓存 :浏览器会对缓存进行查找,并根据一定的规则确定是否使用缓存。
强制缓存的缓存规则?
HTTP/1.0 Expires 这个字段是绝对时间,比如2018年6月30日12:30,然后在这个时间点之前的请求都会使用浏览器缓存,除非清除了缓存。
这个字段的缺点就是只会同步客户端的时间,这就有可能修改客户端时间导致缓存失效。
HTTP/1.1 cache-Control 这个是1.1的时候替换Expires的,它会有几种取值:
public :所有内容都将被缓存(客户端和代理服务器都可缓存)
private :所有内容只有客户端可以缓存, Cache-Control的默认取值
no-cache :客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
no-store :所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
max-age=xxx (xxx is numeric) :缓存内容将在xxx秒后失效
比如max-age=500,则在500秒内再次请求会直接只用缓存。
优先性:cache-Control > Expires
如果同时存在,cache-Control会覆盖Expires。
这个字段的缺点就是:
如果资源更新的速度是秒以下单位,那么该缓存是不能被使用的,因为它的时间单位最低是秒。
如果文件是通过服务器动态生成的,那么该方法的更新时间永远是生成的时间,尽管文件可能没有变化,所以起不到缓存的作用。
上图中浏览器缓存中存在该资源的缓存结果,并且没有失效,就会直接使用缓存的内容。
上图中浏览器缓存中没有该资源的缓存结果和标识,就会直接向服务器发起HTTP请求。
2.协商缓存: 浏览器的强制缓存失效后(时间过期),浏览器携带缓存标识请求服务器,由服务器决定是否使用缓存。
服务器决定的规则?
控制协商缓存的字段有 Last-Modified / If-Modified-Since 和 Etag / If-None-Match。
①Last-Modified 是服务器返回给浏览器的本资源的最后修改时间。
当下次再次请求的时候,浏览器会在请求头中带 If-Modified-Since ,即上次请求下来的 Last-Modified 的值,
然后服务器会用这个值和该资源最后修改的时间比较,如果最后修改时间大于这个值,则会重新请求该资源,返回状态码200。
如果这个值和最后修改时间相等,则会返回304,告诉浏览器继续使用缓存。
② Etag 是服务器返回的一个hash值。
当下次再次请求的时候,浏览器会在请求头中带 If-None-Match ,即上次请求下来的 Etag 值,
然后服务器会用这个值和该资源在服务器的 Etag 值比较,如果一致则会返回304,继续使用缓存;如果不一致,则会重新请求,返回200。
二、服务器缓存
上面是一个简单的流程图:
用户1访问A页面,服务器解析A页面返回给用户1,同时在服务器内存上做一定映射,把A页面缓存在硬盘上面
用户2访问A页面,服务器直接根据内存上的映射找到对应的页面缓存,直接返回给用户2,这样就减少了服务器对同一页面的重复解析
服务器缓存和浏览器缓存的区别:
服务器缓存是把页面缓存到服务器上的硬盘里,而浏览器缓存是把页面缓存到用户自己的电脑里
Nginx服务器
Nginx是一个高性能的HTTP和反向代理服务器。具有非常多的优越性:
在连接高并发的情况下,Nginx是Apache服务器不错的替代品,Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。
Nginx提供了expires、etag、if-modified-since指令来实现浏览器缓存控制。
nginx -s reload#重新加载配置文件
nginx -s reopen#重新打开log文件
nginx -s stop#快速关闭nginx服务
nginx -s quit #优雅的关闭nginx服务,等待工作进程处理完所有的请求
Nginx设置静态文件的缓存过期时间
location ~.*\.(js|css|html|png|jpg)$ {
expires 3d;
}
expires 3d;//表示缓存3天
expires 3h;//表示缓存3小时
expires max;//表示缓存10年
expires -1;//表示永远过期。
如果设置为-1在js、css等静态文件在没有修改的情况下返回的是http 304,如果修改返回http 200
对于静态资源会自动添加ETag,可以通过添加etag off指令禁止生成ETag。如果是静态文件,那么Last-Modified值为文件的最后修改时间。
在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置。在常用的缓存设置里面有两种方式,都是使用add_header来设置:分别为Cache-Control和Pragma。
location ~ .*\.(css|js|swf|php|htm|html )$ {
add_header Cache-Control no-store;
add_header Pragma no-cache;
}
nginx gzip压缩
使用 gzip 压缩可以降低网站带宽消耗,同时提升访问速度。
主要在nginx服务端将页面进行压缩,然后在浏览器端进行解压和解析,
目前大多数流行的浏览器都迟滞gzip格式的压缩,所以不用担心。
默认情况下,Nginx的gzip压缩是关闭的,同时,Nginx默认只对text/html进行压缩
gzip on;
ersio #开启gzip压缩输出
gzip_http_vn 1.0 ;#默认1.1
#其中的gzip_http_version的设置,它的默认值是1.1,就是说对HTTP/1.1协议的请求才会进行gzip压缩
#如果我们使用了proxy_pass进行反向代理,那么nginx和后端的upstream server之间是用HTTP/1.0协议通信的。
gzip_vary on ;
#和http头有关系,加个vary头,给代理服务器用的,有的浏览器支持压缩,有的不支持,
#所以避免浪费不支持的也压缩,所以根据客户端的HTTP头来判断,是否需要压缩
gzip_comp_level 6;
#设置gzip压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大 1-9
gzip_proxied any;
#Ngnix作为反向代理的时候启用
#expample:gzip_proxied no-cache;
# off – 关闭所有的代理结果数据压缩
# expired – 启用压缩,如果header中包含”Expires”头信息
# no-cache – 启用压缩,如果header中包含”Cache-Control:no-cache”头信息
# no-store – 启用压缩,如果header中包含”Cache-Control:no-store”头信息
# private – 启用压缩,如果header中包含”Cache-Control:private”头信息
# no_last_modified – 启用压缩,如果header中包含”Last_Modified”头信息
# no_etag – 启用压缩,如果header中包含“ETag”头信息
# auth – 启用压缩,如果header中包含“Authorization”头信息
# any – 无条件压缩所有结果数据
gzip_types text/html ;#压缩的文件类型
#设置需要压缩的MIME类型,非设置值不进行压缩
#param:text/html|application/x-javascript|text/css|application/xml
gzip_buffers 16 8k; #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间
#设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间
# param1:int 增加的倍数
# param2:int(k) 后面单位是k
# example: gzip_buffers 4 8k;
# Disable gzip for certain browsers.
gzip_disable “MSIE [1-6].(?!.*SV1)”; #ie6不支持gzip,需要禁用掉ie6
⑷ 怎样把浏览器里的视频缓存
浏览器会自动保存视频缓存,点开缓存又可以播放或删除视频。在电脑中找到缓存的视频,可以重复观看,节省流量,也可以删除它,节约电脑存储空间。下面介绍通过“Internet选项”和“选项”两种比较常用的办法。
⑸ 浏览器缓存原理简述
缓存文件存储方式有2种:内存和硬盘。为了提高文件读取速度,浏览器优先读内存中的缓存文件(如果存在的话)。
按照本地缓存阶段和协商缓存阶段分类:
缓存的策略由http消息头Cache-Control确定,以下为各个值对应的效果:
Cache-Control:public :所有内容都将被缓存(客户端和代理服务器都可缓存)
Cache-Control:private :所有内容只有客户端可以缓存
Cache-Control:no-cache :默认值。客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
Cache-Control:no-store :所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
Cache-Control:max-age=xxx (xxx is numeric) :缓存内容将在xxx秒后失效
HTTP1.0 的特性,标识该资源过期的时间点,它是一个绝对值,格林威治时间(Greenwich Mean Time, GMT),即在这个时间点之后,缓存的资源过期; 优先级:Cache-Control 优先级高于 Expires ,为了兼容,通常两个头部同时设置;浏览器默认行为:其实就算 Response Header 中没有设置 Cache-Control 和 Expires,浏览器仍然会缓存某些资源,这是浏览器的默认行为,是为了提升性能进行的优化,每个浏览器的行为可能不一致,有些浏览器甚至没有这样的优化。
Last-Modified (Response Header)与 If-Modified-Since (Request Header)是一对报文头,属于 http 1.0。
If-Modified-Since 是一个请求首部字段,并且只能用在 GET 或者 HEAD 请求中。Last-Modified 是一个响应首部字段,包含服务器认定的资源作出修改的日期及时间。当带着 If-Modified-Since 头访问服务器请求资源时,服务器会检查 Last-Modified,如果 Last-Modified 的时间早于或等于 If-Modified-Since 则会返回一个不带主体的 304 响应,否则将重新返回资源。
ETag 与 If-None-Match 是一对报文头,属于 http 1.1。
ETag 是一个响应首部字段,它是根据实体内容生成的一段 hash 字符串,标识资源的状态,由服务端产生。If-None-Match 是一个条件式的请求首部。如果请求资源时在请求首部加上这个字段,值为之前服务器端返回的资源上的 ETag,则当且仅当服务器上没有任何资源的 ETag 属性值与这个首部中列出的时候,服务器才会返回带有所请求资源实体的 200 响应,否则服务器会返回不带实体的 304 响应。
⑹ 浏览器缓存的强缓存
浏览器的缓存分为强缓存和协商缓存。
1、浏览器在加载资源时,先根据 这个资源的一些http header 判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源, 不会发请求到服务器 。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器。
2、当强缓存没有命中的时候, 浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存 ,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源。 强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。
3、当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据。
这里仅介绍一下强缓存的实现:
强缓存是利用Expires或者Cache-Control这两个http response header实现的,它们都用来表示资源在客户端缓存的有效期。
Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改下客户端时间,就能影响缓存命中的结果。所以在http1.1的时候,提出了一个新的header,就是Cache-Control,这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示,如:Cache-Control:max-age=315360000
这两个header可以只启用一个,也可以同时启用,当response header中,Expires和Cache-Control同时存在时,Cache-Control优先级高于Expires:
⑺ 浏览器怎么设置缓存功能
,即所记的网页多少。缓存设置里大概是缓存清理和缓存容量设置,这个可以根据你的需要进行设置。如果长时间不进行清理,可能手机会变慢。
再解释cookie
指你在网页对你输入的文字信息的记忆,它的设置大概就是删除和记忆方式选项,有些不想叫人知道的网页搜索记录,可以经过它删除
GSM是指二代移动通信,说白了就是2G网,我们一般使用的就是它的网络。
GSM数据大概就是通信数据。它怎么用???我没明白你什么意思?怎么打电话?
gprs是手机在GSM网络中的一种应用,通常称为2.5G,是通过增加相应的功能实体和对现有的基站系统进行部分改造来实现分组交换的一种业务。用法就是开通GPRS业务,一般选择包月使用。
不知道我的解释怎么样,但希望你明白
⑻ 九种浏览器端缓存方法知多少
一、http缓存
http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件,chrome控制台下的Frames即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求,在有缓存的情况下判断过程主要分3步:
判断expires,如果未过期,直接读取http缓存文件,不发http请求,否则进入下一步
判断是否含有etag,有则带上if-none-match发送请求,未修改返回304,修改返回200,否则进入下一步
判断是否含有last-modified,有则带上if-modified-since发送请求,无效返回200,有效返回304,否则直接向服务器请求
如果通过etag和last-modified判断,即使返回304有至少有一次http请求,只不过返回的是304的返回内容,而不是文件内容。所以合理设计实现expires参数可以减少较多的浏览器请求。
二、websql
websql这种方式只有较新的chrome浏览器支持,并以一个独立规范形式出现,主要有以下特点
Web Sql 数据库API 实际上不是HTML5规范的组成部分;
在HTML5之前就已经存在了,是单独的规范;
它是将数据以数据库的形式存储在客户端,根据需求去读取;
跟Storage的区别是: Storage和Cookie都是以键值对的形式存在的;
Web Sql 更方便于检索,允许sql语句查询;
让浏览器实现小型数据库存储功能;
这个数据库是集成在浏览器里面的,目前主流浏览器基本都已支持;
websql API主要包含三个核心方法:
openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
transaction : 这个方法允许我们根据情况控制事务提交或回滚。
executeSql : 这个方法用于执行真实的SQL查询。
openDatabase方法可以打开已经存在的数据库,不存在则创建
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五个参数分别为:数据库名、版本号、描述、数据