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的引用，以便每次只替换其内容，而不是每次都删除和插入隐藏变量。

编辑

不幸的是，您不能在元素上使用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 回答