首页 > 其他 > 详细

页面缓存的范畴及原理

时间:2015-04-30 21:38:23      阅读:99      评论:0      收藏:0      [点我收藏+]

      谈到页面性能优化,缓存机制是其中非常重要的一环。缓存可以使页面尽可能快地得到需要的文档,具有减轻带宽、降低服务的负荷、提高用户体验等功能。随着高级浏览器,尤其是移动端的发展,可用的缓存范畴逐渐变大,简单地将其分为三类:

一、Application Cache

    这是H5中的新特性,可以将页面资源缓存在本地,当页面处于离线状态下依然可以使用。使用方法很简单,大致分为2步:

<html mainfest="mainfest.appcache">
CACHE MANIFEST
# 23-01-2015 v0.1
/style.css
/logo.gif
/script.js
  
NETWORK:
*
  
FALLBACK:
/server/ /fallback.html

但是目前来说,离线存储存在一些坑,曾经为了提高页面性能,使用过该技术,带来了很多问题,很快就删除不再使用,简单总结下目前离线存储的特点:

  • 每个包含manifest的网页都会隐式添加到appCache中
  • 一个文件找不到,整个appCache均被丢弃
  • 即使online,也会使用appCache
  • 更新页面,appCache文件本身必须修改,才能让浏览器刷新缓存文件
  • 关于appCache的缺点可以查看文档:App cache is a Douchebag    using the application cache

二、localStorage

     在移动端,这个API被广泛使用,将一些长期不会发生改变的资源、历史记录保存在本地,通过在本地读取加速网页的访问速度。需要注意的是localStorage只能存储字符串,如果要缓存对象的话,需要通过JSON.stringify进行转换,使用的时候再进行解析。常用API如下:

a.方法:  getItem()、setItem()、key()、removeItem()、clear()
 
b. 事件:storage
 
function changeStorage() {
    window.addEventListener(’storage’, )
}
 
注意:storage事件只有在新窗口打开时,数据真正发生变化时才会触发。也就是storage事件主要用于监听localStorage/sessionStorage数据变化时,通知其他窗口或者标签页,实现数据变更通知。

三、HTTP

       谈到缓存会默认是HTTP缓存。首先看看HTTP缓存的大致流程:

技术分享

 在上图展示了HTTP使用缓存的过程,其中(3)、(4)环节存在是否判断,当均为true的时候才会直接使用本地缓存,其他情况请看下图。但是还是存在下面两个疑问:

  1. 如何判断是否足够新鲜
  2. 如何进行新鲜度验证?

技术分享

3.1 文档新鲜度判断

    在HTTP response中可能存在两个属性:Expires、Cache-Control,这两个属性决定了文档的有效期。如果当前时间满足有效期,则直接读取缓存文档,返回给客户端。

  1. 关于Expires: HTTP/1.0+定义该该属性,存储的是绝对日期,绝对日期依赖于计算机的时钟时间。因为不同主机的时间中存在差异,所以使用Expires可能会造成一些问题。
  2. 关于Cache-Control:HTTP/1.1中增加了该属性,该属性定义的时间是相对时间,因此就没有Expires的问题。Cache-Control存在如下几个常用属性
  • no-cache: 除非对资源进行新鲜度检验,否则客户端不会使用已缓存的资源
  • no-store: 缓存应尽快从存储器中删除,因为可能存在敏感信息
  • max-age=number: 缓存在number时间内是新鲜的

3.2 新鲜度检验

   新鲜度检验有两种方式:If-Modified-Since、If-No-Match,这两个数据存在于HTTP request Header中,通过与服务器端的对比来判断文档是否发生改变。

  1. If-Modified-Since:基于时间的比较,response Header与之对应的是Last-Modified。
  2. If-No-Match:基于实体标签进行比较,response Header与之对应的是Etag

3.3 缓存控制设置

   通过在服务器端进行缓存的设置。以Apache为例,可以使用mod_headers、mod_expires、mod_cern_meta设置Expires或Cache-Control。

页面缓存的范畴及原理

原文:http://www.cnblogs.com/bigbrother1984/p/4469694.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!