Что будет если открыть 1000000 вкладок
Как вы живете с большим количеством открытых вкладок браузера?
Оценить 2 комментария
Лекарство от прожорливости The Great Suspender
А есть еще Speedyfox, он архивирует историю и прочее. После этой процедуры хром намного шустрее начинает работать. Надо только не забывать периодически запускать.
Custom Buttons для FF + кнопка вроде «Session bookmark».
Кинул на панель кнопку или две (или 10), да распихал вкладки.
А вообще у всех есть управление закладками, но мало кто использует их по полной. Есть-же и вложенные папки, описания, метки, краткие имена. Правильная организация важна и что не ставь в помощь, любое дополнение или внешний органайзер, если нет порядка и нет желания его поддерживать – всё равно бардак будет.
Если вкладок много, раскидываю их по разным окнам браузера (drag & drop).
Если выхожу, запускаю скрипт, сохраняющий ссылки с заголовками в текстовый файл.
А потом эти ссылки уже открываю через C-c C-o, прицепленное через init-key-bindings.el
Открытые вкладки накапливаются, т.к. нет дисциплинированного подхода к прочтению информации типа «Must read» и т.д.
Тоже так копил вкладки раньше. Вызвано было тем, что боишься потерять что-то нужное и его контекст. Сейчас всё проще, поставил два расширения: OneTab и SimpleExtManager.
OneTab сохраняет открытые вкладки себе в базу, причём просто сохранить сразу кучу вкладок в одну группу и так же её восстановить, то есть не теряется контекст.
Решаем проблему миллиона открытых вкладок или «помогаем железу выживать»
Мы попробуем разобраться — как можно снизить нагрузку на серверное железо, обеспечив при этом максимальную производительность Web-приложения.
В разработке больших высоконагруженных проектов с огромным онлайном часто приходится думать, как снизить нагрузку на сервера, особенно при работе в webSocket’ами и динамически изменяемыми интерфейсами. К нам приходит 100500 пользователей и мы имеем 100500 открытых соединений по сокетам. А если каждый из них откроет по 2 вкладки — это уже *201000 соединений. А если пять?
Рождается идея — а что, если WS соединения поднимать лишь в одной вкладке и всегда держать его открытым, а в новых не инициализировать подключение, а просто слушать из соседней вкладки? Именно о реализации этой идеи я и хочу рассказать.
Логическое поведение вкладок в браузере
Техническая сторона вопроса
Для общения между вкладками мы будем использовать то, что связывает их в рамках одного домена — localStorage. Обращения к нему не затратны по ресурсам железа пользователя и отклик от них весьма быстр. Вокруг него и строится вся задумка.
Есть библиотека, которая уже долгое время не поддерживается создателем, но можно сделать ее локальный форк, как я и поступил. Из нее мы достаем файл:
Суть библиотеки в том, что она позволяет общаться евентами emit/on между вкладками используя для этого localStorage.
После этого нам нужен инструмент, позволяющий «лочить» (блокировать изменения) некий ключ в localStorage, не позволяя его никому изменять без необходимых прав. Для этого была написана маленькая библиотека «locableStorage«, суть которой заключена в функции trySyncLock()
Теперь необходимо объединить все в единый механизм, который и позволит реализовать задуманное.
Теперь на пальцах объясню, что здесь происходит.
Шаг 1. Открытие первой вкладки
Данный пример реализует таймер, работающий в нескольких вкладах, но вычисления которого происходит лишь в одной. Код таймера можно заменить на что угодно, например, на инициализацию WS-соединения. при запуске сразу выполняется webSocketInit(), что в первой вкладке приведет нас к запуску счетчика (открытию сокета), а так же к запуску таймера startHeartBitInterval() обновления значения ключа «wsLU» в localStorage. Данный ключ отвечает за время создания и поддержания активности Primary-вкладки. Это ключевой элемент всей конструкции. Одновременно создается ключ «wsOpen«, который отвечает за статус работы счетчика (или открытие WS-соединения) и переменная «primaryStatus«, делающая текущую вкладку главной, становится истиной. Получение любого события из счетчика (WS-соединения) будет эмитится в Intercom, конструкцией:
Шаг 2. Открытие второй вкладки
Открытие второй, третьей и любой другой вкладки вызовет webSocketInit(), после чего в бой вступает ключ «wsLU» и «forceOpen«. Если код:
… приведет к тому, что «forceOpen» станет true, то счетчик остановится и начнется заново, но этого не произойдет, т.к. diff не будет больше заданного значения, ибо ключ wsLU поддерживается актуальным Primary-вкладкой. Все Secondary-вкладки будут слушать события, которые им отдает Primary-вкладка через Intercom, конструкцией:
Шаг 3. Закрытие вкладки
Закрытие вкладок вызывает в современных браузерах событие onbeforeunload. Мы обрабатываем его следующим образом:
Нужно обратить внимание, что вызов всех методов произойдет лишь в Primary-вкладке. При закрытии любой Secondary-вкладки ничего со счетчиком происходить не будет. Нужно лишь убрать прослушку событий, чтобы освободить память. Но если мы закрыли Primary-вкладку, то мы поставим wsOpen в значение false и отпавим событие TAB_CLOSED. Все открытые табы тут же отреагируют на него:
Вот здесь и начинается магия. Функция.
… позволяет вызывать инициализацию сокета (в нашем случае счетчика) через разные промежутки времени, что дает возможность какой-то из Secondary-вкладок успеть стать Primary и записать инфу об этом в localStorage. Пошаманив в цифрами (1, 1000) можно добиться максимально быстрого отклика вкладок. Остальные Secondary-вкладки остаются слушать события и реагировать на них, ожидая смерти Primary.
Мы получили конструкцию, которая позволяет держать лишь одно webSocket-соединение для всего приложения, сколько бы вкладок у него не было, что существенно сократит нагрузку на железо наших серверов и, как следствие, позволит держать больший онлайн.
Вкладки браузера разрушают ваш мозг
Состояние вашего браузера — это как состояние кухни: если на столах валяются кастрюли, сковородки и грязные тарелки, то будет гораздо сложнее приготовить обед, чем в чистом и опрятном пространстве.
Исследование показало, что браузер с большим количеством вкладок — это стрессовая, убивающая продуктивность потеря времени. В одном исследовании 2014 года анализировалось, как плохо упорядоченные элементы на экранах компьютеров влияют на время реакции и продуктивность врачей в реанимационных отделениях. Выяснилось, что замусоренные экраны увеличивают время поиска медицинских записей, а также поиск необходимой информации в этих записях. Если врач уже находится в ситуации стресса, то отрицательные эффекты становятся ещё более выраженными.
Разумеется, большинство из нас не работает врачами или медсёстрами, отчаянно пытающимися просматривать электронные медицинские записи, пока ждёт пациент. Но у нас всё равно есть беспорядочный режим работы, при котором актуальность критически важна, даже если это просто отчёт, который нужно подготовить к 14 часам, а поиск среди пятидесяти вкладок нужного для завершения работы веб-сайта это, честно говоря, пустая трата времени.
Но как и ваша кухня или ваш стол, браузер не обязан быть неряшливым. Различные инструменты и методики помогут вам обеспечить порядок в браузере и избежать информационной перегрузки.
OneTab
Если вы ищете простой в использовании органайзер вкладок, то отличный вариант — браузерное расширение OneTab. Его возможности довольно просты: при нажатии на браузерное расширение оно автоматически закрывает все вкладки и перечисляет их как ссылки в новом окне. Можно переименовывать эту группу вкладок, делиться ею по ссылке или QR-кодом, если по какой-то странной причине они вам нравятся. В настоящее время расширение существует для Chrome и Firefox.
Приватность часто остаётся недооценённым аспектом оценки ПО, а учитывая, сколько информации программа может извлечь из того, как человек пользуется Интернетом, политика приватности должна быть для многих из нас критически важным компонентом при выборе ПО. На веб-сайте OneTab утверждается, что «информация о ваших вкладках никогда не передаётся и не раскрывается разработчикам OneTab… Вкладки никогда никому не передаются, если вы специально не нажмёте кнопку „share as a web page“».
Pocket — это ещё одно простое и эстетически приятное браузерное расширение, помогающее с управлением вкладками. Оно позволяет сохранять ссылки, чтобы читать или открывать их позже, и вам не придётся просматривать кучи контента, чтобы найти нужный вам отчёт. Pocket можно устанавливать в Chrome, Opera, Safari и Microsoft Edge, а в Firefox он является встроенной функцией.
Как и в случае с OneTab, возможности Pocket ограничены; он сохраняет только по одной вкладке за раз, поэтому если у вас их много, то сортировка может занять время. Но в Pocket мне нравится то, что он интегрирован с Twitter, поэтому если вы хотите сохранить чей-то твит, то сделать это очень легко. Сохранённые вкладки можно дополнить метками, что полезно, если вы одновременно работаете над несколькими проектами и вам нужно упорядочить вкладки. Также Pocket имеет версию в виде отдельного приложения, поэтому если вам нужно сохранить вкладку из браузера, то её можно прочитать позже в телефоне.
Pocket уникален тем, что даёт рекомендации. Когда сохраняешь вкладку в Pocket из браузера, автоматическое раскрывающееся меню показывает другие истории, похожие на ту, что вы сохранили.
Также на домашней странице Pocket есть раздел рекомендаций, на которой можно найти истории, похожие на те, что вы добавили в Pocket.
Этот движок рекомендаций кажется мне невероятно полезным, особенно когда вы ищете, что почитать по пути на работу, однако я считаю, что Pocket лучше всего использовать для сохранения пары необязательных вкладок, которые хотите прочитать позже. Pocket делится агрегированными данными с третьими лицами, поэтому если вам нужна полная конфиденциальность, он может вам не подойти.
Редактор LifeHacker Дэвид Мёрфи писал, что после того, как узнал об этом браузерном расширении, пользуется только Toby, и на то есть причины. Оно немного напоминает мне Trello — ещё одно приложение, которое я люблю. Toby имеет красивый дизайн, выбор между светлой или тёмной темами и использует очень простые инструменты для упорядочивания перетаскиванием.
При помощи Toby можно или сохранять по одной вкладке за раз, или все вкладки одновременно. При открытии новой вкладки вы видите всё сохранённое в Toby и выбираете контент, который хотите открыть.
Также можно делиться своими коллекциями с другими людьми, поэтому если вы работаете над совместным проектом и хотите отправить кому-то выполненные вами исследования, то с Toby это сделать легко.
Toby существует для Firefox, Chrome и Opera, он передаёт агрегированные данные сторонним поставщикам в рекламных целях.
Evernote
Evernote — это мой личный фаворит, потому что это самый надёжный вариант, но и самый сложный. Это не просто браузерное расширение для сохранения вкладок: Evernote — это целое приложение для продуктивности с функцией создания заметок и списков todo, а также с сохранением вкладок.
Больше всего в Evernote мне нравится то, что можно добавлять к вкладкам аннотации. Так как в своих статьях я часто ссылаюсь на исследования и предыдущие новостные истории, мне нужно вести много заметок. Evernote упрощает этот процесс, позволяя выделять и помечать веб-сайты, прежде чем сохранить их в свой «блокнот».
При сохранении вкладки в Evernote можно или сохранить её как полную веб-страницу с соответствующей графикой и рекламой, или как упрощённую статью (см. изображение выше) только с центральным текстом и изображениями и без вспомогательных изображений/рекламы; или же как вырезку — при этом в ваш блокнот сохраняется только первое изображение, заголовок или однострочная выдержка из статьи. Вырезка (clip) — лучший вариант, если вы хотите просто запомнить, что позже нужно зайти по определённой ссылке.
Как и в Pocket, за раз можно сохранять только одну вкладку, поэтому Evernote лучше использовать с самого начала проекта, а не во время его завершения. Делиться можно конкретными вкладками или блокнотами. Также аналогично Pocket приложение Evernote имеет функцию рекомендаций, поэтому при сохранении вкладки появляется раскрывающееся меню с другими похожими историями.
Evernote есть для Chrome, Safari, Firefox, Internet Explorer, Opera и Microsoft Edge. В его политике конфиденциальности написано, что он не продаёт и не передаёт данные сторонним лицам в рекламных целях, а также обеспечивает двухфакторную аутентификацию. Однако в 2016 году Evernote пережил скандал после того, как резко сменил свою политику конфиденциальности, позволяющую сотрудникам компании читать заметки пользователей «для улучшения анализа машинного обучения». Вслед за негативной реакцией пользователей компания пересмотрела свою политику, предоставив пользователям возможность выбирать, могут ли сотрудники Evernote получать доступ к их заметкам. Чуткость Evernote к опасениям его пользователей очень радует в наше время, когда даже ДНК может стать потенциальным источником прибыли, но стоит заметить, что политики конфиденциальности даже самых компетентных компаний могут быстро меняться.
Другие способы снижения перегрузки
Если вам не нужно браузерное расширение или вам нравится, когда открыто 50 вкладок, то есть и другие способы упорядочивания или хотя бы снижения нагрузки на ОЗУ компьютера от всех этих вкладок. Если у вас открыто много вкладок, окон или расширений, то их влияние может быть очень значительным.
Great Suspender — это браузерное расширение, имеющее очень простую задачу: оно экономит ОЗУ вашего компьютера. Если вкладки замедляют работу компьютера, то Great Suspender «приостанавливает» неиспользуемые вкладки. Он выпущен для Chrome, а в его политике конфиденциальности указано, что он не передаёт никакую информацию.
Ещё один вариант — использовать функцию закладок браузера. Президент Information Overload Research Group Нэтан Зелдс считает, что для упорядочивания окон Firefox или Chrome можно нажать на «Добавить все вкладки в закладки» или Ctrl+Shift+D, а затем сохранить все эти вкладки в папку для дальнейшего использования.
Несмотря на изобилие существующих браузерных расширений, я продолжу использовать свой обычный, но довольно нишевый метод: сохранение всего в документе Google. Я создаю по одному документу на каждую статью, чтобы сохранять всё, что мне понадобится: контактную информацию, исследования, другие статьи, расшифровки интервью и произвольные заметки или мысли. Они выглядят примерно так:
Это позволяет мне хранить всё необходимое для истории в одном документе, чтобы мне не приходилось переключаться между браузерными расширениями, приложениями и Google Docs. Но сборка такого документа требует больше времени, чем сохранение веб-страницы в какую-нибудь папку, поэтому такой способ не для каждого.
Захламлённый браузер похож на захламлённый дом: он отвлекает, в нём много ненужного, и может доходить до того, что он попросту вредит здоровью. Пара инструментов и механик позволят вам сделать шаг вперёд и освободить своё ментальное пространство от потери времени на поиск среди миллионов вкладок, чтобы вы могли сосредоточиться на вашей задачей или даже закончить её быстрее.
Как я избавился от тысячи вкладок…
… и опоздал на 3 года. В идеале должно быть так: пользователь запускает браузер, и браузер показывает то, что нужно пользователю. Но пока такого не реализовали приходится пользоваться поисковыми системами. В идеале должно быть так: пользователь открывает поисковую систему, вводит поисковый запрос, и она показывает то, что нужно пользователю. Но пока кнопка «I feel lucky» не так хорошо работает (хотя в последнее время ощутимо движение в этом направлении), приходится иногда переходить по нескольким адресам со страницы поисковой выдачи.
Сценарий использования поисковых систем у меня, видимо, закреплен исторически (когда интернет был медленный): попадая на страницу поисковой выдачи, я открывал несколько вкладок в фоновом режиме, и пока остальные загружались, вполне можно было уже прочитать первую вкладку. В случае, когда находил нужную информацию на одной из вкладок, остальные приходилось закрывать вручную. Если не закрыл сразу, вкладки оставались висеть, раздувая количество открытых вкладок в браузере, которые, как правило, редко после этого закрывались.
К тому же, если переходишь на странице по ссылкам, которые открываются в новом окне, создается несколько связанных между собой (логически) вкладок. Когда находишь нужную информацию, не всегда можно вспомнить какие вкладки связаны между собой, можешь закрыть не все, что также ведет к раздуванию количества открытых вкладок.
Мне всегда нужна была кнопка «Нашел», которая бы подчищала за мной последствия поиска (назовём её «I was lucky»). После того, как окунулся в мир расширений для браузеров, я подумал, что это то, что может помочь в данном случае. Так смутно начало появляться желание написать расширение, которое бы решало мои задачи.
Расскажу вам свою историю, рассказ буду вести в хронологическом порядке, выводы могут оказаться неожиданные.
Первый шаг на пути
Фундамент
Время шло, а в наличии был только плагин для вебпака, который никак не решал моих задач. И каждый раз, когда я что-то искал и не закрывал вкладки, была мысль: «Хорошо бы доделать то расширение. » Желание росло и росло, и вот, в один прекрасный день, количество переросло в качество.
При переходе на страницу могут быть различные варианты. Самый простой: один запрос — один ответ от сервера (200). Самый сложный: один запрос — несколько серверных перенаправлений (3xx), после чего клиентское перенаправление (с помощью или javascript), сверху ещё и history API. И комбинации между ними, как правило, большинство сайтов попадает в эту категорию.
Простой случай перехода:
Сложный случай перехода:
То есть сохранить адрес страницы и при переходе проверять только его не всегда достаточно. Поэтому нужно создать логический Переход, куда записывать все адреса, встретившиеся на пути, а потом проверять, что логический Переход содержит в себе сохраненный адрес. Задача понятна, но не все так прямолинейно в исполнении.
В Хроме есть два API, связанных с навигацией: webNavigation и webRequest — каждый со своими событиями. Первый — связывает переходы и UI браузера, последний — нижележащие сетевые запросы. Поэтому, если изменение адреса на странице произошло за счет history API, не будет никаких событий у последнего, а если во время сетевого запроса происходят перенаправления, то первый об этом никак не сообщает. Следовательно, нужно использовать оба АПИ, собирая по щепотке от каждого события каждого АПИ, формировать один логический Переход.
Как указано в документации, события для webNavigation (wN) выполняются в следующем порядке:
Интересующие события webRequest (wR):
Для этих АПИ нужно указывать соответствующие разрешения в манифесте расширения, а посему при установке расширения, пользователю будет выдаваться пугающий текст о возможностях расширения.
Развитие
… Вернемся к моменту, когда количество переросло в качество. С начала разработки до этого момента прошло существенное количество времени: браузеры стали поддерживать es6 модули, shadow DOM и другие современные фичи. Для сборки проект переехал на Rollup, плагин в этот раз писать не пришлось. После постройки фундамента — возможности получения информации о любом переходе в любой вкладке, осталось реализовать логику парсинга поддерживаемых СЕРПов и показа уведомлений на связанных страницах.
Первая задача достаточно примитивная: знаем адрес СЕРПа, лезем в содержимое страницы с помощью контент скрипта, получаем интересующие нас данные, сохраняем, ждем, когда пользователь перейдет на одну из страниц, чтобы показать ему уведомление с остальными страницами.
Для второй задачи нужна реализация самого уведомления, то что показывать на странице пользователю. И здесь тоже без контент скриптов не обойтись.
Изначально был только один обработчик (он же контроллер), отвечающий за логику при взаимодействии пользователя с поисковыми системами. После чего возникла идея почему бы не показывать уведомления на связанных вкладках, когда пользователь просто переходит по ссылкам, открываемых в новых вкладках. Пришлось переделать логику, сделав ее более универсальной. По аналогии с middleware React/Redux, можно подключать несколько обработчиков Переходов, что в будущем позволит реализовать возможность отключения/включения различных обработчиков в настройках расширения.
Приватность
Так как уведомление — это панель внизу экрана, и добавляется она в разметку страницы, то скрипт на странице может получить доступ к этому элементу так же, как и к любому другому элементу на этой странице. То есть теоретически страница могла бы узнать какой поисковый запрос вы использовали, в каком поисковике и какие другие страницы вам предложены, что не очень хорошо.
В этом случае скрипт со страницы сможет получить доступ только к элементу обертке, который для него будет пустой. Он не сможет получить текст запроса или предложенные страницы. Нужно внимательно следить, чтобы в сгенерированных событиях не отдать ссылку на какой-нибудь элемент внутри уведомления или открытый текст. Поэтому в расширении в событиях используются сгенерированные id, а уже background скрипт по этому id понимает что от него требуется. Для страницы же этот id достаточно бессмысленный.
Трудности перевода
Изначально расширение разрабатывалось только для Google Chrome, но так как WebExtensions API, где-то в голове держал возможность портирования в другие браузеры. А наличие webextension-polyfill вселяло уверенность. Но как бы не так. Полифил для этого расширения принес только возможность использования chrome API с промисами.
Firefox стал разочарованием года. Несоответствие chrome API в Фаерфоксе (Bug 1543647, Bug 1595621) оказалось критичным для работоспособности расширения, можно сказать оно в этом браузере не работает (как положено).
Заключение
Так же, не находясь в теме, ожидал большей совместимости с точки зрения webExtensions API. Как всегда — хорошо жить в мире современных браузеров, когда не нужна поддержка старых версий. CSS анимации прекрасная вещь: то, для чего раньше нужно было использовать js библиотеку, теперь делается в несколько строк на css. В расширениях не работают Custom elements, зато работает shadow DOM, позволяющий воспользоваться всеми его возможностями.