如何对 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。它有一个有趣的想法，即仅在用户向下滚动时构建列表，然后在用户滚动超出该范围时删除列表。