Як я бачу ідеальний браузер


Останнім часом з’явилося багато статей про недоліки сучасного софта, при цьому ніхто не пробує запропонувати свої рішення, щоб змінити ситуацію. Ця стаття — відповідь на деякі статті про це, так само як і про мрії про ідеальний браузері. Як можна було б переробити браузер, його UI, методи взаємодії з сайтами, поліпшити протоколи і користувальницький досвід в цілому. Якщо у вас є якісь, нехай навіть найсміливіші думки з цього приводу, то предлагаюсь обговорити їх і бути може закласти основи для створення ідеального браузера. Зрештою, рано чи пізно це потрібно буде зробити, так як ситуація на ринку браузерів на даний момент зовсім не радісна. І не проблема, що інші браузери дуже складні і їх складно наздогнати — ми можемо піти своїм шляхом, реалізовувати тільки необхідні частини стандартів, при цьому можемо вводити свої нестандартні розширення. Не треба бігти за іншими, нехай інші біжать за нами. Нехай наш браузер створений для людей, а не в ім’я комерційних інтересів корпорацій добра і дивних консорціумів, від яких давно немає ніякої користі.

Що ж повинно бути в ідеальному браузері?

 

Пошук

Якщо робити новий браузер, то перше, що в ньому має бути — це локальний пошук по всьому. По відкритих вкладок, кешу, закачаним файлів і по тоннам метаінформації всередині. Пошук повинен бути як за індексом, так і за регуляркам, причому користувач повинен мати можливість вибрати всі можливі опції, включаючи кодування документів (приміром, дуже непоганий пошук в Far).

Одного разу на одному з форумів я знайшов цікаву концепцію алгоритму. Обговорення не було, так що я швидко закрив вкладку, але сама концепція осіла у мене в голові. Поміркувавши над нею у фоновому режимі, я вирішив поділитися своїми ідеями… Але де? Швидко подивившись форуми, де я зазвичай жив — я не знайшов нічого подібного. В пошукових системах теж нічого, але це і не дивно — форуми не миттєво індексуються. Я почав ритися в хісторі браузера — нічого не знайшов, але це і не дивно, так як вона велика, їй незручно користуватися, я міг щось пропустити. Я заново відкривав майже всі сторінки — нічого подібного не знайшов. Я почав шукати повідомлення у пошті, в месенджерах, навіть питати людей — без результату. Я вже було почав думати, що мною керують рептилоїди, вселяють концепти, як наважився застосувати останній засіб: пошук файлів браузерного кеша. І майже миттєво знайшов те місце, яке шукав. Виявилося, що оскільки ніхто не відповідав в тему форуму, автор подумав, що він написав дурість, йому стало соромно і він просто видалив тред. А я цю віддалену тему довго шукав і не міг знайти, накручуючи себе.

Іншого разу мені знадобилося оновити відеофайл. Файл називався 1.mp4 (думаю, у багатьох таких файлів багато). Він представляв певну цінність для мене, але на жаль, він виявився битим. Де я його скачав? Довелося заново шукати його по тим кейвордах, що були в самому відео.

Сесії

Коли намагаєшся розібратися з якоюсь новою темою, то самі собою відкриваються десятки вкладок. Посилання за посиланням і у нас чтива на кілька днів. Причому кожна вкладка — це щось важливе, що треба прочитати. Що робити нам? Особливо коли все це накопичується все сильніше і сильніше?

Можна просто закрити все бачене і покластися на історію, мовляв у майбутньому, якщо це буде потрібно, воно знайдеться. Або звалити все вкладочки в букмарки. Або навіть зберігати/роздруковувати сторінки — це не дуже зручно, зате точно знайдена інформація ніколи не пропаде (втім, про збереження інформації буде написано далі).

А може бути зберігати всю сесію цілком, як якийсь проект? Давати їм осмислені імена виду «Шукав модель човна», «Вчуся програмувати» і включати/вивантажувати у міру потреби? Механізм профілів або сесій є зараз в кожному браузері, тільки він найчастіше як захований, що відшукати його складно, а користуватися ще складніше. Мабуть єдиний браузер, де такий механізм добре реалізований — це браузер, Edge в своїх останніх версіях. При всіх недоліках даного браузера, даний механізм зроблений в ньому максимально зручно і дозволяє не накопичувати вкладки, а їх зручно сортувати. Звичайно, немає межі досконалості, але мати хоча б такий варіант — обов’язково. А ще краще мати можливість зберігати такі сесії разом з кешем/контентом сторінок. Тільки не так, як це роблять браузери зараз, зберігаючи кеш в деякому бінарному вигляді, а щоб можна було відкрити 100 вкладок нової теми, зберегти їх в якийсь читається іншими пристроями формат (.html/.pdf) і залити собі на телефон, де спокійно читати, бути може у віддаленні від цивілізації.

