Привет!
Я — Артём @belov, инженер-программист.
Последние пару лет исследую «Web Perf», и с недавних пор — это моя д… twitter.com/i/web/status/1…

Будет круто, если позволите мне провести эту неделю на уровне «Advanced».
Попробую рассказать о чём-то продвинутом,… twitter.com/i/web/status/1…

Ну и чтобы хоть как-то поднять доверие к своим последующим тредам — представлюсь...

Мне посчастливилось найти своё дело ещё в юности. В школе шёл на медаль и боялся после 9 класса поступать в ссуз (х… twitter.com/i/web/status/1…

Взял красный диплом ССУЗа, и, как итог, на 18-летие я получил в трудовой книжке запись «программист». С тех пор стаж не прерывался.

Я работал фронтендером и параллельно фулл-тайм учился в лучшем ВУЗе города.
Это был как раз тот период, когда «кажд… twitter.com/i/web/status/1…

Через несколько лет получил ещё один красный диплом (уже бакалавра) и начал выступать на профессиональных конференц… twitter.com/i/web/status/1…

Двух лет выступлений хватило, чтобы на «YouTube» и «Хабре» искаться по запросу «Белов Артём фронтенд».

Со временем стал тимлидом.

Поступил в магистратуру, чтобы с профессором исследовать предиктивную загрузку веб-приложений. Уже три семестра экс… twitter.com/i/web/status/1…

На момент первого курса магистратуры, стал руководителем разработки React-направления в одной из самарских компаний.

Сейчас работаю над «Web Performance» в компании, которая отвечает за цвет купола в доме «Зингера».

По сей день не боюсь быть студентом (в широком смысле слова) — учусь, пробую себя в контестах по программированию и… twitter.com/i/web/status/1…

🧑‍🔬 Ревёрс-инжиниринг медленного Твиттера

Так получилось, что Твиттер в этой стране работает не шустро.
Давайте пр… twitter.com/i/web/status/1…

Q–Как инженеры Твиттера могут решить сетевые проблемы сервиса в этой стране?

A–Никак.

Это логично, ведь проблема по другую сторону их штаб-квартиры. Где-то на магистрали до Франкфуртского CDN, который и отдаёт нам статику.

Возможно, команда Твиттера вообще ничего не делала. Но я в это не особо верю, так как отдел мониторинга привык виде… twitter.com/i/web/status/1…

На всём пути инвестигации нам потребуется только вкладка «Network» в «DevTools», терминал и понимание работы сети.

Кстати, проверить фундаментальные знания оппонента о работе сети можно прямо на этом инфоповоде.
Если собеседник сч… twitter.com/i/web/status/1…

В случае споров — напомните историю с LinkedIn.
Если же услышите «ты не понимаешь, это другое!», то просто извинитесь.

Начнём с того, что конкретно я не могу гарантировать технику, которая инкапсулирована в осуществление троттлинга за… twitter.com/i/web/status/1…

Собственно, если полазить по Твиттеру, то всё кроме картинок и первых экранов выглядит шустрым, если не заострять в… twitter.com/i/web/status/1…

Это отголосок грамотного агрессивного кэширования. 🙂 pic.twitter.com/9vee7CdfwB

Вам пишу «F12», сам нажимаю «Cmd+Option+I», а думаю вообще про «DevTools»...

То есть, пара принципов агрессивного кэширования:

Для потенциально изменчивых ассетов это даёт непрятный эффект. Пример с аватаром...

Вы: загрузили аватар и обновил… twitter.com/i/web/status/1…

Это поведение можно переложить и на CSS.
Так что, keep in mind.

А про ETag сегодня кто-нибудь помнит ещё? 🧐

В погоне за неизменчивыми хэшами в файлах можно взять и сделать из 100 модулей, например, 1000.

Тогда эта «оптимиз… twitter.com/i/web/status/1…

Переводя зарубежный мем, получим формулу: «Чем больше вы модуляризируете приложение, тем больше оно становится».

В довесок, может быть, и выкатывают релизы теперь пореже. Эдакая параллель с LTSB-веткой Windows – черри-пикают тол… twitter.com/i/web/status/1…

А теперь, оставаясь в «DevTools» > «Network» сбросим кэш и жёстко перезагрузим страницу. Для этого — зажмите кнопку… twitter.com/i/web/status/1…

Собственно, после перезагрузки страницы тормозят все запросы: от Initial (где мы получаем HTML) до API вообще на др… twitter.com/i/web/status/1…

Характер тормозов один и тот же — очень долгий TTFB и Content Download.

Похоже, что хотя бы потери пакетов нет. pic.twitter.com/AwyAWZJ42D

Иначе, будь там PLR, тайминги загрузки для одного и того же ассета были бы разрозненные.

В стиле, что каждый 3-ий… twitter.com/i/web/status/1…

Чтож. Перепроверим мои «теории» инструментами. Выполнив сотни тестов и попыток хоть как-то определить, что теряются… twitter.com/i/web/status/1…

Да и вряд ли я теоретик... ибо не пишу на Coq.

Так почему потеря пакетов — это важно?

Потому что есть вариант переключить протокол CDN на HTTP/1.1 + доменное шар… twitter.com/i/web/status/1…

Дело в том, что H1 куда более устойчив к PLR (Packet Loss Rate), в отличии от H2.

TL;DR - Всё дело во внутреннем… twitter.com/i/web/status/1…

Доменное шардирование в 2k21…

Кстати, вспоминается та шутка про UDP, которая обычно не д

Разумеется, подобного рода «спорные» решения не должны приниматься чисто на авторитете.

Это как в Data Science пол… twitter.com/i/web/status/1…

Есть гипотеза по переходу с H2 на H1 для RU-региона?

Значит, её стоит подвергнуть АБ-тесту, где А-группа на H1, а… twitter.com/i/web/status/1…

Разумеется, Твиттер использует HTTP/2 для статики. Ведь этот протокол был заточен и под медиа-контент. Но есть проб… twitter.com/i/web/status/1…

Будь Твиттер на HTTP/1.1, то в четверг сюда можно было бы тупо не заходить.

Резюмируем.

Инженеры твиттера применили:

Послесловие:
Острых проблем с «Percieved Performance» в Твиттере не наблюдается, поэтому я их и не упоминаю. Они ни… twitter.com/i/web/status/1…

Виден инженерный подход 🥲

И это всё?

Да. Ибо продолжать генерировать нерентабельные варианты — странная затея, чтобы набрать классы.

Напри… twitter.com/i/web/status/1…

Неважно. Это нерентабельно. Инженер должен смотреть на проблему шире и оценивать не только пользу, но и затраты.

⚛️ Is React Suspense Ready Yet?

Тред о том, чему можно поучиться у инженеров «FB», что закладывали Suspense-логику… twitter.com/i/web/status/1…

Disclaimer:
Подчеркну, что тред — исследование внутреннего устройства и попытки понять решения инженеров.
Призыва к использованию здесь нет.

Вообще, первое впечатление о Suspense, достаточно обескураживающее.

Но если всё же начать разбираться и понять, что «Suspense» — термин, а затем разложить его на составляющие, то их б… twitter.com/i/web/status/1…

C Reat.lazy() все знакомы — компонент для код-сплиттинга. pic.twitter.com/6IhZXrsDeX

И для того, чтобы заменять fallback-компонент, на тот, что загружается, тут используется «алгебраический эффект».… twitter.com/i/web/status/1…

Со вторым компонентом Suspens'а (кэшем) всё неопределённо.

С ним непонятно что делать. Уже второй год.

В документ… twitter.com/i/web/status/1…

Принцип работы React-компонента с кэшем аналогичен — бросить из компонента асинхронную функцию к API, так как для н… twitter.com/i/web/status/1…

В этот момент происходит первая фаза понимания паттерна — отрицание.

— «Всмысле, кидать промис из компонента?» pic.twitter.com/dNGs1pGIvH

Затем, «гнев».

— «Так мне ещё и кэш самому надо инвалидировать? А давно это надо делать на фронте?» pic.twitter.com/mkE6d2JvSg

Потом, торгуешься, но всё же делаешь первую реализацию своего нерабочего кэша (на картинке).

— А что, пускай отдых… twitter.com/i/web/status/1…

В конце приходит и понимание того, что в Suspense, так-то, содержится конструкция `catch`, которая ожидает выбрасыв… twitter.com/i/web/status/1…

О да, и вот, без лишних предисловий, 20 твитов спустя, мы у чего-то интересного. 👏

Понятие Suspense не ограничивается только отложенной загрузкой компонентов и данных.

Рассмотрим нестабильный компо… twitter.com/i/web/status/1…

Про параметр `revealOrder` можно узнать самостоятельно. Из одноабзацевой документации.

Сейчас же, мы приглядимся ч… twitter.com/i/web/status/1…

Опция `tail` имеет 2 состояния.

Нам интересен `tail="collapsed"`, что использует алгоритм отображения компонентов… twitter.com/i/web/status/1…

Десонмтрация работы алгоритма: suspensive-react.artbelov.now.sh/74

* листайте вправо.

Продублирую работу алгоритма...

Дано: 4 компонента, обёрнутые в SuspenseList c `tail="collapsed"`.

Hint: Начните… twitter.com/i/web/status/1…

1 коммит: 3 фоллбэк-компонента из 4. Где <D />? 😒 pic.twitter.com/G4HsM8aIX5

2 и 3 коммит — поочерёдная вставка загрузившихся компонентов <A /> и <B />.

4 коммит — одновременная вставка загру… twitter.com/i/web/status/1…

Реконсилер в реакте штука сложная и она знает цену коммита в (Virtual)DOM. Это дорого.

А конкретно в данном случа… twitter.com/i/web/status/1…

Фактически — реконсилер сэкономил на рендере фоллбэк-компонента, а к следующей транзакции уже был готов и сам загружаемый компонент.

Итого, Suspense своей реализацией показывает:

Автор недели: «Буду говорить академично»
Тоже автор недели: «Кэш — отвечает за кэш»

Но если всё же начать разбираться и понять, что «Suspense» — термин, а затем разложить его на составляющие, то их б… twitter.com/i/web/status/1…

11:16

Если «React Suspense» сам себя остановил на стадии эксперимента, то это можно считать успешным релизом? 🤔

🧑‍🔬 ML & JS: Предиктивная загрузка модулей веб-приложений

В этом треде я постараюсь популярно описать положение де… twitter.com/i/web/status/1…

Disclaimer:
Автор треда постарался не жестить и особо не оперировать терминами из «Machine Learning».
Но тут всё равно очень душно. 🥵

Что мы знаем и слышали о предиктивной загрузке?

Очевидно — Guess.js

Проект был анонсирован на Google I/O 2018, за… twitter.com/i/web/status/1…

По README в Guess.js видно принадлежность автора – человек из науки, Минко Гечев.

Структура документа, будто бы не… twitter.com/i/web/status/1…

И после этого шквала событий… всё.

Проект по сей день в альфа-версии, а топ-контрибьютор — “renovate-bot”.

И може… twitter.com/i/web/status/1…

В сторону предиктивной загрузки ислледуют множество компаний. У каждой свои цели.

Вот, например, патент* MS для вт… twitter.com/i/web/status/1…

В научном же мире (пока в техническом тишина) солидные авторы, в авторитетных журналах, публикуют достойные научны… twitter.com/i/web/status/1…

Короче говоря, у меня сложилось впечатление, что предиктивный фетчинг — это не совсем про «Open Source», а больше п… twitter.com/i/web/status/1…

💡 Идея предиктивной загрузки модулей заключается в следующем:

На этапе сборки приложения, для каждого роута опреде… twitter.com/i/web/status/1…

Итог — переход на роут практически мгновенный, так как все его ассеты (или большинство) уже предзагружены и остаётс… twitter.com/i/web/status/1…

👍 Плюсы идеи:
1) меньше нагрузка на сеть.
2) меньше нагрузка на CPU, так как загрузка и парсинг выполняются с низ… twitter.com/i/web/status/1…

