Если отбросить тот факт, что вы полагаетесь на раздутый медленный поезд некомпетентности разработчика, которым является jQuery, оставшаяся часть вашей проблемы состоит в том, что вы передаете HTML с сервера вместо просто ДАННЫХ, а затем используете внутренний HTML посредством jQuery. идиотская, тупая, невежественная чушь, обертка "$.HTML".
Каждый раз, когда вы используете InnerHTML или, что еще хуже, бессмысленную тупую обертку мусора jQuery, браузер должен передать ВСЮ DOM в обратный анализатор только для того, чтобы перестроить ВЕСЬ документ, чтобы можно было вставить разметку, сохраняя при этом любые другие изменения, внесенные JavaScript, а также для анализа любых новых открытий/закрытий, которые могут быть добавлены, а затем повторного анализа этого нового HTML в новый DOM, который затем необходимо отобразить. Это полдюжины или более шагов, которые браузер должен предпринять, что, по сути, отправляет его в «никогда-никогда».
Вот почему в тот момент, когда вы видите что-то вроде этого:
document.getElementById('bio').innerHTML = x.responseText;
или его бессмысленно избыточный эквивалент jQuery.
$('#био').html(данные);
Вы можете гарантировать, что 1) оно будет работать медленно и препятствовать навигации по всей странице во время обновления... 2) человек, написавший это, вероятно, недостаточно знает HTML, CSS или JavaScript, чтобы писать JavaScript, и 3 ) серверный код также не является победителем, поскольку он удаляет разметку вместо того, чтобы просто отправлять данные в более разумном формате, таком как CSV, JSON или даже XML.
Что, вероятно, СЛЕДУЕТ сделать, так это создать новую разметку с использованием DOM, вообще минуя этап синтаксического анализа, но это означает, что нужно переписать все, что выпадает из серверного кода.
Я не уверен, что jQuery справится с этим, но если вы работали с ванильным JavaScript, вы МОЖЕТЕ избежать НЕКОТОРЫХ проблем, создав новый DIV, добавив в него данные через внутренний HTML, а затем выполнив родительскийNode.replace для полностью замените DIV. Это позволяет парсеру работать с DIV вне живого DOM, а это значит, что весь документ не нужно анализировать повторно, и документ остается активным до окончательной замены. Это не ПРАВИЛЬНОЕ исправление, но этого может быть достаточно.
Предполагая, что существует НАДЛЕЖАЩИЙ XMLHttpRequest или эквивалент ActiveX с нормализованным параметром обратного вызова, vanilla.js для этого будет выглядеть примерно так:
Код:
_.eventAdd(window, 'load', function() {
var oldBio = _d.getElementById(bioDiv);
function getBioData() {
_.ajax({
status : {
'200' : function(x) {
var newBio = _.make('#bio', { innerHTML : x.ResponseText });
oldBio.parentNode.replaceChild(newBio, oldBio);
oldBio = newBio;
setTimeout(getBioData, 5000);
}
},
request : { 'post', 'get_bio.php', 'bio=106' }
});
}
});
Код (разметка): Выполнив внутреннийHTML
до мы помещаем его в действующий DOM, полностью заменяя исходный DIV, мы не заставляем браузер анализировать весь DOM.
Существует также проблема, заключающаяся в том, что вы устанавливаете интервал для регулярного вызова, а это означает, что вы МОЖЕТЕ получить стек событий. НИКОГДА не устанавливайте интервал AJAX-запроса, устанавливайте новый тайм-аут только тогда, когда вы ЗНАЕТЕ, что существующий завершился! Это занимает больше пяти секунд, теперь у вас есть несколько запросов в канале, накладывающих друг на друга, чтобы запускаться «когда это возможно», пока вы по сути не подвергнетесь DDOS-атаке!
Если бы вы использовали мою библиотеку elementals.js, полное переписывание того, что вы делаете, выглядело бы примерно так:
function xBio400(x) { var oldBio = document.getElementById('bio'), newBio = document.createElement('div'); newBio.id = 'bio'; newBio.innerHTML = x.responseText; oldBio.parentNode.replaceChild(newBio, oldBio); } Код (разметка): Хотя это дает мне представление о новом типе атрибута размещения... «заменить».
Тем не менее, то, как вы передаете данные (в виде готового HTML) и как вы используете постоянный интервал, — это то, что здесь действительно является ошибкой. Вам действительно следует передавать ТОЛЬКО данные, а не разметку, а затем использовать DOM, используя document.createElement и document.createTextNode.