Приватність

Користувач повинен сам вирішувати, якою інформацією з сайтом він хоче поділитися. Я не повинен шукати різні переключалки User-Agent-ів, така функціональність повинна бути вбудована в браузер. Приміром, пошуковик Google.com відмінно працює, якщо представитися links-му, а неприємного інстант-пошуку, поїдає введений текст, не з’являється.

Я хочу мати можливість:

  • задавати ширину і висоту екрана (будь-яку, хоч 50000×50000 пікселів)
  • глибину кольору, незалежно від поточних налаштувань
  • додати сайт до довірені, щоб його куки не прокисали при натисканні «очистити все»
  • замінити шрифти, при цьому надавати сайту той список шрифтів, що він хоче
  • надавати довільний User-Agent, бути може навіть рендомний, взятий з великого файлу варіантів або прив’язаний до конкретного сайту
  • вибирати мову контенту і бачити те, що передається серверу, а не просто «бажану мову», який ще невідомо в що розгорнеться
  • кількість і послідовність заголовків, включаючи емуляцію відомих багів інших браузерів

І взагалі, все те, що можна отфингерпринтить, треба мати можливість змінити. Я хочу мати таку можливість.

Найсмішніше, що стародавні браузери мають купу налаштувань для цього. Наприклад, такі браузери як links, w3m і netsurf дозволяють не тільки відключати Referrer/User-Agent, але і надають безліч різних цікавих опцій, де можна досить тонко налаштувати поведінку браузера, як він буде заповнювати ці поля. У той час як тільки майбутні версії Firefox навчаться це робити, причому лише частково, не даючи 100% захисту користувача, без будь-яких опцій, жорстко визначаючи поведінку лише при деяких умовах (втім, про налаштування сайтів і умовах ми ще поговоримо).

Літаючі кораблі

Дуже довгий час MSIE не підтримував position:fixed, за що його лають. І як показує практика — добре, що не підтримував. Правда людей це не зупиняло і вони эмулировали його через JS з стрибали менюшками, які збереглися і донині на мільйонах сайтів.

Сьогодні перекриття елементів використовується для всякого корисного: вікна логіна на весь екран, вылезающие під час перегляду сторінок і які не можна прибрати (facebook), спливаючі асистенти, виявляються чат-ботами, повідомлення на весь екран про акції та подарунки, як я щось виграв, іноді просто мені показують рекламу (само собою без реклами, але і без кнопки закриття), прозорі попап, які не дають клікати по сторінці (pornhub), ну і апофеоз: мені розповідають, що я повинен відключити AdBlock, якого у мене немає.

А ви пробували роздрукувати будь-яку сторінку? А я ось досить часто «друкую» PDF і мені хочеться бити тих, хто роблять спливаючі розтяжки виду «ми використовуємо кукіси» або «ось тут брейкин-ньюз» десь зверху або знизу екрану. Ну, або просто фіксоване меню зверху і простий футер знизу. Не, ну на екрані це виглядає ще нічого, можна сторінку поскроллить і якось прочитати те, що вони загороджують. А ви знаєте, що ця гидота друкується на кожній сторінці? І друкується поверх тексту? І що папір не поскроллить, хоча дуже охота, адже ця гидота загороджує частина контенту, який ніяк не прочитати? Поки що я змушений через інспектор елементів/ublock відламувати стилі або видаляти якісь окремі менюшки, тільки після цього я можу роздрукувати сторінку. Це трохи напружує. А от якщо б були прості керовані елементи, то такого б не сталося!

Зате всередині движка браузера можна детектувати, коли елемент перекриває собою текстову інформацію і… Ну, наприклад, прибирати його кудись убік. Або взагалі відламувати стилі, оголошуючи їх небезпечними. Варіантів маса. Можна уявити сторінку як шари і дати користувачеві пару кнопок, щоб «зрізати» верхні шари або повертати назад, як це зроблено в деяких іграшках або тривимірних редакторів — я джва роки хочу таку функцію!

