Иван Акулов про фронтенд

@iamakulov_channel Нравится 2

Фронтенд · React · webpack · производительность · API и паттерны · Node.js
Твитер: https://twitter.com/iamakulov
Помогу с производительностью: https://3perf.com
По всем вопросам: @iamakulov
Чатик канала: @iamakulov_channel_chat
Гео и язык канала
Россия, Русский
Категория
Технологии


Написать автору
Гео канала
Россия
Язык канала
Русский
Категория
Технологии
Добавлен в индекс
02.08.2017 13:27
Последнее обновление
19.05.2019 19:32
реклама
Searchee Bot
Каталог 270k+ Telegram-каналов с удобным поиском в боте.
@ChatKeeperBot
Многофункциональный бот модератор чатов и групп.
@TGStat_Bot
Бот для получения статистики каналов не выходя из Telegram
2 187
подписчиков
~2.2k
охват 1 публикации
~375
дневной охват
~2
постов / нед.
101.1%
ERR %
1.22
индекс цитирования
Репосты и упоминания канала
16 упоминаний канала
0 упоминаний публикаций
11 репостов
ТОП каналов Telegram
KyivJS
HiPO
Frontend Doge
Frontend Doge
Gambala.live
Heisen.me (18+)
Gambala.links
Gambala.links
Родионов
Telegram Group List
Родионов
Родионов
Каналы, которые цитирует @iamakulov_channel
Веб-стандарты
Жабаскрипт
Frontend Weekend
Безос позвонит
How to Edinburgh
noTieinIT
Remote IT (Inflow)
Родионов
Родионов / Фронтэнд
Things I read
Things I read
Родионов
Нытье и тупня
Родионов
Нытье и тупня
Нытье и тупня
Web Tip @ James Akwuh
Design & Productivity
Последние публикации
Удалённые
С упоминаниями
Репосты
​​Тред Сары Дреснер про малоизвестные полезные штуки из области веб-перформанса: https://twitter.com/sarah_edo/status/1121542878956670977
Как работает JavaScript-кеш в V8

V8 — это JS-движок, который используется в Chrome и Node.js. Команда V8 рассказала, как они кешируют скомпилированный JavaScript-код и как оптимизировать приложения, чтобы они кешировались лучше: https://v8.dev/blog/code-caching-for-devs

Второе не очень полезно (если у вас тормозит приложение, то вряд ли из-за плохого кеша), а вот первое интересно:

1️⃣ Когда V8 нужно выполнить какой-то JavaScript, V8 компилирует этот JavaScript из текста в байткод. Это выглядит вот так:
Читать полностью
2️⃣ Компиляция в байткод занимает много времени (от нескольких миллисекунд до сотен, в зависимости от объёма кода и железа). Чтобы не тратить это время, V8 кеширует байткод для часто загружаемых скриптов. Часто — это больше одного раза

3️⃣ Байткод кешируется в двух местах: в памяти и на диске.
— Кеш на диске медленнее. Скомпилированный байткод нельзя записать прямо на диск, поэтому при записи его нужно сериализовать, а при чтении десериализовать. Зато этот кеш надёжный и живёт долго, даже между перезапусками Хрома
— Кеш в памяти быстрый, потому что а) байткод не нужно ни во что сериализовать и б) ну, это память, она вжух-вжух. Минус — этот кеш ограничен одним процессом (≈ одним сайтом в одной вкладке), и он быстро пропадает

https://v8.dev/blog/code-caching-for-devs
Читать полностью
​​Google Fonts accelerator, v2

Выпустил вторую версию ускорителя гугл-шрифтов! Более приятный дизайн, поддержка нескольких CSS-файлов и фиксы разных эджкейсов. Подключайте, если ещё не

https://googlefonts.3perf.com
И ещё мы запустились на продукт-ханте! Если используете скрипт и он вам нравится, поддержите нас :) А если нет, расскажите, что улучшить: https://www.producthunt.com/posts/google-fonts-accelerator
Ого, меня перевели! Если не прочитали прошлый пост на английском, читайте на русском:
Репост из: Веб-стандарты
Preload, prefetch и другие теги , которые префетчат ресурсы, резолвят домены и даже предварительно рендерят страницы для максимального ускорения. Иван Акулов в переводе на Хабре — https://habr.com/p/445264/
​​А также сделал красивую страничку со всем публичным, что мы в PerfPerfPerf сделали в рамках перформанса (надо больше!): https://3perf.com/content/
​​Preload, prefetch и другие link-теги

В HTML есть аж пять link-тегов для того, чтобы что-нибудь предзагружать:
— Например, можно загрузить и закешировать какой-то файл заранее, чтобы, когда он понадобится, он достался мгновенно
— Можно установить соединение с каким-то сервером, но больше ничего не делать
— Можно даже отрендерить целую страницу в невидимой вкладке, чтобы потом переход на неё сработал мгновенно

Это всё помогает с перформансом.

Написал подробный гайд по всем этим link-тегам. Что они делают и когда использовать каждый из них: https://3perf.com/blog/link-rels/
Читать полностью
Выбирай сердцем
anonymous poll

Пахлава вебпаку – 249
👍👍👍👍👍👍👍 71%

Ура вебпаку – 54
👍👍 15%

Хвала вебпаку – 25
👍 7%

Похвала вебпаку – 24
👍 7%

👥 352 people voted so far.
Ура вебпаку – 15%
Хвала вебпаку – 7%
Похвала вебпаку – 7%
Пахлава вебпаку – 71%
На днях потратил несколько часов, чтобы закопаться в HTTP Archive — поэтому вот вам тоже пачка данных:

1️⃣ В дампе архива от первого февраля 134 млн сохранённых http-ответов

2️⃣ 63 млн из этих ответов — это JavaScript

3️⃣ 3 млн из этих JS-файлов ссылаются на соурс-мап (через sourceMappingURL)

4️⃣ Из первых 10000 ссылок на реальные соурс-мапы резолвятся 7387

5️⃣ 3407 из зарезолвенных соурс-мапов (46%) сделаны вебпаком

Не благодарите
Читать полностью
📐 for-of, reduce и перформанс

Рандомная напоминалка: разница в скорости между for-of и reduce (или любыми другими низкоуровневыми JS-штуками) не важна почти никогда.

for-of может быть быстрее reduce-а на 5 мс, если запустить его миллион раз — но это не играет никакой роли, если бандл с приложением загружается в тысячу раз дольше
Репост из: Жабаскрипт
Почти всегда, при разговоре о производительности веб-сайта, мы говорим о времени ожидания пользователем какого-то события ("First Meaningful Paint" и тд). Мы часто обсуждаем оптимизации фронтенда и бэкенда. И это круто, но остается корень всех бед - скорость света. Часто JavaScript разработчики упускают это проблему из виду 😀

Может ли случится такое, что через 30 лет Интернет будет настолько быстрым, что сайт с сервера в Сан-Франциско будет моментально открываться в Киеве? Физики говорит, что нет.

Допустим:
1. Твой бекенд рендерит страницу (или формирует JSON) за 20мс.
2. Не существует никакого WiFi, провайдеров, маршрутизации и тд. Есть просто оптоволоконный кабель, который одним концом вставлен в твой ноутбук, а вторым напрямую в сервер в Сан-Франциско. Растояние по прямой от Киева до Сан-Франциско - 9,848км (возьмем 10 тыс км для простоты счета).
3. Скорость света в вакуме 300 тыс км в секунду, скорость света в оптоволокне будет ниже - 200 тыс км в секунду.

Если мы посчитаем время, которое проведет наш запрос в пути, то мы получим 100 мс (10 тыс / 200 тыс * 2). Быстрее получить ответ не позволит скорость света. Добавляем время оработки запроса и мы получим 120мс - в 6 раз дольше, чем наш запрос обрабатывает наш бэкенд.

========= Запрос к бэкенду ======
50ms: Kyiv -------запрос-----> SF
20ms: работа бэкенда
50ms: Kyiv SF
50ms: Kyiv SF
========= Запрос к бэкенду ======
Kyiv -------запрос-----> SF
20ms: работа бэкенда
50ms: Kyiv SF
50ms: Kyiv SF
========= TLS соединение ========
Kyiv ---представление--> SF
50ms: Kyiv SF
50ms: Kyiv SF
20ms: работа бэкенда
50ms: Kyiv
Читать полностью
(А ещё я теперь Google Developer Expert в веб-технологиях, ура!)
🎉 203
​​Ускоритель Google Fonts → googlefonts.3perf.com

Сделал микроскрипт, который ускоряет рендеринг текста с гугл-шрифтами:
🔥 Рендерит текст на секунду или на две раньше в медленной сети
✂️ Занимает всего 550 байт с gzip
💼 Аккуратно фолбечится в старых браузерах
​​В чём фишка
Если вы используете кастомные шрифты (в том числе Google Fonts), Chrome и Firefox не рендерят текст на странице сразу же. Вместо этого они держат текст невидимым несколько секунд, пока этот шрифт не загрузится. Это не очень заметно с быстрой сетью, но довольно неприятно на мобильных. А ещё это, скорее всего, влияет на конверсию и выручку.

Как это решают обычно

Обычно, чтобы решить это, используют CSS-рул font-display. Проблема в том, что в Google Fonts font-display не поддерживается, и единственная альтернатива — хостить шрифты на своих серверах, а это неудобно. (Есть ещё всякие JS-библиотеки вроде Webfont Loader, но с ними шрифт при первом посещении загружается медленнее.)

Как работает это решение

Чтобы решить это, я сделал скрипт, который фетчит CSS-файл гугл-шрифтов асинхронно, добавляет туда правила font-display и вставляет его в документ. А чтобы перформанс не падал, скрипт ещё генерирует несколько вспомогательных тегов вроде .

Какие результаты
Например, я поэкспериментировал локально на wordpress.org. Если загружать его на быстром 3G с этим скриптом, то текст рендерится на две секунды раньше, чем без скрипта.

👉 Устанавливайте: googlefonts.3perf.com
Читать полностью
(@juliarderity вообще классный, читайте его)
А тем временем продолжают кипеть страсти вокруг приватных свойств. Помимо альтернативного предложения о приватных символах (о котором я уже рассказывал), появилось дополнение к основным предложениям о приватных полях и приватных методахnew.initialize (на самом деле решает также и проблемы модификации цепочки прототипов). Но и это еще не всё. Появилось также предложение приватные декларации (честно говоря, по имеющейся информации я пока слабо понимаю мотивацию этого предложения).

Все эти три новых пропозала будут представлены уже менее чем через 2 недели на январской встрече #TC39.
Слайды к будущим презентациям:
- Private fields and methods refresher: Why they are based on WeakMaps
- Private Symbols for stage 1
- new.initialize for stage 1
- Private Declarations
Читать полностью
На ближайшей встрече #TC39 будет рассмотрена альтернатива текущим предложениям о приватных полях классов — приватные символы. Это предложение является компромиссом между приватными полями и старой версией пропозала о приватных символах, которая была ранее представлена комитету Кевином Смитом из Майкрософт.

https://github.com/jridgewell/proposal-private-symbols
Читать полностью