Ravy Jun 27 2018 at 12:21

Решаем проблему миллиона открытых вкладок или «помогаем железу выживать»

7 min

23K

JavaScript*BrowsersClient optimization*

From sandbox

+23

Comments 54

BigBeaver Jun 27 2018 at 12:55

Решить бы еще на клиентской стороне эту проблему…

Ravy Jun 27 2018 at 14:01

Так это и есть решение проблемы именно на клиентской стороне)

BigBeaver Jun 27 2018 at 14:05

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

firk Jun 27 2018 at 16:20

Тоже подумал про проблемы браузера когда увидел название. Не пойму почему до сих пор не сделали опцию полной выгрузки вкладки (или всех неактивных вкладок за последние 30 минут например) в свап с заморозкой всех её скриптов по желанию пользователя.

BigBeaver Jun 27 2018 at 16:37

Да часто и перезагрузить не жалко — трафик дешевле, чем память.

knstqq Jun 27 2018 at 16:53

НЕТ! Очень плохое решение! У меня иногда вкладка с набранным текстом висит неделю. А ещё прогресс в играх, выбранные опции и так далее. Не все сайты умеют сохранять state корректно. А если ещё и браузер начнёт вкладки убивать из-за того что я открыл больше одной — это совсем зашквар

BigBeaver Jun 27 2018 at 16:58

Если это выбирает пользователь (и по умолчанию вуключено), то все Ок. Но вообще, я за решение от firk. Только надо не системный своп использовать, а просто сделать правильный дисковый кеш.

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

KaneUA Jun 28 2018 at 04:30

Да, это действительно больно. Я как-то обновился на Dev версию Chrome, которая так делала. Это слишком сильно мешало.

knstqq Jun 27 2018 at 16:55

иногда во вкладке играет музыка, например, или ожидается событие с внешней стороны — мессенджеры, фронтенды к сервисам и так далее. Нельзя просто так брать и замораживать все вкладки как поведение по умолчанию. Сейчас уже используются технологии энергосбережения, когда выделяется меньше CPU фоновым вкладкам и тд, этого достаточно.
Как опцию или фичу — можно

BigBeaver Jun 27 2018 at 17:00

CPU не узкое место в этом вопросе. Браузер за пару часов забивает память, система убирает другие приложения в своп. А потом вы переходите в любимую IDE и ждете, пока оно оттуда откопается — отзывчивость системы падает радикально.

vikarti Jun 28 2018 at 06:25

Chrome + The Great Suspender более менее похоже и делают (насколько можно для расширения сделать). И да — введенный во вкладке текст блокирует ее увод. Играющая музыка — учитывается. Есть белые списки…

jaiprakash Jun 27 2018 at 12:56

А зачем эта драка за главенство, если можно просто отдать его старшей по времени создания среди живых, да хоть и младшей?

Ravy Jun 27 2018 at 14:03

Проблема в том, что умирающая вкладка не знает ничего о других. О их количестве и есть ли они вообще. В свою очередь Secondary не знают ничего друг о друге.
Можно хранить массив из времени создания всех вкладок, но это более ресурсоемкая задача — гонять массивы

jaiprakash Jun 27 2018 at 14:10

В LocalStorage нельзя прописать список вкладок с id/timestamp?

Ravy Jun 27 2018 at 14:25

Можно. И надо хранить массив открытых вкладок там же. А при закрытии одной из них пробегать счета по всем и сравнивать их по timestamp. Если вкладок >10 это уже будет дольше, чем мой вариант.

mayorovp Jun 27 2018 at 13:06

А чем SharedWorker не устроил?

Ravy Jun 27 2018 at 13:49

SharedWorker — интересная задумка, но поддержка браузеров очень слабая. На мобильных, так вовсе работать не будет. А мое решение абсолютно универсально в плане браузеров и устройств, т.к. localStorage поддерживается везде.

KYuri Jun 27 2018 at 13:06

Вы не первый решали такую задачу)

Ravy Jun 27 2018 at 13:43

Данную реализацию не встречал, но спасибо за наводку. Покопаюсь в ней)

k12th Jun 27 2018 at 13:12

Неужели юзеры и правда открывают так много вкладок, что это становится проблемой? #янерепрезантативен

huder Jun 27 2018 at 13:29

У меня как-то в доке уже не помещались окна от хрома, в каждом из которых было открыто вкладок как на иллюстрации.

Ravy Jun 27 2018 at 13:45

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

saintbyte Jun 27 2018 at 13:53

Вы трафик через webRTC гоняйте — всё легче чем множество веб сокетов.

Ravy Jun 27 2018 at 13:57

С данной технологией не знаком, но выглядит многообещающе. Ознакомлюсь, спасибо!)

ozonar Jul 3 2018 at 10:44

А насколько у него хорошо с совместимостью? Ещё год назад использовать его было практически невозможно

saintbyte Jul 3 2018 at 11:38

caniuse.com/#search=webrtc

k12th Jun 27 2018 at 14:25

Да нет, я понял, какую проблему вы решаете:)
Я просто не понимаю, зачем юзеры открывают по две вкладки с одним и тем же.

Ravy Jun 27 2018 at 14:30

Допустим, это twitch. У меня открыта главная страница со списком стримов, вторая на втором мониторе с активным стоимость, который я смотрю и ещё одна на фоне, я просто хочу посмотреть, что там происходит.
Или же это сайт-биржа. Я слежу сразу за несколькими котировками валюты в реалтайме

