基于 javascript 的简单缓存思路

PHPABC JavaScript, WordPress 1,037 次浏览 , , , 没有评论

我在博客上用了很多的 javascript 代码, 来实现些简单的动画效果和 Ajax . 本意是为了好看, 增强用户体验但是也不得不有所牺牲: 1. 可能会增加数据库请求. 2. 无法使用浏览器前进后退按钮.

今天写个思路来缓解一下第一个问题 ( 数据库请求 ) 注意只是缓解. 因为不是真正的缓存.

我们知道所以的 Ajax 请求其实和不同的请求是没有什么两样的. 但它也有自己的特点:

1. 通过特定的 URL 请服务器请求数据.
2. 可能包含特定的头部信息 ( RequestHeader ) .
3. 服务器端有专门的代码来识别这些特殊请求, 并作相应处理.

Ajax 只是可能增加数据库请求, 并不是绝对会增加数据库请求. 这个要具体情况具体分析. 像我目前使用的这种分页方法就没有增加反而是减少请求.

我的思路是将请求返回的数据在展示的同时也放到一个数组变量里, 在下次请求的时候直接从这个缓存变量中取值. 因此, 这时 Ajax 的请求顺序变为: 先判断缓存如果有需要的数据则返回缓存数据, 没有则执行 Ajax 请求, 并在请求成功后缓存返回数据.

以 Ajax 分页 举例:

/* 建立一个用于缓存的数组 */
var ajaxpageCache = new Array();
function ajaxpage() {
	/* 取得链接 */
	var nav_a = $('#navigation a');
	/* 注册链接单击事件 */
	nav_a.click(function() {
		/* 获取链接值 */
		var url = $(this).attr('href');
		/* 判断缓存, 缓存中有值则使用缓存数据 */
		if (ajaxpageCache[url]) {
			$('#content').html(ajaxpageCache[url]);
			/* 平滑移动到头部的动画 */
			$.scrollTo('#header', 800);
			/* 重新注册该事件 */
			ajaxpage();
			/* 阻止打开链接 */
			return false;
		}
 
		/* ... 省略的代码 ... */
 
		/* 请求前 */
		var beforeSend = function() {
			/* ... 省略的代码 ... */
		};
 
		/* 请求失败时 */
		var error = function(request) {
			/* ... 省略的代码 ... */
		};
 
		/* 请求成功 */
		var success = function(data) {
			/* 展示(显示返回数据) */
			$('#content').html(data);
			/* 写入缓存 */
			ajaxpageCache[url] = data;
			/* ... 省略的代码 ... */
		};
 
		/* 启动 Ajax 请求 */
		ajax('POST', url, data, beforeSend, error, success);
		/* 阻止打开链接 */
		return false;
	});
}

这种缓存思路只是对重复使用相同数据的请求适用. 比如这种大页面翻页等.因为只要页面重新加载所有缓存内容将消失.

当然, 没有好处我也不会使用. 它的优点是在请求重复性数据时不产生数据库请求, 直接从客户端返回数据也让内容显示几乎没有延时. 在本地测试 Ajax 的时候可能并没有什么感觉, 一旦上传到网站, 在网速较慢的情况下就很明显的感觉慢.

考虑更高级一点的应用

1. 使用预加载, 即预先在’后台偷偷’将下一页的内容加载到缓存. (目前我还不想使用. 因为不是每个人都一定要看下一页的)
2. 定时清空指定的缓存数据.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go