Почему $.ajax () постепенно зависает?

Question

[Антон Тихомиров]

Приветствую всех!

Клепаю проект в свободное от работы время, но недавно совершенно неожиданно для себя столкнулся со странной проблемой. Ее суть заключается в следующем: на каждой странице сайта имеются ссылки, при переходе по которым контент грузится в определенный блок на сайте аяксом. То есть к ним на onclick подвешен метод с аяксом. Таких ссылок достаточно много, то есть юзеры будут щелкать много и уверенно) Сам код особо ничем не примечателен:

$.ajax ({
	
	method: 'get',
	url: 'ajax.php',
	cache: true,
	data: { mod:mod, id:id, },
	success: function (c) {
		$('#content').html (c);
	},
	
	}).done (function () {
		return false;
	});
	
});

Все работает отлично, но я уже начал готовиться выкинуть его в продакшн, поэтому решил пощелкать все более основательно и с ужасом обнаружил, что с каждым кликом по таким ссылкам контент грузится все более медленно. 3-4 ссылки летают, с 5 наблюдаются уже секундные затыки, а далее браузер (любой) просто люто виснет на минуту. После того, как он отходит, при следующем клике картина повторяется. Помогает только перезагрузка страницы (если, конечно, браузер в данную минуту не висит))) ). Такое ощущение, что он что-то там грузит в кеш, который постепенно переполняется, или пишет что-то в какой-то стек. Скорее всего лучшим решением будет что-то очищать после каждого вызова аякса, вот только что и от чего?)
Уже и кэш аякса включал/отключал, c async игрался, кидал рандомный параметр в url - ничего не помогает. Проц при этом не грузит, память не жрет.

О, и что самое интересное - если пропустить функцию через setInterval (), то она запускает саму себя совершенно без затыков, как и подобает аяксу.

Буду благодарен любой помощи, так как меня уже холодок пробирает: занимался проектом два года, а из-за такой мелочи работа с ним почти невозможна...

Заранее благодарен!

Comments

[Артур Борденюк]

Если очень много блоков, которые приходят аяксом, почему бы не подумать на счет ember/angular ?

[Антон Тихомиров]

@HighQuality Да даже самих блоков-то не так много, больше их запусков. Например, листалка фоток со стрелками вперед/назад...

[Артур Борденюк]

@Acuna если есть время и желание ковыряться с ember/angular/etc -- рекомендую :)

[Антон Тихомиров]

@HighQuality спасибо, но это только разве что для саморазвития. А тут определенно есть проблема и хочется решить ее, а не перебивать гвоздь, перелопатив пол проекта)

Answer 1

[vdem]

Возможно, в jQuery где-то вешаются live обработчики событий? И каждый раз, когда в #content загружается очередной html, эти обработчики добавляются к элементам в #content. И после очередного $('#content').html(c) эти обработчики продолжают где-то висеть. Впрочем, не уверен.

P.S. А еще, я бы не стал вот так писать: { mod:mod, id:id, }. 1) Бывали необъяснимые глюки с похожей записью, пока не поменял на { 'mod':mod, 'id':id, }, 2) Там есть лишняя запятая, старые версии IE выбрасывали ошибку: { 'mod': mod, 'id': id }

Comments

[Артур Борденюк]

главное, чтобы ключ объекта не был зарезервированным словом

[Антон Тихомиров]

Благодарю за интересный факт. Сам раньше писал все в кавычках, теперь потихоньку от них отхожу - так красивше) Да и вроде как проблем пока не возникало, ибо ключи как правило стараюсь создавать уникальные. Хотя под старых ослов пожалуй стоит переписать...

[vdem]

@HighQuality Да, наверное в том и было дело. Но вот с тех пор ключи в кавычках пишу :)

[vdem]

@HighQuality Впрочем если бы это были ключевые слова, то интерпретатор бы ругнулся скорее всего. А так - была тишина и глюки.

[Антон Тихомиров]

@vdem ахах! Один раз обожжешься на осле - надолго запомнишь, переписывая полпроекта)))

[vdem]

@Acuna IE - это только по поводу лишней запятой. Глюки были в хроме.

[Антон Тихомиров]

@vdem хм... В Ваших словах определенно что-то есть... А может на это влиять то, что контент грузится в одном и том же блоке? То есть взять ту же листалку фоток: появляется она в одном уникальном блоке, а стрелки вперед/назад меняют в нем контент, и у юзера создается впечатление, что он как бы листает их, а на самом деле в нем просто контент меняется? Тянет ли он каждый раз за собой этот блок?

