4

指定したサブネットの IP アドレス.ajax()を返すjQuery 呼び出しを実行しています。.aspx ページでList<string>a を使用して値を返します。[WebMethod]ASP.NET のビルトイン JSON シリアライザーは、JavaScript で使用されている実際の JSON を返す魔法のように機能します。

サーバー側の時間をプロファイリングしましたが、リストを入力して返すのに約 8 ミリ秒かかるため、サーバー側のコードは問題ではありません。

ただし、Ajax 呼び出しが開始されると、Internet Explorer では、返された IP アドレスの小さなリストをリストボックスに入力するのに 3 秒以上かかる場合があります。Firefox では、リストボックスは基本的に即座に入力されます。

ボトルネックがどこにあるのか完全にはわかりません。私の推測では、問題は IE6 の JavaScript エンジンにあると思われますが、それでも 255 個のリスト項目を追加するだけなら、それほど時間はかからないはずです。

なぜこれが起こっているのか、誰かが私を正しい方向に向けることができますか?

サンプルコード

$.ajax({
          type: "POST",
          url: $("Example.aspx/GetIPsOnNetwork",
          data: "{NetworkID: " + networkID + "}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(data) {
            $('#ipAddresses').empty();
            // Loop through each IP address and add it to the listbox
            $.each(data.d, function(){
                var ip = this.toString();
                $(document.createElement('option')).attr('value', ip).text(ip).appendTo('#ipAddresses');
            });
          },
          error: function(msg) {
            alert('Error: ' + msg);
          }
        });
4

4 に答える 4

4

レンダリングの問題である可能性があります。これを試して

      success: function(data) {
        // Loop through each IP address and add it to the listbox
        var list = $("<select />");
        $.each(data.d, function(){
            var ip = this.toString();
            list.append($('<option />').val(ip).text(ip));
        });
        $('#ipAddress').empty().append(list.find('option'));
      },

基本的には、オプションをダミーリストにロードしてから、コンテンツをipAddressesリストに追加します。

私が変更したもう1つのことはdocument.createElement(...)。内部を見ると$('<option />')、createElementが実行されます。

最後に、を呼び出す代わりにデータをリストに追加することを選択しますoption.appendTo('#ipAddress')。これにより、毎回ipAddress要素を検索する必要があります。

于 2009-04-03T22:19:13.820 に答える
2

IEでオプション要素を作成し、DOMに1つずつ追加する速度の違いかもしれないと思います。

この行で

$(document.createElement('option')).attr('value', ip).text(ip).appendTo('#ipAddresses');

あなたは試すことができます

var optionArray = [];
for (var i= 0; i < this.length; i++)
{
      optionArray[i] = $('<option>').val(ip).text(ip);
}
$('#ipAddresses').empty().append(optionArray.join(""));

またはこれ（data.dはオブジェクトですよね？）

var optionArray = [];
var i = 0;
$.each(data.d, function(key, value)
{
      optionArray[i++] = $('<option>').val(value).text(value);
});
$('#ipAddresses').empty().append(optionArray.join(""));

jQueryのappend（）に関するこの記事が役立つかもしれません

于 2009-04-03T22:29:41.453 に答える
2

推奨される DOM 作成メソッドを使用して要素を作成すると、非標準でありながらどこにでもある .innerHTML プロパティと比較して非常に時間がかかります。私はかつて、約 100 行のテーブルを更新する必要がありましたが、経験したように、ブラウザーが古いほど、要素作成を使用した操作が遅くなりました。可能であれば、ダミーの SELECT 要素を作成し、手動で OPTION 要素の連結 HTML 文字列を入力してから、ダミーの SELECT オブジェクトで .innerHTML を使用します。その後、この要素を自由に使用できます (.replaceChild などを使用)。

これは要素の作成を行う非標準的な方法ですが、.innerHTML は非常に長い間使用され、高速です。

于 2009-04-03T23:15:25.463 に答える
1

jquery の追加は、IE7 の innerHTML に比べて非常に遅いことがわかりました。Firefox と Chrome は、append または innerHTML を使用して同じ速度でレンダリングされるようです。これはサラリーマンがDOMの作成方法について言っていたことと関係があるのか​​もしれません。

于 2009-07-07T19:47:56.830 に答える