Читайте також  Як ми придумували набори дитячої технічної творчості

Забавно, але коли-то IE відмовився від візуалізації тега blink, але він дозволяв з JS посувати вікно браузера і зробити незакрываемые попап. Нині навіть відобразити текст у статусному рядку вже складно, простіше її емулювати. Тепер я пропоную щось зробити з перекриваючими текст блоками, можливо якось відламати цю функцію. І доводитися відламувати все більше фіч, щоб їх не можна було використовувати їх на шкоду. Так, заради цього можна написати свій браузер, нехай без дотримання стандартів, зате зручний для читання тексту, до того ж программить менше.

Снапшот сторінки

Буває так, що, відкривши якусь невигадливу сторінку з якимось текстом, часом забуваєш про неї і залишаєш висіти у вкладках, «на потім», «щоб не забути». Як правило, там немає нічого особливого. Наприклад, там розповідають як вирощувати полуницю на дачі і зовсім нічого такого, що передвіщає неприємності.

А прийшовши до комп’ютера через кілька годин, помічаєш, що КУРСОР МИШКИ ЛЕДВЕ РУХАЄТЬСЯ, ВСЕ В СВОП, ПРАЦЮВАТИ ЗА КОМП’ЮТЕРОМ НЕМОЖЛИВО, В ЖАХУ ВІДКРИВАЄШ СПИСОК ПРОЦЕСІВ І КИЛЯЕШЬ ГАДА (якщо зможеш дочекатися відтворення списку процесів). І тут закривається вкладочка як раз з цим безневинним сайтом.

Щоб такого не було, я в свій час написав для Firefox плагін, який через 5 секунд після завантаження сторінки (події onload) підміняв setInterval/setTimeout/requestAnimationFrame на порожні виклики, які нічого не робили, а існуючі відключав. В принципі, я радів. Правда всякі інтерактивні елементи, ніби розгортаються спойлерів, теж перестали працювати, так як таймерів більше не було, а відкриття спойлера запускало таймер для анімації. Велика це ціна? Мені довелося відмовитися від свого плагіна, так як я не міг повертати обробники по якійсь події, але якщо ми пишемо свій браузер — чому ні?

Альтернативна реалізація: через 10 секунд від події onload, ми зупиняємо весь JS, вивантажуємо DOM і залишаємо тільки ті структурки в пам’яті, які потрібні для візуалізації прямокутничків з текстом, таблицями та малюнками. Все, нехай фонова вкладка буде чимось на зразок картинки з текстом, не більше того. Ще одна альтернатива: весь лейаут ми рендерим в окремому процесі, а завантажуємо тільки координати тексту і картинок після візуалізації, як це було в Opera Mini, таким чином наш браузер буде ще трохи безпечніше.

Найцікавіше, що в сучасній Опері щось подібне вже є, але включається тільки при перемиканні на живлення від батарей. Я ж хочу завжди мати таку опцію для сайтів, особливо для сайтів, які я відвідую вперше. Взагалі, в кишках всіх сучасних браузерів є багато корисних функцій, але вони захардкожены і не можуть бути налаштовані користувачем, із-за чого браузери практично втрачають величезний потенціал.

Кешування контенту локально

Розповідаю ідею на мільйон баксів: завантаження сторінки за 0мс. Ні, навіть якщо сайт повністю лежить у нашому кеші, то він не з’явиться, поки ми не надішлемо запит, не почекаємо Round Trip Time, не распарсим відповідь, а потім не виконати аналогічне з усіма рештою скриптами і стилями. А що заважає відкривати його ВІДРАЗУ з кешу і в тлі проводити валідацію контенту, посилаючи відразу запити до ВСІХ ресурсів в тлі, на тлі ж, використовуючи подвійну буферизацію, оновлювати дані в разі змін, як просто перерисовывая картинки, так і блоки тексту? Скажете, що вже було в IE і називалося «Працювати автономно»? Так, в IE досі багато хороших і цікавих функцій, але по-перше, ця функція працювала не завжди, а по-друге, ми не зможемо оновити сторінку, а в моєму випадку сторінка буде автоматично перемальована по мірі валідації.

