ajaxでhtmlを返して画面に描画…凄く遅い

--
jQuery.ajax({
url:url,
data:parms,
success:function(response){
---

httpリクエストを投げて、HTMLデータ（<option>～</option>が10～1万行ほど）を
受け取り、それを
jQuery('#displist').html(response) で描画しています。
（select内のoptionになります）
<option>～</option>の数が少ない時は問題ないのですが、1000を超えたあたりから
目に見えて重く、表示に時間がかかり、困っています。
サクッと表示させる方法はないものでしょうか…？

No.3 ベストアンサー 回答者： taloo 回答日時： 2014/02/01 02:58

jQueryを使わずにJavaScript（DOM）ネイティブのinnerHTMLを使えば最速です。

フォームフィールドのinnerHTMLはブラウザ依存がでる可能性があるので、
<select>のinnerHTMLではなく、<select>の親要素のinnerHTMLに、"<select 略><option>～</select>"として入れる方がいいと思います。

イベントハンドラを登録された要素を削除するとメモリリークになる可能性があるので注意してください。
イベントハンドラを削除してからinnerHTMLに代入すると問題ありません。

No.2 回答者： hitomura 回答日時： 2014/01/28 17:20

> 別途csvの画面などは用意する予定です。

なるほど、ならばそのCSV画面用に送られるCSVデータを使ってoptionタグを作ってやればいいのかもしれません。

あとはお客様に選択肢1万件のselectを試させて「やっぱりこれは使いづらいな」と思わせ、インターフェースの変更を認めていただくところですが、……
> ごもっともなのですが、この作りなので仕方ないのですよね…。
で言っている「仕方ない」理由を説明していただければもう少し適切な回答がつくと思います。

No.1 回答者： hitomura 回答日時： 2014/01/28 15:25

おそらくデータ通信が一番のボトルネックでしょうから、HTMLタグ込みで送受信するのではなくoptionタグを生成できるだけのデータを送受信してブラウザ側でそのデータからoptionタグを作ってやるのが……

……って、選択肢が（最大）1万ですか！？

想像してみてください、1万個の選択肢を見ながら選択するデータを見つけなくてはならないとしたら、あなたはどう思いますか？

検索で候補を絞り込ませるなりデータのカテゴリ分けを施すなりして選択肢を減らすほうがいいのではないかと思います。

この回答へのお礼

ごもっともなのですが、この作りなので仕方ないのですよね…。
別途csvの画面などは用意する予定です。

お礼日時：2014/01/28 16:18