😓 Минусы:
1) внедрить в сборку (затратно)
2) настроить сборку (ещё сложнее)
3) отладить сборку (совсем фатально)

🧐 Что нужно понимать для интеграции предиктивной загрузки?

По сути, для реализации этой задачи хватает базового зн… twitter.com/i/web/status/1…

🦸‍♂️ На данный момент, главный «компонент» предиктивной аналитики — цепи Маркова.

en.wikipedia.org/wiki/Markov_mo…

Эта мод… twitter.com/i/web/status/1…

Модель имеет ряд разновидностей, которые тоже используются для «тренировки» на данных.

Например, скрытая Марковска… twitter.com/i/web/status/1…

Для того, чтобы в ориентированном графе приложения искать роуты с сильной связностью, используется алгоритм Тарьяна… twitter.com/i/web/status/1…

Опционально, для группировки роутов в группы, используется кластеризация методом k-средних.

В основном же, этим ме… twitter.com/i/web/status/1…

👀 То есть, предиктивная загрузка - это сборка, цепи Маркова (или скрытая Марковская модель), метод Монте-Карло, алг… twitter.com/i/web/status/1…

🧐 Итого, что мы имеем:

Предиктивная загрузка распространяется не таким уж стремительным темпом, как маркетинг «ML»… twitter.com/i/web/status/1…