На жаль, в сучасному вебі кешування не просто погано працює, а швидше не працює взагалі. Але що заважає примусово зберігати сторінки на диск? Це дозволило б не тільки відкрити сайт в разі його смерті, врятувати якийсь корисний контент, але і відстежувати, наприклад, динаміку зміни цін на товари або ловити співрозмовників на те, що вони змінили свої пости. Звичайно, можна зберігати сторінки на диск вручну… Але як правило згадуєш про це тільки тоді, коли вже треба повернутися до старої версії, а її немає, а на веб-архів надії мало. Іноді можна виколупати контент з пошуковиків, але це працює не завжди, особливо якщо відразу не встиг. Особливо це було б корисно в тих випадках, коли контент легко поділяємо на окремі керовані елементи, але про це трохи пізніше.

Само собою, кешування повинно бути у вигляді інкрементальних diff-ів (інакше місця не вистачить на все), з інтелектуальним парсингом неотображаемой інформації (нема чого зберігати змінюється код лічильників), з підсвічуванням змін, з вибором старих версій прямо з адресного рядка. Зберігати можна вже распаршенные сторінки, як набір прямокутників і їх координат на екрані, таким чином можна прискорити рендеринг, а зображення можна даунскейлить і зберігати у вигляді h265, який набагато краще jpeg-картинок — ми економимо місце. І якщо вже ми витратили стільки сил на примусовий кеш і його облагородження, то чому б не поділитися ним з кимось ще? Юзер-інтерфейс тут головне. Фіча не тільки повинна бути, але їй повинно бути зручно користуватися: відкривати різні версії сторінки, видаляти або зберігати версії сторінок, анонсувати їх як публічний кеш, робити вибірку сторінок і вивантажувати локальні версії сайту (сторінок, по яких ходили), робити що-то на кшталт mht/pdf з робочими посиланнями, щоб їх можна було відкривати на інших пристроях, а не тільки вони осідали десь у внутрішніх сховищах браузера, як відбувається в деяких мобільних браузерах.

Щоб прискорити завантаження сторінок і застрахувати себе від нежданих ін’єкцій коду, різні скрипти, такі як jquery і йому подібні, що зберігаються на різних CDN, можна завантажувати безпосередньо з локального диска, як це робить розширення Decentraleyes. Завантаження шрифтів і ікон-паків стане миттєвою. Дізнатися більше про те, що вже є: addons.mozilla.org/en-US/firefox/addon/decentraleyes. Зрозуміло, непогано б зробити ін’єкції свого коду, за аналогією з browser.js (тільки не руками авторів) або Grease Monkey (тільки без троянів), щоб можна було змінювати/виправляти код сайтів. Ні, не милиці у вигляді плагіна, а нативну підтримку, яка не буде гальмувати, як це колись було в Опері. Але на жаль, зараз зручних засобів для патчінга коду сайтів просто немає. Річард Столлман називає це «тивоизацией» сайтів, але про це буде написано в розділі про підписи коду.

Додамо сюди якийсь гіпотетичний sitemap.xml визначає спорідненість статей, сторінки для попереджувального кешування, посилання на якийсь трекер для p2p-обміну контентом… І ми отримуємо самореплицирующийся сайт, який можна зберегти і використовувати локально, який буде витримувати будь-які навантаження і контент якого не помре ніколи. Втім про це, так само як і про розподілених сайтах, ми поговоримо далі.

Підпис коду

Багато хто з нас не замислюються, але в браузері може виконуватися код різних людей, написаний під різними, в тому числі і невільними ліцензіями. І не факт, що користувач згоден з цими ліцензіями. Це як вступати в сексуальні відносини без попередньої згоди. В принципі, в більшості випадків нічого поганого не станеться, але можуть бути нюанси. Річард Столлман написав чудову статтю «Пастка Javascript», за мотивами якої було написано розширення LibreJS: en.wikipedia.org/wiki/GNU_LibreJS — це те, що повинно стати відправною точкою в справі інтерпретації Javascript в нашому браузері!

Якщо б вказівка ліцензії було частиною стандарту, життя було б трохи легше, але цього немає. Якби автори коду його підписували своїм публічним ключем, то я міг би хоча б довіряти різним авторам, але немає і цього. Залишається тільки хешировать скрипти, включаючи найдрібніші, вшиті в сторінку і питати користувача «дозволити це?» для запуску кожного з них, ведучи базу дозволених або заборонених скриптів. Щось рівня антивіруса. Теж пошук «вирусни» по сигнатурах, але замість евристичного аналізатора — вказівка ліцензії та питання до користувача. На основі таких хешів можна не тільки убезпечити себе від шкідливого коду, але і побудувати систему версионирования. Створити інфраструктуру, де буде запускатися тільки той код, яким ви довіряєте! Адже Вам набридло боротися зі скриптами, які перевертають текст і просять вимкнути Адблок? Я би відключив, але у мене немає Адблока, так само як і впевненості в тому, що завтра мене не попросять зробити донейт або підписатися на якусь аферу.

Читайте також  Сортування вибором

Якщо ви ще не знайомі з чудовим працею Річард Столлман, то рекомендую почитати: www.gnu.org/philosophy/javascript-trap.ru.html (російською мовою).

Оцінка сайтів / антирейтинг

Деякі браузери, такі як Опера, навіщо-то намагалися виправити кожен сайт руками, роблячи патчі через ін’єкцію кастомного коду. І одного разу їм це набридло, підсумок ми всі знаємо. Хоча вони цілком заслужено пишалися своїми досягненнями, які підтверджувалися в різних пузомерках, виконуючи тести на відповідність стандарту.

Але можна було піти іншим шляхом: замість того, щоб щось патчити, писати комусь на емейл, використовувати особисті зв’язки і все таке, можна було б виводити текст патча прямо поверх сторінки зі словами «автор цього сайту не дотримується стандарту, наступний код міг би полагодити цей сайт». Смикнув виклик IE-only? Ніякої емуляції, замість неї великий червоний попап про профпридатність автора (звичайно ж, не перекриваючи контенту). Багато користувачів звичайно проігнорують це, але хтось може поставити авторам сайту питання: «А що це тут так багато червоненького?». Та власники сайта будуть розповідати, як вони економили гроші на програмістів. Або розповідати клієнту про те, що треба б поставити «нормальний Гуугле Кхроме», з-за чого клієнт швидше піде від них. Якщо ж такий сайт буде виводити щось на кшталт «location.href = ‘http://google.com/’, приходьте до нас ще» — так це ще краще, не треба зв’язуватися з такими людьми.

Можна піти далі: картинка на сторінці відображається як 100х100, а насправді 500х500? Червоний попап з повідомленням про те, що автор не вміє ресайз картинки. Картинка з фотореалістичною графікою вижата в PNG? Червоний попап про те, що автор не розбирається в форматах файлів. На сторінці немає посилання на головну сторінку? Червоний попап з повідомленням про те, що автор сайту не зробив нормальну навігацію.

Звичайно, червоний попап виводити можна не завжди. Приміром, якщо PNG зображення можна краще оптимізувати через optipng, то можна виводити просто червоненький варнинг, як виводять їх блокувальники реклами. Щось подібне вже роблять різні CDN-оптимізатори, які і картинки перетискають, і код минифицируют, а на вході навіть SQL-ін’єкції намагаються фільтрувати. Але вся ця радість буде тільки в тому випадку, якщо автор заплатив грошей і підключив відповідні послуги, а що робити простому користувачеві? А простий користувач може просто відмовитися від використання неякісного сайту, і його браузер повинен йому в цьому допомогти.

Вже зараз звіт блокувальників реклами, який виводить цифирки, можна вважати якимось антирейтингом сайту. Чим більше антирейтинг — тим гірше сайт і автору треба б щось з цим зробити. При деяких значеннях можна просто виводити варнинги про те, що відвідання цього сайта може бути небажаним. Причому я вважаю, що браузер повинен ділитися своїми знахідками з спільнотою. Можна створити глобальний рейтинг кожного сайту, чіпляючи заповітні цифирки до кожної посиланням, щоб випадково не перейти кудись туди, де користувача чекає «поганий досвід». Звичайно, автоматизувати можна все. Тому можна створити кілька рейтингів, частина з яких будуть вести живі люди, вручну перевіряючи код, перевіряючи їх ліцензії та якість коду, якість сайту в цілому. Звичайно ж, механізм повинен бути децентралізованим і непідконтрольним конкретним особам. Нехай користувач сам вирішить, на які підписки буде підписаний.

Індивідуальні налаштування сайтів

