浏览器缓存专题
查看原文: 览器缓存是很重要的,一次交互,有95%以上的时间是在处理前端的,如果能提高前端的性能,对提高整个系统的性能是很有帮助的。本专题主要讲的是如何更好地使用浏览器缓存,同时包括了一些今后浏览器缓存的发展趋势,如:globalstorage等。 影响浏览器本地缓存的因素及解决方案 因素:子域名 具体描述:berg.sharej.comimg123.gif+这个图片,如果按照+sharej.combergimg123.gif这样的方式访问,需要重新加载一次。类似的,大小写不同也会造成重复下载 解决办法:统一使用一个地址可避免重复下载。 因素:meta头 具体描述:meta+http-equiv="pragma"+content="no-cache"或者使用脚本输出了要求浏览器不缓存网页的header 解决方案:合理的按照需求使用。 因素:firefox的cache机制 具体描述:即使是应用了no-cache+头,firefox还是要先cache+,再根据过期设定决定是否使用。via 解决方案:一般无需解决。因为firefox缓存这些文件只是用作前进后退。 因素:随机文件名 具体描述:可使用abc.js？+来使浏览器重新加载js文件。一种更安全的方是abc_v0.js来使浏览器重加载(可通过地址重写实现)。 解决方案:在js、css文件升级后,必要时可进行此处理,避免用户浏览器缓存的旧的文件。 因素:innerl 具体描述:ie6在window.onload中用innerl动态插入图片的时候会忽略cache策略,一次加载多张相同图片时,会重复请求。 解决方案:避免在window.onload中使用innerl插入图片。 因素:ie6无法缓存背景图片的b g 具体描述:ie6的+""temporay+internet+files"设置为"每次访问此页时检查"时,+背景图片将无法被缓存,在鼠标滑过链接背景图片更换时,会产生闪烁。 解决方案:doc ment.execcommand("backgro ndimagecache",+false,+tr e)；在ie6下执行这条语句即可,firefox执行时会报错(可用try-cache解决)。用expression也可以达到这个效果最好是用css+sprites解决问题。 在浏览器端预先缓存图片的实现 使用image对象缓存 使用javascript新建一个新的image对象,然后将希望预装载的图片url传递给此对象。通过onload事件句柄同步装载到页面上。demo 通过数组(arrays)缓存多个图片 定义了变量i以及名为imageobj的image对象。然后定义了新数组images[],每一个数组元素将存储需要预装载图片的地址来源。最后,使用一个for循环来遍历整个数组,并对每个元素指定image对象,以此将图片都预装载到缓存中。 demo 上面这两种方法都需要浏览器支持javascript才能正常缓存。 使用css隐藏需要缓存的图片 采用css的display:none；属性来隐藏图片。 demo 使用css中的背景图片 可以为一个元素定义背景样式,然后将背景图片移到不可见的位置。ie6在""temporay+internet+files"设置为"每次访问此页时检查"时无效。 demo 上面这两种方法都需要浏览器正常解释css才能正常使用 相册中图片的预加载 上面提到了四种预先缓存图片的方法,个人感觉第二种方法最好。因为使用第二种方法可以方便的控制加载的时间,不会影响之前页面的打开速度,而且只要支持js的浏览器都能正常使用。 demo 这个例子比较简单,但是已经能实现预加载了,在打开缩略图页面时,只要开启了缓存的浏览器,大图就会在页面结束后逐一被载入。但是一些具体的加载策略还没有做考虑。 鼠标滑过背景图的切换 如前所述,ie6的+"temporay+internet+files"设置为"每次访问此页时检查"时,+背景图片将无法被缓存,在鼠标滑过链接时(不管是否有背景图切换),会产生闪烁。其他浏览器都能很好的通过超链接的hover来设置背景图片实现鼠标滑过,背景图切换。 ie6闪烁的原因 首先总结ie6中发生闪烁的原因,最后给出一个解决方案。 定义一个这样的样式: .example+a{ backgro nd-image: rl(some+image)；