🧑‍🏫 Почему «BigO» так важен в «Web Performance»?

В этом треде автор постарается объяснить, почему в «Web Perf» нет… twitter.com/i/web/status/1…

📝 Disclaimer

Автор треда — адепт старой школы и в 2k21 зачем-то учится в универе, хотя это уже не модно. Убеждён,… twitter.com/i/web/status/1…

Я не уверен, знают ли ребята без фундаментального образования, как обозначается блок модификации на блок-схеме, да… twitter.com/i/web/status/1…

Если ты начертился на бумаге алгоритмов, то ставь класс. pic.twitter.com/R0OuuGeECJ

Придётся рассказать про опыт «старой школы» — мой.

Конкретно у меня было 2 преподавателя по алгоритмизации с абсолютно разными подходами.

Алгоритмизация (опыт в техникуме)

Преподаватель давал разные задачи и принимал решения любой ценой.

Это олимпиадн… twitter.com/i/web/status/1…

Алгоритмизация (опыт в универе)

Преподаватель давал не ёмкие задачи и принимал только максимально оптимизированные… twitter.com/i/web/status/1…

Было забавно наблюдать за проверкой алгоритмов. Студент с алгоритмом на 10 блоков мог отлететь, а вот блок-схема на… twitter.com/i/web/status/1…

