jQuery блокирующий сайт (данные socket.io)

Question

Я использую socket.io для перевода данных в браузер, чтобы обновить статус других участников (например: онлайн/оффлайн/в режиме ожидания/занят).

Я нахожу, когда данные поступают (каждые 10 секунд) для обработки страницы зависает на мгновение. например: полоса прокрутки браузера (если вы перемещаете ее вверх/вниз) остановится на мгновение и будет не отвечать на запросы.

Я не считаю, что проблема связана с веб-сайтами, потому что, если я не обрабатываю данные (например, он все равно поступает в браузер), браузер не зависает. он зависает только при обработке данных.

ниже цикл я использую для обработки данных:

Я знаю, я мог бы лучше нацелить элементы, которые будут обновляться, а затем, используя общую находку (и я буду делать это), но я m все еще очень удивляет, что этот код заставляет сайт зависеть на мгновение при использовании.

Передано данных будет около 100 обновлений пользователей/состояний, поэтому я предполагаю, что он будет проходить через это около 100 раз и должен будет искать DOM 100 раз. Это причина, по которой он висит? Разве это не будет обрабатывать это в фоновом режиме?

Я предполагаю, что я пытаюсь понять, почему происходит повешение. Я много использовал Jquery и никогда не испытывал этого. Все советы/идеи были бы весьма признательны.

Thankyou

Answer 1

Javascript в браузере однопоточен. Итак, есть только один поток Javascript, который работает одновременно. Если у вас есть код, который занят обработкой входящих сообщений WebSocket, то другой Javascript не может работать до тех пор, пока этот код не будет выполнен.

Javascript обеспечивает это, упорядочивая все через event queue. Когда один кусок Javascript заканчивается, тогда JS-движок вытаскивает следующее событие из очереди событий и запускает его.

Если ваша страница отображается в течение короткого времени при поступлении входящего сообщения, это, вероятно, связано с тем, что ваш Javascript, обрабатывающий это входящее сообщение, занимает слишком много времени и делает другую интерактивность на странице, подождите, пока эта обработка не будет выполнена , Лучшим решением было бы повысить производительность кода, обрабатывающего эти входящие сообщения, чтобы он был достаточно быстрым, чтобы не было заметного влияния на интерактивность страницы.

Существует не общий способ ускорения вашего кода - то, что будет иметь наибольшее различие, полностью зависит от конкретного кода, от того, как он написан и чего он пытается выполнить. Таким образом, вы можете получить более конкретные рекомендации по улучшению кода, если вы покажете нам фактический код и опишите, что ему нужно выполнить. Выполнение чего-либо 100 раз подряд означает, что каждая операция должна быть очень и очень быстрой (менее одной миллисекунды за операцию), если вы хотите не заметить кумулятивную задержку от выполнения 100 из них.