Кожен сайт або група сайтів повинні мати свої індивідуальні настройки, подібно до того, як це можна було налаштувати в старій Опері (до 12-х версій включно). Тільки цей механізм можна поліпшити.

По-перше, ідентифікувати сайти не тільки по домену або піддомену, але і по регулярному виразу в домені. Або за отриманим IP-адресою цього домену. Приміром, я не хочу виконувати скрипти на сайтах/ресурсах від Яндекса (про причини див. далі), я б міг знайти списки блоків IP-адрес, що належать Яндексу і ніжно перебанить виконання неблагонадійного коду. Це просто і легко. Але на даний момент я змушений обмежитися лише баном окремих доменів (а їх всіх я не знаю!), занесенням всіх діапазонів адрес в фаєрволл, що вкрай незручно, або ж підняттям свого DNS-сервера із зазначенням адрес для маски *yandex*, що я роблю на даний момент.

По-друге, щоб не плодити сутності, можна створити базові профілі, такі як «довірений сайт», «звичайний сайт», «поганий сайт», «для сайтів від Васяна», «для Алиэкспресса» і присвоювати свої установки того або іншого сайту. І залежно від профілю, буде відправлятися User-Agent, послідовність і вміст заголовків, підтримуватися або неподдерживаться завантаження стилів, шрифтів, скриптів і всього іншого, що тільки можна налаштувати. Навіть визначити, чи можна перехоплювати правий клік миші, з якою точністю запускати таймери або відтворювати анімацію та звуки (з незрозумілою метою на AliExpress навіщо-то з’являється запит на MIDI). Можна передбачити і налаштування, мінливі рандомно, такі як випадкові значення User-Agent з великого списку або довільний проксі для конкретного сайту (про це пізніше).

Копіювання і вставка

Здавалося б, що може бути основною фунцією в програмах, які відображають текст? Робота з виділенням/копіювання/вставка тексту звичайно ж!

На жаль, але навіть з простим виділенням вже починаються проблеми. Ви пробували виділити посилання? У браузері, пошті, в ЧАТ? І як воно? Десь посилання починає перетягувати, де-то здійснюється перехід по ній, навіть якщо ви не відпускали кнопку, а де-то треба цілитися в міліметровий зазор, щоб мати можливість виділити її. Виділення картинок — окрема лотерея, часом цього взагалі не можна зробити, крім як натиснувши секретну хакерську комбінацію CTRL+A. Крок вправо-вліво — і у нас виділена вся сторінка, а не той абзац, в який ми цілилися.

Або текст може взагалі не виділятися, створюючи ілюзію зламаною кнопки мишки. Якщо навіть ми прицілилися і змогли виділити текст, то не факт, що при натисканні правої кнопки миші у нас не з’явиться круте попередження виду «Текст цієї сторінки круто захищений». Або взагалі нічого не з’явиться, благо браузери навчилися відламувати такі скрипти автоматично. Чи не вилізе прохання надіслати звіт про знайдену на сторінці опечатке. Я під час читання тексту часто його виділяю мишею для зручності сприйняття, а подібна гидота неймовірно бісить.

Зі вставкою ще гірше. Чи буде збережено форматування чи ні? Іноді це залежить від того, чи використовуєте ви хоткей, або користуєтеся «коліщатком» — різне поведінку, для начебто одного дії. Будуть прогалини в тому, що вставляється в сторонні додатки, якщо між блоками не було пробілів? А іноді від форматування не позбудешся: вставляєш скопійований текст у межах сторінки, наприклад, в межах набирається листи, а новий абзац раптом стає жирним і/або перетворюється в цитату.

Останній писк моди: підміняти вміст буфера обміну. Ви скопіювали текст про котиків, неглядя вставили його в чат і… Огребли бан, так як разом з бажаним текстом вставилась ще й реклама ресурсу, звідки було копіювання. Звичайно, треба бути уважним і обережним, дивитися що і куди відправляєш… Але з іншого боку, чому мої інструменти для перегляду тексту дозволяють собі так поводитися?

Розподілене сховище

Локальне кешування контенту, про який ми говорили раніше — це тільки частина потреб сучасного користувача інтернету. Друга важлива частина проблеми — кешування контенту на сервері, на шляху до клієнта на різних CDN і тому подібному. Фактично, невеликі сайти можуть зіткнутися з тим, що потрібно занадто багато трафіку щоб доставити, по суті, практично статичні файли. Все знову і знову. І у них практично немає ніякого виходу, крім як годувати яка зажралася CloudFlare, щоб вона надавала свій розподілений кеш.

