javascript - 优化慢速搜索算法 - javascript、JSON 和 localstorage

Question

我正在使用 PHP、Javascript/jQuery/Ajax、JSON 和本地存储为我的公司构建一个客人列表应用程序。它将用于智能手机:主要是 Iphone 4。我使用 localstorage 作为我的缓存，因为应用程序的搜索部分必须在离线模式下工作。

我在搜索宾客名单时遇到了性能问题。

应用程序的流程如下所示(对于这个示例，我正在使用包含 600 位客人的客人列表)

1. 使用 PHP 使用 JSON 编码从服务器检索所有访客，并通过 AJAX 发送回 js。这很好用。

2. 使用 JSON.Parse 解析 PHP responseText(称为 phpData):

var parsedMysqlData = JSON.parse(phpData);

这为我们提供了一个包含 600 个对象的 JSON.Array，如下所示:

Object:  {
Id: Int
EventId: int
guestInfo: string
guestlist: string
guestName: string
reference: string
total: int
used: int
}

3. 使用 JSON.Stringify 将 JSON.Array 保存到用户的本地存储:

 localStorage.setItem(0, JSON.stringify(parsedMysqlData));

4. 当用户开始搜索时，我们获取他的搜索字符串，然后在本地存储中使用 JSON.parse 检索我们的客人列表，如下所示:

 var currentGuestlist = JSON.parse(localStorage.getItem(0));

然后使用这个 for 循环遍历我们的对象，尝试将他的搜索字符串与我们的客人数组 currentGueSTList 相匹配:

 for (i=0; i<currentGuestlist.length; i++) {
 // match 'currentGuestList[i]['name']' with what the user typed in search form 
}

出于某种原因，这在 iPhone 4 上会花费很长时间。搜索 600 个对象会在返回匹配项之前卡住 iPhone 大约 4 秒。

在将包含 JSON 对象的数组存储在 localStorage 中并使用 JSON 对其进行解析之前，我只是将无序字符串存储在 localStorage 中，它的运行速度要快得多。 JSON 对象广告结构存储在 localStorage 中的数据是至关重要的。所以我想速度问题与我使用 JSON 对象这一事实有关吗？如何以有组织的方式在 localStorage 中构建我的数据，同时仍保持与以前一样好的速度性能？

最后，非常感谢您提供有关使用哪些技术使此应用程序尽可能轻量级和快速的任何提示或建议。

Answer 1

您是从本地存储中获取每次搜索的列表吗？不要那样做，而是仅在需要时(每当它发生变化时)将其存储在本地存储中，并始终将其作为数据结构保存。

简单地使用对象而不是普通字符串不能成为缓慢的原因，因为 JavaScript 中的一切都已经是一个对象，因此它应该只会减慢一个常数因子。

此外，如果这是关于自动完成类型的行为，那么我建议您放慢搜索速度，并考虑如果用户在框中键入“Ma”，列表将被过滤，并且用户添加“tt” "对于 "Matt"，只需要考虑之前过滤的匹配项...