3

PHP、Javascript / jQuery / Ajax、JSON、localstorageを使用して、会社のゲストリストアプリを作成しています。これはスマートフォンで使用されます。主にiPhone4です。アプリケーションの検索部分はオフラインモードで動作する必要があるため、キャッシュとしてlocalstorageを使用しています。

ゲストリストを検索しているときにパフォーマンスの問題が発生します。

アプリのフローは次のようになります（この例では、600人のゲストを含むゲストリストを使用しています）

1. PHPエンコードとJSONを使用してサーバーからすべてのゲストを取得し、AJAXを介してjsに送り返します。これは正常に機能します。

2. JSON.Parseを使用してPHPresponseText（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でデータを整理された方法で構造化するにはどうすればよいですか？

最後に、このアプリを可能な限り軽量かつ高速にするために使用するテクニックに関するあらゆる種類のヒントやアドバイスをいただければ幸いです。

4

2 に答える 2

0

おそらく、JSON オブジェクトをローカル ストレージに格納する代わりに、WebSQL データベースを使用する方が適していると思います。WebSQL は非推奨になりましたが、webkit ブラウザーでは十分にサポートされています。いくつかのプロジェクトで良い結果を得て使用しています。

詳細については、http: //html5doctor.com/introducing-web-sql-databases/をご覧ください。

于 2012-12-06T09:08:57.117 に答える