如何调整AJAX重型应用程序的性能

Question

我正在开发一种图像/配置文件搜索应用程序，几乎完全基于AJAX。 主页面基本上显示配置文件图像，并允许用户过滤/搜索和分页。

用户滚动时分页工作，因此界面必须非常快 。 在主页面上只显示6个（可能是9个，但绝对不是更多）图像，因此用户将滚动很多。 我目前正在使用非常简单的JS缓存来存储所有请求的结果，以防用户决定返回...在这种情况下，我只是将所有内容从缓存中拉出而不是查询服务器。

客户端缓存

我想到的一个选项是预加载前面的10个页面并将它们存储在缓存中。

但我最大的问题是过滤/搜索 ，因为这完全改变了发送到服务器的查询类型。 我的过滤器不是很复杂，只有大约6-7个字符串/数字/枚举属性。

现在，如果我想在缓存中进行所有过滤，我将不得不复制所有搜索逻辑并从服务器获取所有数据（而不仅仅是我正在显示的数据），因此我可以在客户端过滤结果。

这里提出了一个问题，我应该以某种方式使缓存持久吗？ 可能将它存放到cookie中？

服务器缓存？

一个建议可能是在服务器上使用memcached并将其存储在那里。 我肯定会尽可能地缓存掉所有结果，但这并不能使服务器免于处理加载和加载的AJAX请求。

我正在开发Rails 3上的这个应用程序，即使我喜欢它，我也不会说它是世界上最快的东西。 这给我的另一个选择是创建单独的Rack / Sinatra应用程序来处理AJAX请求。 我的意思是来自主查询的请求，而不是所有AJAX。

S3的图像？

这个应用程序的很大一部分是图像，即使它们大多是小缩略图（除非用户想要显示更大）。

目前，我没有带宽问题。 我的VPS主机为我提供了200GB，这应该足够了（我希望）。 问题是加载速度。 如果我将所有图像上传到S3并从那里加载它们会不会有帮助，还是仅仅适用于较大的文件？ 我要加载大量100x150像素的图片 ，一般不超过50kB。

Answer 1

你看过SlickGrid吗 ？ 它有一个有趣的想法，只有当用户向下滚动时才构建列表，但随着用户滚动出该范围，删除列表。