0

私が作業しているアプリケーションには、迅速な対応が必要です。クライアントは、フォームに記入して構成を作成することになっています。フォームを変更するたびに、検証のためにフォームがサーバーに送信されます。サーバーは新しいHTMLページで応答します。その後、ページはブラウザでレンダリングされます。私の仕事は、このプロセスにAjaxを追加して、ユーザーエクスペリエンスを向上させることです。これが私がこれまでにしたことです：

function doSubmitWithAjax(){
  var datum = $('#hiddenvars').serialize();
  var ajax=$.ajax({
    type : 'POST',
    url : 'frontend',
    cache : false,
    dataType : 'html', 
    data : datum 
  });
  ajax.success(function(XHR,text,jqXHR){
    var dom = document.createElement('div');
    dom.innerHTML=XHR;
    var bod = $('#hiddenvars',dom);
    $('#hiddenvars').replaceWith(bod);
  });
  ajax.error(function(jqXHR, textStatus, errorThrown){
    alert('request error '+errorThrown);
  });
 }

XHRは、サーバーから受信したHTMLページです。基本的には、フォーム（#hiddenvars）を取得して、DOMにすでに存在するフォームの代わりに配置したいだけです。

この関数doSubmitWithAjax()は、フォームに変更が発生するたびに起動されます。現在の実装はFirefoxとChromeで正常に機能します。IEでは、応答時間が長すぎます。いくつかのツールを使用して、何に時間がかかるかを調べましたが、replaceWith()FF（0.2秒）と比較して遅い（1.3秒）ことがわかりました。

私の質問：IEの応答時間を改善するにはどうすればよいですか？replaceWith（）の代わりに何を使用できますか？私は試し $('#hiddenvars').empty().replaceWith(bod);ました：DOMから置き換えられたフォームは必要ないのですが、それでも遅いからです。

ありがとう！

4

1 に答える 1

0

それは私には思われる：

var bod = $('#hiddenvars',dom);
$('#hiddenvars').replaceWith(bod);

hiddenvarsをそれ自体に置き換えます。次のようなものが高速かどうかを確認します。

var x = document.getElementById('hiddenvars');
var p = x.parentNode;
p.innerHTML = '';
p.appendChild(x);
p.appendChild(bod);

また、 bodへの参照を保持して、hiddenvarsを毎回削除して挿入するのではなく、その内容を毎回置き換えることもできます。

編集

残念ながら、要素に対してgetElementByIdを使用することはできません。それを見つけるには、 domのコンテンツをふるいにかける必要があります。を使用dom.getElementsByTagName('form')すると、少なくともフォームをふるいにかけるだけで済みます。

var form, forms = bod.getElementsByTagName('form');
var i = forms.length;
while (i-- && !form ) { 
  if (forms[i].id == 'hiddenvars') form = forms[i];
}

if (form) {
  var x = document.getElementById('hiddenvars');
  x.parentNode.replaceChild(form, x);
}
于 2012-04-03T12:41:21.410 に答える