Question

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

我在搜索一个访客列表时遇到了性能问题。

应用程序的流程看起来像这样（对于这个examaple，我正在使用guestlist，其中包含600位客人）

1. 使用带有JSON的PHP编码从服务器检索所有来宾，并通过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：

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

4。当用户开始搜索时，我们获取他的搜索字符串，然后使用localstorage中的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秒钟，然后返回比赛。

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

最后，我们非常感谢您提供有关使用哪种技术使这款应用尽可能轻巧，快速的技巧或建议。

Answer 1

您是否从本地存储中每次搜索获取列表？不要这样做，而是仅在需要时（无论何时更改）将其存储在本地存储中，并始终将其保存为数据结构。

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

此外，如果这是关于自动完成的一种行为，那么我建议您放慢搜索速度，并且还要考虑如果用户在“Ma”框中键入，则列表会被过滤，并且用户会添加“tt” “对于”马特“，只需要考虑先前过滤的匹配...

Answer 2

也许您的设置更适合使用WebSQL数据库，而不是在本地存储中存储JSON对象。 WebSQL现已弃用，但在webkit浏览器中得到了很好的支持。我正在几个项目中使用它并取得了良好的效果。

您可以在此处详细了解：http://html5doctor.com/introducing-web-sql-databases/

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

2 个答案: