rPman

чтобы передавать сообщения в обе стороны, есть следующие технологии:
* websocket - client <-> server
* webrtc - client <-> client напрямую

Логирование и синхронизация точного времени на сервере и клиенте.

Точный момент (миллисекунды), когда запрос 'пришел' на сервер зависит от точки, в которой происходит замер, например если замерять средствами nginx (запущенный на сервере) и к примеру момент, когда запустится cgi скрипт (первой строчкой которого поставить запись времени в лог) - будут отличаться на десяток миллисекунд.

Причина в том, как именно запрос обрабатывается, асинхронно или нет (скрипт может принять его либо в тот момент как пришел первый сетевой пакет, или же с последним).

само по себе сообщение об ошибке занимает мало времени и чтобы это стало заметно нужно действительно много
но вот отладочная информация, когда в console.log выводится объемный объект и очень много - занимает прилично оперативной памяти (так как весь объект копируется и хранится в памяти чтобы в интерфейсе его можно было посмотреть) у меня был пример когда окно firefox работало больше суток и отладочная информация нагрузило так сильно оперативную память что был задействован своп файл и сам браузер дико тормозил, но очистка консоли тут же все исправило

вызывай скриптом consloe.clear() типа такsetInterval(()=>console.clear(),3600*1000)для автоматической очистки консоли раз в час, этого будет более чем достаточно

направления решения задачи многопользовательского редактирования:

- нулевое, самое злобное для клиентов, выдавать ошибку, при попытке сохранить документ, если его редактировали, обновлять форму и предлагать ввести все заново, реализуется полем 'last modified time', которое загружается на форму и отправляется с запросом на обновление, если сервер видит их разными - писать ошибку.

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

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

- третье, наилучшее в современных реалиях, применять изменения и выводить их в тот же момент как они вносятся на форму, как документы google docs, видно в какой ячейке какой пользователь сейчас поставил курсор, можно даже подсвечивать цветами, с затуханием. Рекомендуется, как ни странно достаточно проста в реализации, если интерфейс client side javascript а не генерация html на сервере.

Все три способа требуют оперативную информацию о наличии блокировок пользователями, что реализуется с помощью вебсокет

897kb
надо почти мегабайт скачать! я не верю что у тебя с твоим интернетом за 80миллисекунд это происходит, скорее все из кеша берется

на парсинг json как раз уходит несколько десятков миллисекунд, и это нереально быстро для мегабайтового файла

p.s. на c++ есть парсер simdjson, он в десять раз быстрее парсит, но делает он это не в память, а по лексемам, прямо в процессе анализа результата, там что то типа, получить следующую лексему, смотрим ее тип, имя и либо пропускаем (включая объхекты) либо рекурсивно работаем с объектом

браузер так не умеет, в теории можно попробовать написать такой парсер на javascript но я не верю что это будет быстрее

upd: https://www.npmjs.com/package/simdjson

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

Нажимаешь правую кнопку на нужном тебе элементе на странице (иногда надо добавлять shift+) выбираешь Инспектор (Исследовать) и получае консоль разработчика, она выберет нужный html элемент либо выбирай сам, правую кнопку на нем, выбирать copy -> css selector

Получишь в буфере css селектор для данного элемента, очень часто он правильный
Теперь тут же в консоли пишешь команду
$('вставь_сюда_селектор').click();
на нужный элемент будет сэмулирован клик мышкой.
Можешь добавить больше кода и логики, например кликать через указанный интервал - setTimeout

Если надо автоматизировать при загрузки страницы, бери расширение greasemonkey (tampermonkey), оно позволяет запускать пользовательские скрипты по разным условиям

Можно ли как-то это поправить? Или есть альтернатива может?

WebWorker должен работать не зависимо от того, активная вкладка или нет

в приведенном примере - невозможно
но если переменные хранить с использованием anchor:
https://site.com/payment#id=12345678910

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

Этим активно пользуются в SPA приложениях, когда реально страница грузится один раз за все время работы сайта, а все остальное подгружается с помощью ajax