Ravy Jun 27 2018 at 14:31

… с активным стримом...

j_wayne Jun 27 2018 at 14:52

А можно ли так сделать — при уходе вкладки в фон закрывать сокет, а при приходе на вкладку опять открывать?
P.S. да, сработает лишь в ряде случаев, т.к. оперативно обновлятся фоновая вкладка не будет.

Ravy Jun 27 2018 at 15:20

Это решение породит куда больше проблем. В браузерах есть событие о том, что пользователь сделала вкладку аквтивной или ушел с нее. Т.е. мы можем открывать и закрывать соединения, а вот на сервере активные клиенты все равно будут какое-то время существовать и им будет все отдаваться в сокеты. Они будут умирать через некое время, что в моменте может порождать большое количество мертвых, но активных соединений. Это же даёт возможность при переключении их вкладки во вкладку быстро положить даже самый сильный бекенд

j_wayne Jun 27 2018 at 15:25

Понял, спасибо.

vikarti Jun 28 2018 at 06:29

Я например на хабре открываю статьи на почитать потом. «Потом» иногда оказывается… сильно не скоро.
В моем случае — хабр можно заменить и например на Gitlab.com/СИ/Goodreads…

holomen Jun 29 2018 at 22:37

Как тут ниже заметили, «потом прочитаю». Вот прям сейчас у меня только хабровых вкладок открыто десятка два — пробежался быстренько по /all, пооткрывал потенциально интересное и потихоньку просматриваю. Или ютупчик пока гундосят нечто невнятное — поглядываешь что он там еще предлагает по теме и в фоновую вкладку открываешь. На другом видео из списка — повторить. Таким образом открывается 100500 вкладок которые уже изучаешь…

saintbyte Jun 27 2018 at 13:53

это уже давно придумали, например реализации в логуксе уже года 2:
github.com/logux/logux-client/blob/master/cross-tab-client.js

Ravy Jun 27 2018 at 13:59

Еще одна реализация, подобная той, что писал KYuri. Надо будет посмотреть.
Именно для этого мы здесь и собрались, чтобы находить лучшие решения)

Ravy Jun 27 2018 at 14:00

У меня проблема была в том, что на Хабре я не смог ничего подобного найти, а разобраться самому во всех тонкостях работы такой большой библиотеки сложновато

Ravy Jun 27 2018 at 13:58

oren Jun 27 2018 at 14:17

Интересно как оно работает с «засыпанием» (hibernation) вкладок в Vivaldi.
Содержимое вкладки при этом стирается и заменяется «пустой» вкладкой.

Ravy Jun 27 2018 at 14:27

Вот как. Если мы выйдем из гибернации и сторедж будет пустой, то произойдет инициализация подключения. И будет работать механизм конкуренции вкладок. Та, кто первая успеет вызвать коннект, та и станет главной.

klerick Jun 27 2018 at 15:22

примерно такое делал для первого ангуляра)
github.com/klerick/fs-socket-io

Ravy Jun 27 2018 at 15:23

Эта идея у меня как раз в первом ангуляре и нашла свое первое воплощение)

lamer84 Jun 27 2018 at 19:38

А как получается, если открыты не вкладки, а окна? Иногда могут открыть одно и то же в разных окнах. Зачем — не спрашивайте, но такое бывает

Ravy Jun 27 2018 at 19:38

localStorage на то и local, что существует локально. Он существует только в рамках одного окна.

mayorovp Jun 27 2018 at 20:56

Разве? Как может существовать в рамках одного окна то, что сохраняется при закрытии браузера?

Ravy Jun 27 2018 at 21:32

Хм… да, вот здесь я ошибся. Не знал о таком поведение localStorage. Если открыть один и тот же домен в нескольких! окнах!, то и LS у них будет общий. приношу извинения за смуту. Занятная механика)

Djaler Jun 27 2018 at 23:50

А разве браузеру не все равно — разные это вкладки или окна? Это уже детали отображения, не более

lamer84 Jun 28 2018 at 14:10

То есть, primary-вкладка будет определяться и в других окнах?

Taraflex Jun 27 2018 at 19:38

По этой же теме
developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API
github.com/wingify/across-tabs
github.com/studentIvan/dueljs

UFO landed and left these words here

irium Jun 28 2018 at 18:36

Самый полезное, функциональное и удобное расширение для работы с кучей вкладок — Tabs Outliner. Не благодарите :)

x-foby Jun 28 2018 at 00:11

function now() {
    return new Date().getTime();
}

Лучше заменить на

function now() {
    return Date.now();
}

bingo347 Jun 28 2018 at 02:03

А не логичнее ли в современных реалиях вынести общий коннект в ServiceWorker? Он будет гарантированно один на все вкладки одного сайта. Так же из плюсов вижу, что браузер его прибьет сам (а с ним и коннект) при длительном отсутствии активности во всех подключившихся к воркеру вкладок.

POPSuL Jun 28 2018 at 09:47

А почему бы не сделать так:

Открываем вкладку, спрашиваем, кто главный, если тишина — становимся главным, иначе говорим главному свой ид
в beforeunload для слейвов отправляем главному свой ID и говорим прощай
в beforeunload для главного посмотреть список слейвов, и явно указать кто будет следующим главным.

Думаю будет меньше плясок с рандомами...