Читайте також  Двадцять завдань (за шаленої, чудовою геометрії)

У самій же CloudFlare є цікава технологія RailGun: www.cloudflare.com/website-optimization/railgun — це крутий костиль, який дозволяє кешувати не кешируемое, за допомогою якого вони не просто кешируют старі версії сторінок, а ще роблять diff-и з ними і відсилають вже пересобранную різницю зі своїх серверів. Таким чином виходить, що можна оновлювати сторінку всього 1 пакетом даних в 400 байт (число взято з опису), а оригінальний сервер може хоститься хоч на телефоні (насправді це не так). Але за таку штуку треба платити від $200 в місяць, що дуже суттєві гроші для невеликих сайтів.

Ех, а якби можна було розділити контент на невеликі керовані елементи… Але так, про це пізніше. Поки є милиці начебто diff і cloudflare з його Railgun.

А ось розподілена файлова система IPFS вже існує. А ще існує ZeroNet, який вже прямо зараз, з коробки, дозволяє хостити вебсайти распределенно. Можна спробувати завантажити клієнт і заглянути в цю незвичайну мережу, якій не потрібні сервера!

Втім, нічого нового тут немає. Років 15 тому у популярних веб-сайтів був свій десктопний клієнт (і часом не один) і щось на зразок торрент-роздач в комплекті до нього. Та й сьогодні це існує в тому чи іншому вигляді, наприклад, додаток WikiTaxi, яке дозволяє тримати Вікіпедію в своїй кишені. А ще я згадую про таку штуку як AportExpress, всередині якої був повноцінний шаблонизатор і рідні шаблони Апорту з сервера, який збирав сторінки на клієнті.

Покращена робота з мережею

Ви можете собі уявити, що іноді люди виходять в мережу через різні GSM-модеми, де і без того невисока швидкість дорезается поганими умовами прийому сигналу / поганими умовами договору? І існують сайти на кшталт imgur.com/a/XJmb7, де лежать ну дуже красиві речі, але і вага самої сторінки, включаючи усю графіку, перевищує десятки мегабайт. От тільки проблема — такі сторінки неможливо побачити при такому з’єднанні.

Сьогодні браузер намагається вантажити всі картинки одночасно, сповільнюючи завантаження кожної з них (для цього ще роблять купу суб-доменів, щоб обійти обмеження на кількість з’єднань). Через якийсь час настає таймаут і сервер просто закриває з’єднання, залишаючи нас з битими картинками, які добре якщо взагалі як-то відкриються. Якщо натиснути F5, то на мить відбудеться відтворення (скасування завантаження і відображення того, що встигло прогрузится), а потім завантаження піде з самого початку, без докачки індивідуальних зображень. А ще ви часто помічали, що браузер «завантажує» сторінку або файл спочатку зі швидкістю в 50к/сек, потім в 20кб/сек, а потім 3кб/сек? Це означає, що реальна швидкість завантаження з якоїсь причини стала дорівнює 0 байт/сек, а обірвати з’єднання і почати заново загрожує великими труднощами, навіть якщо технічно докачати файл можливо.

А адже вебсервер може генерувати torrent-файли для статики і роздавати їх в автоматичному режимі, що дозволить як докачувати файли, так і знімати навантаження з мережевого каналу! По своїй суті, torrent-файл є лише список контрольних сум, які дозволяють завантажувати файл з довільного місця і перевіряти коректність скачаного. Таким чином навіть недокачані картинки можна буде легко викачати, нехай з 5-ї спроби, точно вирішити питання з версионностью і валидациями кеша.

І раз вже ми видаємо клієнту метаданих про файли, то можна оформляти всю сторінку як «одну велику роздачу» у вигляді одного пакета з даними, всередині якого буде вказана інформація про сторінку, так і про файли-картинках, стилях, пов’язаних сторінках та інших референсах (в тому числі на інші «роздачі»), такий собі маленький бінарний sitemap. Це дозволить краще кешувати/прекешировать сайти, швидше завантажувати всі ресурси, не чекаючи повної прогрузки сторінки або скриптів і навіть оптимізувати сайти для людей з обмеженими можливостями, пропонуючи їм розширену навігацію по сторінках. Чи не завантажувати якісь елементи відразу, наприклад, Эппловые іконки на половину екрану або безліч відео.

