让网站飞起来01---浏览器缓存技术

标签: 网站 飞起来 浏览器 | 发表时间:2011-09-27 02:08 | 作者:PHP淮北 SuperLucky
出处:http://www.cnblogs.com/

前提说明:

缓存技术在在网站应用中非常重要,在减少服务器请求压力和用户浏览速度加块方面有着功不可没的功劳,

昨天在我《网站优化--让你的网页飞起来》里面有人问道关于浏览器缓存原理的问题,萌发了我研究缓存技术的兴趣,本文主要

介绍浏览器的缓存原理。

正文:

缓存技术:

在介绍缓存技术之前,我们先看一张LAMP网站的价格图,通过架构图我们可以很清晰的对网站整体缓存有一定认识

LAMP网站架构方案分析

                                                LAMP网站结构图

 

上面是一种经典的LAMP网站结构图,通过上图我们很清楚的看到一个网站从前台到服务端的整体关系,下面是我根据

上图画的一张LAMP缓存图:

image

                                  LAMP缓存图

从图中我们可以看到网站缓存主要分为五部分

  1. 服务器缓存:主要是基于web反向代理的静态服务器nginx和squid,还有apache2的mod_proxy和mod_cache模块
  2. 浏览器缓存:包括页面html缓存和图片js,css等资源的缓存
  3. PHP缓存:有很多免费的PHP缓冲加速工具,如apc eaccerlertor等
  4. 内存缓存:主要是采用memcache这种分布式缓存机制
  5. 数据库缓存:通过配置数据库缓存,以及数据存储过程,连接池技术等

下面重点介绍浏览器缓存原理:

自己的语言表达能力有限,还是先看图,比较直观也比较简洁:

image

从上图:我们可以知道浏览器缓存重要分为两个部分:

  1. 页面html的缓存
  2. 图片,css,js等缓存
浏览器缓存是基于把页面信息保存到用户本地电脑硬盘里,服务器缓存是基于把用户访问的页面保存到服务器上的硬盘里

 

先介绍页面缓存的原理

页面缓存状态是由http header决定的,一个浏览器请求信息,一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定,Cache-Control由HTTP/1.1规定。

自己画的工作原理图:

 

image

从图中我们可以看到原理主要分三步:

  1. 第一次请求:浏览器通过http的header报头,附带Expires,Cache-Control,Last-Modified/Etag向服务器请求,此时服务器记录第一次请求的Last-Modified/Etag
  2. 再次请求:当浏览器再次请求的时候,附带Expires,Cache-Control,If-Modified-Since/Etag向服务器请求
  3. 服务器根据第一次记录的Last-Modified/Etag和再次请求的If-Modified-Since/Etag做对比,判断是否需要更新,然后响应请求

相关参数说明;

Cache-Control的主要参数
Cache-Control: private/public Public 响应会被缓存,并且在多用户间共享。 Private 响应只能够作为私有的缓存,不能再用户间共享。
Cache-Control: no-cache:不进行缓存
Cache-Control: max-age=x:缓存时间 以秒为单位
Cache-Control: must-revalidate:如果页面是过期的 则去服务器进行获取。


Expires:显示的设置页面过期时间
Last-Modified:请求对象最后一次的修改时间 用来判断缓存是否过期 通常由文件的时间信息产生
If-Modified-Since :客户端发送请求附带的信息 指浏览器缓存请求对象的最后修改日期 用来和服务器端的Last-Modified做比较

Etag:ETag是一个可以 与Web资源关联的记号(token),和Last-Modified功能才不多,也是一个标识符,一般和Last-Modified一起使用,加强服务器判断的准确度

 

关于图片,css,js的缓存

这个主要通过服务器的配置来实现这个技术,如果使用apache服务器的话,可以使用mod_expires模块来实现:

编译mod_expires模块:

Cd  /root/httpd-2.2.3/modules/metadata

/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

编辑httpd.conf配置:添加下面内容

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 1 month"

ExpiresByType text/html "access plus 1 months"

ExpiresByType text/css "access plus 1 months"

ExpiresByType image/gif "access plus 1 months"

ExpiresByType image/jpeg "access plus 1 months"

ExpiresByType image/jpg "access plus 1 months"

ExpiresByType image/png "access plus 1 months"

EXpiresByType application/x-shockwave-flash "access plus 1 months"

EXpiresByType application/x-javascript      "access plus 1 months"

ExpiresByType video/x-flv "access plus 1 months"

</IfModule>

解释:第一句--开启服务

第二句--默认时间是一个月

在下面是关于各种类型的资源的缓存时间设置

更详细的说明可以参考我的《网站优化--让你的网页飞起来》关于这个模块的使用介绍

参考资料:http://www.infoq.com/cn/articles/etags

                 http://www.lifetyper.com/archives/000087.html
                 http://developer.yahoo.com/performance/rules.html
                 http://www.websiteoptimization.com/speed/tweak/cache/

                  http://www.mnot.net/cache_docs/

************************************************************************************

关于浏览器缓存的原理介绍就到这里,如果有什么错误,也希望各位指出,谢谢

作者: PHP淮北 发表于 2011-09-27 10:08 原文链接

评论: 5 查看评论 发表评论


最新新闻:
· 田忌赛马:Kindle 平板的竞争策略(2011-09-27 18:19)
· Linus Torvalds的软件开发管理经验(2011-09-27 18:14)
· 人人与艺龙建合资公司探索社会化旅游产品(2011-09-27 16:37)
· 佳品网获新一轮千万美元融资 英特尔投资领投(2011-09-27 16:32)
· 巨人网络将回购价值5000万美元股票(2011-09-27 16:32)

编辑推荐:前端开发中的MCRV模式

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [网站 飞起来 浏览器] 推荐:

让网站飞起来01---浏览器缓存技术

- SuperLucky - 博客园-首页原创精华区
缓存技术在在网站应用中非常重要,在减少服务器请求压力和用户浏览速度加块方面有着功不可没的功劳,. 昨天在我《网站优化--让你的网页飞起来》里面有人问道关于浏览器缓存原理的问题,萌发了我研究缓存技术的兴趣,本文主要. 在介绍缓存技术之前,我们先看一张LAMP网站的价格图,通过架构图我们可以很清晰的对网站整体缓存有一定认识.

让网站飞起来02--服务器缓存技术

- Bloger - 博客园-首页原创精华区
第一个介绍的是《让网站飞起来01---浏览器缓存技术》. 介绍服务器,肯定要先支持服务器在网站架构中的位置和作用,然后在介绍几种常见的服务器缓存配置. 对服务器在网站中位置作用有个大概了解:lamp架构图. 上图主要介绍了三种服务器,也是比较常用的服务器,下面就介绍这三种服务器的缓存配置. apache是作为正向代理服务器缓存,nginx和squid主要作为反向代理服务器缓存..

优良的数据库架构--让网站飞起来

- We_Get - 博客园-首页原创精华区
   很少谈架构方面的事情,主要是因为这确实是个对知识面和知识深度要求很高的领域,无论是开发语言的选择、代码的架构,服务器的搭配、网络的架构、数据库的架构还是第三方软件的选用等,每一方面都是个很大的方向,每个方向都值得一个人去研究一辈子;每每看到某某网站的首席架构师之类的人(不过很多是海绵派),总觉得那就是乐于做技术的人的终极目标,总是有种崇拜感.

强制Chrome浏览器Https加密访问网站

- HENG - 启光博客
  强制Chrome浏览器加密访问网站其实也就是强制Chrome浏览器http重定向到https,这种技巧对于经常修改Hosts的网友可能用处较大些. 比如修改Hosts后访问Twitter,多数情况下访问http://www.twitter.com是不能访问的,要输入https://twitter.com才行.

使用Chrome浏览器查看淘宝的IPhone版网站

- Pei - ITeye论坛最新讨论
      用IPhone手机访问http://m.taobao.com ,淘宝的设计已经达到了和APP相媲美的地步. 多次想查看其源码学习,单无奈用PC浏览器访问该网址,出现的是一个比较简化的wap2.0版本的. 经过若干的夜晚的冥思苦想,终于想出了解决方案.       1.IPhone和Android的浏览器都是基于webkit的,和Google Chrome的内核是一样的.

【转载】HTML5浏览器测试网站汇总

- - HTML5研究小组
我经常看到有很多人询问HTML5某个特性当前各浏览器的支持情况. 的确,因为HTML5内容庞大,特性众多,而浏览器的支持情况又混杂不一,随时都有可能变化,所以了解起来比较困难. 在这里,我汇总了一些常用的网站供前端开发者了解HTML5浏览器的支持情况. When Can IUse:图表经常更新,展示了HTML5、CSS3、SVG等浏览器的支持情况.

12 款用于测试网站浏览器兼容性的工具推荐

- Tim - ITeye资讯频道
想知道你的网站在各个浏览器中显示是否正常么. 下面列出了12款工具,你可以使用这些工具来测试你的网站,以确保使用各种各样浏览器的用户都能得到好的浏览体验. 英文原文:http://slodive.com/web-development/cross-browser-testing/. 感谢 jforever 投递这篇资讯.

微软新推浏览器安全评分网站 IE领先竞争对手

- 米十三 - cnBeta.COM
微软周二推出一个名为yourbrowsermatters.org的网站,对各种版本微软IE浏览器以及谷歌和Mozilla等竞争对手制作的浏览器进行安全评分. 这个新网站让浏览器通过一个安全功能检查表,然后对浏览器进行评分,最高评分是4. 毫不奇怪,微软IE9获得满分4分. 谷歌上个月推出的Chrome 14浏览器获得2.5分.

浏览器新技术,让网站像 App 一样推送通知

- - 爱范儿 · Beats of Bits
NBA 2014-15 赛季开始,第一天,火箭队以 108 比 90 大胜湖人. 看不了直播,早点知道结果也能让心里踏实些. 熬夜看球没什么,怕就怕自己期待的比赛在上班时间开始. 不得不专注工作,但又想第一时间知道比赛结果. 这时,消息推送就显得非常重要. 安心地查询工作相关的资料,认认真真码字、码代码.

测试Web应用或网站在IE11和其他浏览器中的实际使用性能

- - IE浏览器中文网站
W3C Web 性能工作小组与 Google、Mozilla 和其他社区领导者通力合作,制订了导航定时、资源定时、用户定时和性能时间线接口的标准化规范,可以帮助您了解在您的 Web 应用程序中导航、获取资源以及运行脚本的实际使用性能. 您可以使用这些接口来捕获并分析您的客户实际使用您的 Web 应用程序的体验,而不是依靠那种在人工环境中测试您的应用程序性能的合成测试.