Ajax chat page freezes window window

Question

У меня есть веб-сайт. Я закодировал страницу чата с jQuery AJAX. есть 3 вызова ajax.

1. запрос AJAX для отправки нового текста чата,
2. запрос AJAX для обнаружения ввода пользователя
3. запроса AJAX для обнаружения новых сообщений.

Я использую JSON для отправки и получения низких данных для чата. Я использовал лучшие технологии для общения с AJAX, но веб-страница зависает, когда я печатаю сообщение в поле ввода или прокручиваю вверх и вниз в истории чата. Я не могу понять, почему страница замерзает.

Сначала я собирал всю историю чата. Я изменил его, чтобы он только извлекал новые сообщения, если они есть, но это не решило мою проблему.

Во-вторых, я попытался установить async=true или false - это не решает мою проблему. Он должен работать правильно без замораживания, но он замерзает.

Скриншоты ниже.

Answer 1

Вы очереди ваших запросов AJAX?

Вы можете использовать $.Deferred, если вы используете jQuery, используйте .queue() или непосредственно поместите свои функции AJAX последовательно в пределах функции. В качестве альтернативы вам может потребоваться установить/настроить setTimeout на функции.

Удивительный разработчик (кто не я) developed an ajaxQueue plugin, который хорошо справляется с этими событиями. Рабочий пример jsfiddle: here.

Answer 2

Основываясь на ваших требованиях, могу представить себе, что есть две возможные проблемы при реализации.

1. У вас есть возможность пользователя это-типизация, что означает, что ваш должны быть привязать ключевое событие (либо ключ вверх, ключ вниз, клавиша нажата) Если вы не дребезг обработчика событий, там будет быть запросом для каждого введенного символа и может заморозить браузер. Есть несколько простых в использовании плагинов для функции debounce для jQuery. Вот пример http://benalman.com/projects/jquery-throttle-debounce-plugin/
2. DOM-манипуляция занимает много времени во всех браузерах. В отличие от Angular and React, jQuery не оптимизировал его для вас. Необходимо минимизировать добавление/обновление/удаление элементов DOM. Скажите, что вы получаете сообщения, проверьте, есть ли какое-либо изменение/существует ли оно для каждого из них, прежде чем вы что-нибудь сделаете в дереве DOM.

async вариант $.ajax() по умолчанию, чтобы быть правдой на основе document. Вам не нужно добавлять его самостоятельно.