[vdem]

@Acuna Попробуйте делать сначала empty(), а потом уже html()

[vdem]

@Acuna Но это наверное не поможет, html() вызывает empty() внутри себя: "When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content."

[Антон Тихомиров]

@vdem да, Вы правы) Однако есть какое-то подобие прогресса: если сделать этот блок уникальным - все работает отлично. Вроде. Надо теперь как-то попробовать вывести в нем контент...

[vdem]

@Acuna Т.е. если блок полностью убить, и создать с новым id?

[Антон Тихомиров]

@vdem ого! Какие версии Хрома имеются ввиду? Я всегда ставлю лишнюю запятую в конце, ибо мне лень каждый раз ставить ее, когда что-то дописываю, вроде с этим нигде проблем еще не было...

[Антон Тихомиров]

@vdem не убить, а уникализировать. Прописал так: $('#content' + id).html (c); Разумеется, контент никой в нем пока не выводится, однако все летает :/

[vdem]

@Acuna По поводу запятой - это было к IE замечание.

[Антон Тихомиров]

*никакой

[Антон Тихомиров]

В общем, не помогло. В конечном итоге психанул и вывернул все прямо в body, и о чудо! Все летает! Какая может быть специфика у него?

[Александр Таратин]

@Acuna А если просто document.getElementById('content').innerHTML = c ?

[Антон Тихомиров]

@Taraflex Боже! Черт бы меня побрал, но это помогло! Только что же это... jQuery вертят нас как девочек? Скорее всего нет никакой возможности объяснить этот феномен, но может имеются какие-то мысли хотя бы в теории? И что же теперь, весь проект переписывать?)
Вот несколько лет назад, когда jQuery появлялся - я был настроен очень скептически к нему, но это было так удобно, что я постепенно пересел на него и сейчас на нативном JS почти не пишу. Но получается, что мой скепсис оправдался?)

[Александр Таратин]

@Acuna мне кажется, что просто сборщик мусора плохо справлялся в вашем случае, попробуйте баг репорт написать.

[Антон Тихомиров]

@Taraflex тоже на него думал, только ведь это совершенно обычная задача, каждый второй проект реализует такую схему для удобства юзеров, а у меня он прямо настолько уникальный, что впору Паше Дурову предложить?)
Да, надо бы попробовать, только перед этим им надо будет как-то объяснить, почему это у всех работает, а только у меня - нет)

Answer 2

[sl1m_dogg]

$.ajax ({
				
				method: 'get',
				url: 'ajax.php',
                               cache: true,
				data: { mod:mod, id:id, },
				success: function (c) {
					$('#content').html (c);								
				},
			
			}).done (function () {
				return false;
			});

а вообще хотелось бы посмотреть как зависает

Comments

[Антон Тихомиров]

Благодарю!
Но, к сожалению, как я писал, cache ни на что не влияет(
К сожалению в реале показать не могу, все на локале, но зависает как и любой браузер) Ни на какие клики не отзывается, иногда выводит сообщение в Хроме, что, мол, дескать "Вкладка не отвечает. Закрыть ее?" Или как там в Хроме... Осел предлагает остановить сценарий.

[sl1m_dogg]

@Acuna а что на сервере, измерь время выполнения скрипта, посмотри в хром network как проходит get

[Антон Тихомиров]

На времени особо не сказывается(

Answer 3

[_ _]

В хроме же прекрасные инструменты профилирования.
Запустите запись событий, пощелкайте ваши ссылки и посмотрите, что именно жрет процессорное время. Чай не 2000 год.

Comments

[Антон Тихомиров]

Да в том-то и дело, что проц и память не грузит ничего. Вот и интересно, браузер висит, а все вроде как нормально)))

[vdem]

Так может это с браузером/системой глюк, а не проблема в коде?

Answer 4

[Владимир Куликов]

В моем случае зависания были из-за:
async: false,
После изменений зависания ушли.

function showMyCart(){
    $.ajax({
        async: true,
        type: "POST", 
        url: url_serv+"cart.php", 
        dataType: "text",
        data:{
            'action': 'show',
        },
        error:function(){
            $('#view-cart').html('Ошибка');  
        },           
        beforeSend: function() { 
            $('#view-cart').html('Загрузка');  
        },                
        success: function (result) {  
            $('#view-cart').html(result);    
            $('#view-cart').removeClass('load--after');    
        }
    });
}