在浏览器中打开“工具internet选项”,对话框的中间位置,浏览历史记录,cookie的位置有删除和设置两个按钮,点击设置按钮,里面你可以设置缓存文件的大小,存在时间,还可以打开缓存文件目录。
浏览器的缓存分为强缓存和协商缓存。
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:
怎样解决css缓存的问步骤1/6
新建一个html文件,命名为test.html,用于讲解怎样解决css缓存的问题。
步骤2/6
在test.html文件中,使用div标签创建一个模块,用于测试。
步骤3/6
在test.html文件中,给div标签添加一个class属性,用于样式的设置。
步骤4/6
新建一个css文件,命名为test.css,在文件内通过class定义div的css样式 ,设置其宽度为200px,高度为200px,背景颜色为红色。
步骤5/6
在test.html文件中,在js标签内,使用write()方法输出css文件的link标签,并在css路径的末尾通过日期对象随机一个数字。
步骤6/6
在浏览器打开test.html文件,查看页面效果,css文件就不会缓存了。
1、使用div标签创建一个模块,创建一个css文件。
2、在js中,通过class获得div对象,使用write()方法输出css文件的link标签,并在css路径的末尾通过日期对象随机一个数字。