НО!

Я не могу понять почему не использовал даже простые оптимизации первые 2 года в своём коде, вообще.

Наверное… twitter.com/i/web/status/1…

Когда алгоритмическая база освоена, самое время расширить свои знания о структурах данных. Ещё.

Ибо если загуглить… twitter.com/i/web/status/1…

– «Плохие программисты беспокоятся о коде. Хорошие программисты беспокоятся о структурах данных и их отношениях» ©… twitter.com/i/web/status/1…

«BigO» и понимание структур данных — неотъемлемы.

Поэтому, затраты на: чтение, поиск, вставку и удаление сначала (… twitter.com/i/web/status/1…

Там еще есть такой прикольный момент, когда ты сам понимаешь цену вставки:

И вот когда у тебя в голове есть понимание структур данных, а твои руки могу зачертить блок-схему, чтобы это понял… twitter.com/i/web/status/1…

Со временем, у тебя появляются следующие повадки:

И восприятие эвристики оптимизации программы, меняются.

Нпример, помню свои мысли, когда увидел `optimize-js`: «Ог… twitter.com/i/web/status/1…

В трюк с обёртыванием объектов в `JSON.parse` уже хочется вникнуть, а не просто использовать.

Что ж, идешь и смотр… twitter.com/i/web/status/1…

А затем у тебя начинают вызывать вопрос: `React.memo`, `shouldComponentUpdate` и кастомные компараторы.

– «А зачем… twitter.com/i/web/status/1…

Итого, что нам даёт понимание «BigO» и структуры данных?

Они дают надежду, что «Web Performance» не скатится в чек… twitter.com/i/web/status/1…

И тогда, придёт и понимание того, что «UX» не заканчивается при остановке профайлера в "Idle", путь пользователя зд… twitter.com/i/web/status/1…

Если у вас есть желание поговорить о «Web Performance» (и вышке), то завтра в 19:00 МСК залетайте в «ClubHouse»!

joinclubhouse.com/event/xqYw7A8D

🚀 Web Performance Profiling: 101

В этом треде найдём все неоптимизированные строки кода в рамках одного файла и по… twitter.com/i/web/status/1…

⚠️ Disclaimer:
От этого треда не стоит ждать решения всех Performance-проблем. Ибо «DevTools» – не тот инструмент,… twitter.com/i/web/status/1…

📝 Предварительные требования:
1) Понимать что такое стек вызовов (LIFO)
2) Примерно понимать как интерпретатор JS «… twitter.com/i/web/status/1…

