利用客户端缓存对网站进行优化

简介:

很多人首先会想从服务器缓存方面着手对程序进行优化,许多不同的服务器缓存方式都有他们自己的特点,像我曾经参与的一些项目中,根据缓存的命中率不同使用过 Com+/Enterprise Libiary Caching/Windows服务,静态文件等方式的服务器端缓存和 HTTP Compression技术,但客户端缓存往往却被人们忽略了,即使服务器的缓存让你的页面访问起来非常地快,但她依然需要依赖浏览器下载并输出,而当你加入客户端缓存时,会给你带来非常多的好处.因为她可以对站点中访问最频繁的页进行缓存充分地提高 Web 服务器的吞吐量(通常以每秒的请求数计算)以提升应用程序性能和可伸缩性。
一个在线购物调查显示,大多数人愿意去商店排队,但在在线购物时却不愿意等待。Websense调查公司称多达70%的上网者表示不愿意在页面读取上超过10秒钟。超过70%的人会因为中途速度过慢而取消当前的订单。

基础知识

1) 什么是”Last-Modified”?

在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间,格式类似这样:

Last-Modified: Fri, 12 May 2006 18:53:33 GMT

客户端第二次请求此URL时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过:

If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT

如果服务器端的资源没有变化,则自动返回 HTTP 304 (Not Changed.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

2) 什么是”Etag”?

HTTP 协议规格说明定义ETag为“被请求变量的实体值” ( 参见 —— 章节 14.19)。 另一种说法是,ETag是一个可以与Web资源关联的记号(token)。典型的Web资源可以一个Web页,但也可能是JSON或XML文档。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端,以下是服务器端返回的格式:

ETag: "50b1c1d4f775c61:df3"

客户端的查询更新格式是这样的:

If-None-Match: W/"50b1c1d4f775c61:df3"

如果ETag没改变,则返回状态304然后不返回,这也和Last-Modified一样。本人测试Etag主要在断点下载时比较有用。

Last-Modified和Etags如何帮助提高性能?

聪明的开发者会把Last-Modified 和ETags请求的http报头一起使用,这样可利用客户端(例如浏览器)的缓存。因为服务器首先产生 Last-Modified/Etag标记,服务器可在稍后使用它来判断页面是否已经被修改。本质上,客户端通过将该记号传回服务器要求服务器验证其(客户端)缓存。
过程如下:
1. 客户端请求一个页面(A)。
2. 服务器返回页面A,并在给A加上一个Last-Modified/ETag。
3. 客户端展现该页面,并将页面连同Last-Modified/ETag一起缓存。
4. 客户再次请求页面A,并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
5. 服务器检查该Last-Modified或ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304和一个空的响应体。

示例代码

下面的例子描述如何使用服务器端代码去操作客户端缓存:

复制代码
Code
1 // 默认缓存的秒数
2 int secondsTime = 100;
3
4 // 判断最后修改时间是否在要求的时间内
5 // 如果服务器端的文件没有被修改过,则返回状态是304,内容为空,这样就节省了传输数据量。如果服务器端的文件被修改过,则返回和第一次请求时类似。
6 if (request.Headers[ " If-Modified-Since "] != null && TimeSpan.FromTicks(DateTime.Now.Ticks - DateTime.Parse(request.Headers[ " If-Modified-Since "]).Ticks).Seconds < secondsTime)
7 {
8 // 测试代码,在这里会发现,当浏览器返回304状态时,下面的日期并不会输出
9 Response.Write(DateTime.Now);
10
11 response.StatusCode = 304;
12 response.Headers.Add( " Content-Encoding ", " gzip ");
13 response.StatusDescription = " Not Modified ";
14 }
15 else
16 {
17 // 输出当前时间
18 Response.Write(DateTime.Now);
19
20 // 设置客户端缓存状态
21 SetClientCaching(response, DateTime.Now);
22 }
23
24 /**/ /// <summary>
25 /// 设置客户端缓存状态
26 /// </summary>
27 /// <param name="response"></param>
28 /// <param name="lastModified"></param>
29 private void SetClientCaching(HttpResponse response, DateTime lastModified)
30 {
31 response.Cache.SetETag(lastModified.Ticks.ToString());
32 response.Cache.SetLastModified(lastModified);
33 // public 以指定响应能由客户端和共享(代理)缓存进行缓存。
34 response.Cache.SetCacheability(HttpCacheability.Public);
35 // 是允许文档在被视为陈旧之前存在的最长绝对时间。
36 response.Cache.SetMaxAge( new TimeSpan( 7, 0, 0, 0));
37 // 将缓存过期从绝对时间设置为可调时间
38 response.Cache.SetSlidingExpiration( true);
39 }
复制代码


如果你的缓存是基于文件的方式,如XML或http中的.ashx处理,也可以使用下面的基于文件方式的客户端缓存:

复制代码
SetFileCaching
1 /**/ /// <summary>
2 /// 基于文件方式设置客户端缓存
3 /// </summary>
4 /// <param name="fileName"></param>
5 private void SetFileCaching(HttpResponse response, string fileName)
6 {
7 response.AddFileDependency(fileName);
8 // 基于处理程序文件依赖项的时间戳设置 ETag HTTP 标头。
9 response.Cache.SetETagFromFileDependencies();
10 // 基于处理程序文件依赖项的时间戳设置 Last-Modified HTTP 标头。
11 response.Cache.SetLastModifiedFromFileDependencies();
12 response.Cache.SetCacheability(HttpCacheability.Public);
13 response.Cache.SetMaxAge( new TimeSpan( 7, 0, 0, 0));
14 response.Cache.SetSlidingExpiration( true);
15 }
16
复制代码



本文转自94cool博客园博客,原文链接:http://www.cnblogs.com/94cool/archive/2010/04/08/1707678.html,如需转载请自行联系原作者
相关文章
|
2月前
|
缓存 NoSQL Redis
【Azure Redis 缓存】Redission客户端连接Azure:客户端出现 Unable to send PING command over channel
【Azure Redis 缓存】Redission客户端连接Azure:客户端出现 Unable to send PING command over channel
126 3
|
10天前
|
缓存 弹性计算 应用服务中间件
如何使用 Wordpress?托管, 网站, 插件, 缓存
如何使用 Wordpress?托管, 网站, 插件, 缓存
|
12天前
|
缓存 JavaScript 前端开发
Vue 3的事件监听缓存如何优化性能?
【10月更文挑战第5天】随着前端应用复杂度的增加,性能优化变得至关重要。Vue 3 通过引入事件监听缓存等新特性提升了应用性能。本文通过具体示例介绍这一特性,解释其工作原理及如何利用它优化性能。与 Vue 2 相比,Vue 3 可在首次渲染时注册事件监听器并在后续渲染时重用,避免重复注册导致的资源浪费和潜在内存泄漏问题。通过使用 `watchEffect` 或 `watch` 监听状态变化并更新监听器,进一步提升应用性能。事件监听缓存有助于减少浏览器负担,特别在大型应用中效果显著,使应用更加流畅和响应迅速。
32 1
|
21天前
|
存储 缓存 监控
HTTP:强缓存优化实践
HTTP强缓存是提升网站性能的关键技术之一。通过精心设计缓存策略,不仅可以显著减少网络延迟,还能降低服务器负载,提升用户体验。实施上述最佳实践,结合持续的监控与调整,能够确保缓存机制高效且稳定地服务于网站性能优化目标。
38 3
|
1月前
|
缓存 监控 负载均衡
在使用CDN时,如何配置缓存规则以优化性能
在使用CDN时,如何配置缓存规则以优化性能
|
1月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
98 6
|
1月前
|
缓存 NoSQL Java
瑞吉外卖项目笔记+踩坑2——缓存、读写分离优化
缓存菜品、套餐数据、mysql主从复制实现读写分离、前后端分离
瑞吉外卖项目笔记+踩坑2——缓存、读写分离优化
|
1月前
|
存储 缓存 前端开发
缓存技术在软件开发中的应用与优化策略
缓存技术在软件开发中的应用与优化策略
|
2月前
|
存储 缓存 算法
缓存优化利器:5分钟实现 LRU Cache,从原理到代码!
嗨,大家好!我是你们的技术小伙伴——小米。今天带大家深入了解并手写一个实用的LRU Cache(最近最少使用缓存)。LRU Cache是一种高效的数据淘汰策略,在内存有限的情况下特别有用。本文将从原理讲起,带你一步步用Java实现一个简单的LRU Cache,并探讨其在真实场景中的应用与优化方案,如线程安全、缓存持久化等。无论你是初学者还是有一定经验的开发者,都能从中受益。让我们一起动手,探索LRU Cache的魅力吧!别忘了点赞、转发和收藏哦~
48 2
|
2月前
|
存储 缓存 NoSQL
Redis 7.0如何优化缓存命中率?
优化Redis缓存命中率的关键策略包括:合理设计键值结构以节省内存并提高查找效率,如使用哈希表存储共享前缀的键;采用LRU算法淘汰不常用键,保持热门数据;优化查询模式,避免大键与大量小键,使用`SCAN`代替`KEYS`减少负载;为临时数据设置过期时间自动清理;监控性能并适时调整策略;利用不同数据类型的优势;使用Pipeline减少网络延迟;限制键扫描范围;优化Lua脚本执行效率;以及根据应用场景合理配置Redis参数。这些方法有助于提升Redis性能和缓存效率。