工具提示：根据请求预加载数据或 ajax答案

【问题标题】：Tooltip: Preload data OR ajax on request工具提示：根据请求预加载数据或 ajax
【发布时间】：2012-08-25 07:41:06
【问题描述】：

我有一个家庭列表，其中每个家庭 - 在滚动时 - 显示一个工具提示，其中包含有关单个家庭的其他信息（居住地信息和该地点的 3 张图片）。

那么最佳实践（性能）是什么？是在开始时预加载所有数据还是仅在需要时（翻转时）才 ajax 请求数据？

请注意，页面已经包含 3 个 select mysql_queries，工具提示的数据提取需要另外 2 个。

查询（考虑到搜索复杂性）：

原始 3 个查询：

SELECT * FROM news ORDER BY bDate DESC LIMIT 5;
SELECT * FROM family ORDER BY created DESC LIMIT 5;
SELECT bplace.placeID, bplace.sName, bplace.countryID, bcountry.regionID FROM bplace, bcountry WHERE bplace.countryID = bcountry.countryID ORDER BY created DESC LIMIT 5;

Tooltip 2 查询（预加载方式）：

while(...){

$allFamilies[] = $row["familyID"];

}

$allFamilies = implode(',',$allFamilies);

SELECT sName FROM bplace WHERE placeID IN ($allfamilies);
SELECT url FROM images WHERE placeID IN ($allfamilies);

工具提示 2 查询（ajax 方式）：

SELECT sName FROM bplace WHERE placeID='1';
SELECT url FROM images WHERE placeID='1';

【问题讨论】：

我认为 ajax 将是一个不错的选择，因为它不需要重新加载页面，如果所有家庭数据都很大，预加载可能会很昂贵
这完全取决于您想要的用户体验。您甚至可以混合并最初加载基本数据，然后在初始页面加载后加载所有翻转内容。此外，对于您的翻转查询，您似乎可以减少到单个查询，例如 SELECT bplace.sName, images.url FROM bplace JOIN url ON bplace.placeID = images.placeID WHERE placeID = ?

标签： php mysql ajax

【解决方案1】：

我不确定您的问题是否有一个通用的、明确的答案。

要衡量某种性能，您必须考虑更多变量，例如

每页将加载多少个工具提示，
他们的数据有多大返回，
client & server 和 server & 之间的连接怎么样数据库，
查询需要多长时间，
有多少用户浏览同时浏览这些页面，
涉及缓存

还有更多。

前段时间我在一个项目中遇到了一个非常相似的问题（它也与工具提示有关），我采用了 ajax 方式，主要是因为我想尽可能加快初始页面加载速度（脚本持续时间更短，更少html 大小）。如果许多用户同时浏览所有工具提示，那么 ajax 方式实际上会消耗更多的“性能”，但在这个项目中显然不是这种情况。

【讨论】：

【解决方案2】：

您只需要考虑您的应用程序会增长到多大。如果你有几千行，你的 IN 查询真的会变慢。 ajax 查询将始终快速加载，因为它们是直接查找。

此外，如果可以缓存数据，将 ajax 调用直接提供给 CDN 将使其几乎立即加载。如果您不断提取数据并需要扩展 ajax 方法，也可以在 keystore 上使用，因为它是主键查找。

【讨论】：

【解决方案3】：

我认为这都是带有一点常识的偏好。预加载的一千行将需要一些时间来抓取、循环然后显示（使页面大小变大几 kb）。如果只是抓取了几行，那么只抓取这些行而不是等待 AJAX 加载它们可能是有意义的。

要考虑的另一件事是，数据是否会改变，并且会经常改变。如果工具提示数据不断变化，那么 AJAX 可能是无论如何都要走的路。如果它大部分是静态的，那么将它们全部放在一起可能是有意义的。

Ajax 可能需要时间，但除非您的服务器容量非常大并且您没有相应地增长，否则这些请求只需要几分之一秒。

最终，这是个人喜好。什么对你来说更容易？对每个工具提示进行硬编码会更容易，还是使用 javascript 调用工具提示数据更容易？选择更容易且似乎更适合您的网站的内容。

【讨论】：