Замена элемента DOM медленнее в IE по сравнению с FV или GoogleChrome - PullRequest
Новая
       17

Замена элемента DOM медленнее в IE по сравнению с FV или GoogleChrome

0 голосов
/ 03 апреля 2012

Приложение, с которым я работаю, нуждается в быстром ответе. Клиент должен создать конфигурацию, заполнив форму. Каждая модификация в форме отправляет форму на сервер для проверки. Сервер отвечает новой 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() медленнее (1,3 секунды) по сравнению с FF (0,2 секунды).

Мой вопрос: как я могу улучшить время отклика для IE? Что я могу использовать вместо replaceWith ()? Я попытался: $('#hiddenvars').empty().replaceWith(bod);, потому что мне не нужна замененная форма из DOM, но все еще медленно.

Спасибо!

1 Ответ

0 голосов
/ 03 апреля 2012

Мне кажется, что: 

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);
}
...