与FV或GoogleChrome相比，IE中DOM元素的替换速度较慢

Replacing DOM element slow in IE compared to FV or GoogleChrome

本文关键字：元素 替换 速度 DOM FV GoogleChrome 相比 IE      更新时间：2023-09-26

我正在使用的应用程序需要快速响应。客户端应该通过填写表单来创建配置。表单上的每次修改都会将表单发送到服务器进行验证。服务器以一个新的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中被替换的表单，但仍然很慢。

谢谢！

在我看来：

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);
}
相关文章：