Крайне желательно, чтобы были подключены «SourceMap».
Сердитый вариант — `cheap-module-source-map`.

И помните, что… twitter.com/i/web/status/1…

🧑‍🏫 Дано:
Написан код, который вызывает подозрения.
Мы понимаем, что он тормозит, но не совсем понимаем, где и в ка… twitter.com/i/web/status/1…

Действия:
1) Открываем приложение и жмём «F12» > «Performance»
2) Для контраста замеров, выставляем троттлинг: ⚙️>… twitter.com/i/web/status/1…

Теперь нам необходимо записать профайлером работу замеряемого кода. Здесь может быть два алгоритма:
1) Код вызывает… twitter.com/i/web/status/1…

Когда Profile-таймлайн отобразился, то можно сразу перейти в нижнюю часть панели, и нажать «Bottom-up».

Нам будут… twitter.com/i/web/status/1…

Если исследуемая функция в ТОПе по времени, то ОК — дебажим дальше.

Если нет, можно отфильтровать функцию по имен… twitter.com/i/web/status/1…

Теперь, посмотрим на тайминги каждой строки в панели «Sources».

Тут 2 варианта перехода:
1) Нажимаем правой кнопко… twitter.com/i/web/status/1…

И тут есть пара не самых очевидных моментов при работе с этими таймингами.

Покажу на примерах...

Тайминги возле строк — суммарные.
Всегда будьте внимательны при отслеживании цепочки вызовов. «Тормозящими» могут к… twitter.com/i/web/status/1…

Для наших целей хватит `console.time`, который по-старинке а̶л̶ё̶р̶т̶а̶м̶и̶ в консоль выведет промежуточные замеры… twitter.com/i/web/status/1…

🧐 Pro Tip

Если вы дебажите цикл\генератор\подписку и устали фильтровать результаты из общей массы, то рискну напом… twitter.com/i/web/status/1…

И для адептов FP – про тайминги у чейнингов.

Они, (на данный момент?), профайлятся не всегда стабильно.

Поэтому,… twitter.com/i/web/status/1…

Q: Хотелось бы больше... а через какие курсы сейчас вкатываются в «DevTools»?
A: Сейчас? Не знаю, сам же был Early… twitter.com/i/web/status/1…

📝 Recap тредов недели от @belov для JSUnderhood: