创建高性能AJAX网站的5条技巧和经验

在今天这篇技术分享文章中，我们不会介绍什么是AJAX，也不会介绍如何实现AJAX，但是我们会介绍5个非常实用的AJAX驱动网站开发中应该着重使用的开发技巧，如果大家也在web项目或者网站中大量使用AJAX技术的话，相信会对你提供非常有参考意义的指导性经验，希望大家喜欢！ 使用事件（Event）代理机制

对于基于AJAX的网站来说，我们可能常常需要保证事件所绑定的元素必须存在，很多初学AJAX的朋友经常碰到如下代码（jQuery）不起作用的情况：

1. 2. 3. 4. 5.

在大多数情况下，原因在于绑定的元素还没有存在于DOM中，打个比方，如果这里的id=\"ok\"是代码动态生成的，或者是AJAX加载产生的，在这段代码绑定这个点击动作之前，并没有真正的存在于DOM中，那么如何处理呢？

还记得老版本jQuery中的.live方法吧，他将事件直接绑定到body上，因此，如果你处理的元素属于动态生成的，.live可以帮你大忙，但是在最新版本的jQuery中，我们已经放弃了.live，也不推荐使用，转而使用.on来处理类似的情况，如下：

1. 2. 3. 4. 5. 6.

$(\"body\").on(\"click\", \"#ok\", function(event) { event.preventDefault();

// 其它你需要处理的操作 });

在上面的例子中，我们使用.on将事件绑定在body上，然后寻找对应的id=\"ok\"元素。

当然，不推荐大家直接绑定到body，如果id=\"ok\"元素拥有一个静态父层元素，你可以替换body，这样会带来更好的性能，毕竟DOM操作是非常消耗资源的。 使用Pub/Sub方式来处理事件

在AJAX开发中，我们应该使用Pub/Sub方式，即 publish（发布） 和 subscribe（订阅）模式。

这种模式的好处在于帮助你有效地解决了代码的松散依赖问题(Loose coupling)，下面是一个非常简单的AJAX代码： 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

jQuery.ajax({ url: '/gbtags' }).done(function(data) {

//发布一个页面加载完毕的信号，以便执行处理代码 publish(\"/page/loaded\", data); //参数是对应的时间和数据});

// ... 其它的处理数据的方法和模块，比如，根据数据生成相关的报表 subscribe(\"/page/loaded\", function(data) {

//一旦，接受到信号，立刻调用对应的处理方法 createDataReport(data);});

// ... 或者，根据数据生成一个饼图 subscribe(\"/page/loaded\", function(data) { //其它的处理方法，用来执行其它功能 createPieChart(data);});

以上代码中我们使用了一个最基本的subscribe和publish设计模式，当然，这里有一个相关的小插件，代码非常简单如下：

1. /*

2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25.

* jQuery Tiny Pub/Sub

* https://github.com/cowboy/jquery-tiny-pubsub *

* Copyright (c) 2013 \"Cowboy\" Ben Alman * Licensed under the MIT license. */

(function($) {

var o = $({});

$.subscribe = function() { o.on.apply(o, arguments); };

$.unsubscribe = function() { o.off.apply(o, arguments); };

$.publish = function() {

o.trigger.apply(o, arguments); };

}(jQuery));

这个代码可以帮助你生成相关发布/订阅的方法，如果你想了解更多，可以参考如下地址：https://github.com/cowboy/jquery-tiny-pubsub

web前端开发中，使用pub/sub模式的好处在于，调用一个发布Pub，可以激活N个订阅Sub的模块执行对应的功能，代码及其模块会相对非常好管理，数据和处理代码的分离，带给了我们更方便维护和更新代码的潜力。 处理AJAX的页面URL

一个优秀的AJAX网站，不单单是帮助快速的呈现内容，也得准确的展示当前页面的URL。这样能够非常方便的允许用户收藏当前的地址，或者向前向后来查询历史记录。

这里有一个非常好的jQuery插件帮助你处理AJAX页面URL：https://github.com/defunkt/jquery-pjax 或者HTML5的history API：

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

保证AJAX网站拥有一个正确的加载中提示

AJAX机制的网站或者应用对于实际的用户来说，有一个非常大的问题，浏览器不会显示当前页面AJAX加载部分的进度，因此一定要提供用用户一个非常便于理解的加载中提供，简单的可以是一个spinner，或者文字，总之一定要让你的用户了解目前的操作情况，这对于用户体验来说至关重要，问题随小，但是一定需要！

这里是一个最简单的实现方式：

http://www.gbin1.com/technology/jqueryhowto/20111106createajaxloading/ 通过URL来有效的缓存页面请求的结果

对于web或者网站来说，有效地减少请求的次数，绝对是大大的提高网站整体性能，所以使用一定的缓存技术来说，对于一个大量使用AJAX的网站至关重要。针对URL来做一定的缓存处理非常有必要，以下是一个非常简单的缓存处理代码机制演示：

1. 2. 3. 4. 5.

var cache = {};

针对指定URL来缓存数据 cache[url] = data; ... ...

//判断是否是缓存URL，如果已缓存，直接返回缓存数据，否则调用AJAX来请求数据

6. 7. 8. 9.

if(cache[url]) { // 回调缓存数据

return successCallback(cache[url]); }

10. 11. 12.

else {

// ... 执行AJAX来获取数据并且缓存 }

缓存操作不单单对于同一页面的重新加载有效，更有效地是对于用户使用返回或者前进按钮。相信这些性能辅助代码对于一个大访问量的服务器来说，肯定将非常受欢迎。

以上就是5个开发基于AJAX网站的小技巧，如果你能应用到你的网站或者项目当中去的话，相信你会开发的非常快乐，如果你也有其它的AJAX开发经验和技巧，请留言给我们分享，谢谢！