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