На жаль, сучасні розробники намагаються боротися з цими проблемами по-своєму, не надаючи налаштувань і реалізуючи все це власними руками, тобто «як вийде». Приміром, завантаження картинок/відео через купу JS, безліч доменів і обробку скролінгу сторінок, із-за чого швидко прокрутити сторінку до «десятої сторінки» вже не можна, що мене дуже сильно дратує. На щастя, деякі великі вендори, такі як Сяоми почали з цим боротися, питаючи кожного разу «Ви хочете відтворити відео? За це може зніматися додаткова плата!», але поки не можна налаштувати автоматичний заборона на подібні неподобства, так і способів обходу з боку розробника все ще багато.

Якщо вже ми торкнулися нескінченні сайти з нескінченною прокруткою, то хотілося б зауважити: ніщо не заважає показувати користувачеві порожній остов всієї гігантської стрічки, щоб він міг спокійно орієнтуватися в ній, а сам контент довантажувати динамічно. Але цього ніхто не робить.

Завантаження сайтів

Припустимо, я знайшов сайт з мануалами з вирощування полуниці. Захопився, загорівся ідеєю, поїхав на дачу і… І зіткнувшись з проблемами зрозумів, що треба було кожну сторінку сконвертить в PDF, а тільки потім їхати на дачу. Чому в PDF? Та тому, що сучасні сторінки навіть поштучно не хочуть зберігатися коректно, а що буде відображене при відкритті локального HTML і куди воно напхає Cookie залишається тільки гадати.

А адже в минулі часи я міг взяти Teleport Pro і викачати весь сайт з полуницею, залити це собі на телефон і спокійно поїхати на дачу! Всі картинки будуть викачані, всі посилання будуть облінкований, практично все буде працювати. Були навіть сайти з вже выкачанными сайтами — незамінна штука для навчання в ті роки, так само як і пошукові системи на JS, що працюють прямо в браузері!

Але що буде сьогодні, якщо я спробую зробити так? Мене чекає відкриття, що в сучасних сайтах динамічні сторінки, у кожної сторінки є тисяча URL-ів і я легко выкачаю три сторінки 10000 разів, ретельно їх перелинкую, а при перегляді до потрібної сторінки так і не дійду, навіть якщо вона буде завантажена (по дорозі з 50 посилань, який я повинен буду пройти точно так само, як це зробила гойдалка).

А якщо дуже хочеться? В такому разі ми сьогодні беремо і пишемо парсер сайту, выковыриваем контент (регулярками або xpath), як це перелинковываем за допомогою саморобних скриптів, додаємо індекс з гівна і палиць, може бути навіть найпростіший пошуковик. Все це займає від 1 дня до тих пір, поки не набридне. Можна просто накопипастить текст в Word і матюкатися від того, що все вставляється червоним Импактом і розмітка їде до такої міри, що на це неможливо дивитися. Можна включити записывалку відео і гортати сторінки — менш витратний варіант з часу, хоч і важити такий запис буде багато, але в наші часи це мало кого хвилює.

У цьому місці я повинен був би написати, що в ідеальному браузері мені потрібна функція викачування сайтів, щоб потім я міг легко перенести контент на телефон або будь-яке інше *автономне* пристрій. Але з урахуванням вищезазначеного, на жаль, це неможливо. А от якби наш контент був розділений на маленькі керовані елементи… Але на жаль. Тому сучасний браузер, в додачу до всього сказаного вище, повинен вміти не тільки парсити ці самі елементи, але і зберігати їх в локальній базі, версионировать і бути свого роду маленької CMS.

І не треба думати, що сучасні сайти в принципі неможливо викачати. Навпаки, в моду знову входить статика, є навіть цікаві і популярні проекти на зразок github.com/jekyll/jekyll для генерації статики. Так чому б не роздавати «исходники» сайту?

Дисклеймер: Teleport Pro тут використовується лише як найбільш відома програма для викачування сайтів, це ні разу не реклама чи ностальгія, особисто я його недолюблював з-за купи тимчасових файлів і невміння коректно парсити javascript. Моїм вибором були інші гойдалки, не так широко відомі, начебто webzip, які хоч і вимагали купу ресурсів, вставляли рекламу в сторінки, але викачували контент коректно і повністю.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *