Джереми Вагнер рассказал о своём опыте использования сервис воркеров — "Now THAT’S What I Call Service Worker!".

Джереми работал с сайтом клиента, который часто посещают пользователи с ненадёжным подключением к сети. Добавление сервис воркера со стандартной схемой кэширования всего ответа улучшило метрики производительности на 10-20%. Дальнейшее его улучшение с помощью сохранения заголовка и подвала сайта в оффлайнт-кеше и динамического формирования всей страницы в сервис воркере улучшило FCP на 40%, а LCP на 51%. В статье есть пример с подробной реализацией этой стратегии.

Выводы из статьи. Даже самая базовая интеграция сервис воркера даёт преимущества по сравнению с обычным HTTP-кешированием.

Полезная статья. Рекомендую почитать всем, кто занимается производительностью.

#performance #serviceworker

https://alistapart.com/article/now-thats-what-i-call-service-worker/

One more big news everyone!

У канала появился генеральный спонсор — Зарплата.ру. Зарплата.ру будет поддерживать всю мою работу для сообщества (Defront, MDN и т.п.) С ребятами из Зарплаты я знаком уже несколько лет. Они из Новосибирска, смело экспериментируют с технологиями у себя в компании и принимают участие в жизни IT-сообщества.

Зарплата.ру согласилась поддерживать Defront с сохранением полной независимости канала. Единственное изменение — в канале будут появляться дополнительные сообщения от спонсора два раза в месяц.

Я очень рад нашему сотрудничеству. Надеюсь, что оно будет очень продуктивным!

На прошлой неделе Ингвар Степанян рассказал о новых фичах девятой версии V8 — "V8 release v9.0".

В регулярных выражениях появилась поддержка флага /d, благодаря которому в результате выполнения регулярки (match object) появляется свойство indicies с позициями текущих скобочных групп (capturing group).

На порядки ускорен доступ к полям родительского объекта с помощью super.

Последовательность токенов for ( async of теперь больше не парсится.

В WebAssembly появилась экспериментальная поддержка инлайна враппера JS-to-Wasm для более эффективного преобразования параметров функций при их передаче из JS в Wasm. Эта фича будет особенно полезна в тех случаях, когда вызов Wasm-функции находится на горячем участке JavaScript-кода.

На данный момент V8 v9.0 находится в бете. Стабильная версия выйдет вместе с Chrome 90.

#v8 #release

https://v8.dev/blog/v8-release-90

Джаред Уайт рассказал о своей боли при работе с фронтенд-библиотеками и инструментами — "The Shocking Immaturity of JavaScript".

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

Решение проблемы — быть честнее со своими пользователями. Если библиотека находится в экспериментальном режиме, надо об этом рассказать в readme или добавить alpha к номеру версии. Если у инструмента или библиотеки есть ограничения, надо об этом тоже написать и в самом лучшем случае посоветовать подходящие альтернативы.

Не все проекты страдают от подобных проблем. Автор советует брать пример с LitElement, PostCSS, Shoelace и Webpack.

#musings #js #opensource

https://dev.to/jaredcwhite/the-shocking-immaturity-of-javascript-c70

Google в сотрудничестве с другими вендорами и партнёрами создали инициативу Compat2021

В рамках неё будет проведена работа по улучшению совместимости 5 критических для разработчиков CSS фич:
- Flexbox
- Grid
- position: sticky
- aspect-ratio
- transforms

Эти фичи выбраны на основе опросов разработчиков, статистики с HTTP Archive, анализа багов Chromium, Gecko и WebKit, результатов тестов Web Platform tests и самых популярных запросов Can I Use.

https://web.dev/compat2021/

Сегодня вышла новая версия Firefox. Крис Миллс рассказал о всех новинках релиза — "In March, we see Firefox 87".

Из экспериментального статуса вышла поддержка события beforeinput и метода getTargetRanges() для гибкого управления поведением при редактировании текста. С их помощью можно эргономично предотвратить редактирование любой части текста, сделать автоматическую замену вводимых нецензурных слов звёздочками и т.п.

Дефолтное значение Referrer-Policy было заменено на strict-origin-when-cross-origin. Это означает, что по умолчанию браузер не будет включать путь и GET-параметры в Referer.

В DevTools появилась поддержка prefers-color-scheme для эмуляции текущей выбранной темы операционной системы. В инспекторе страницы теперь можно удобно устанавливать псевдокласс :target на выбранном DOM-узле.

Добавлена фича "SmartBlock", которая стабилизирует работу сайтов при включении блокировки отслеживания. Для этого используются специальные трекеры-заглушки, которые подменяют настоящие скрипты трекеров.

Отключена поддержка Backspace для навигации по истории, чтобы предотвратить случайные переходы при заполнении форм. Для её включения (не делайте этого) нужно поменять опцию browser.backspace_action в about:config.

В версии для macOS была добавлена поддержка скринридера VoiceOver.

#firefox #release

https://hacks.mozilla.org/2021/03/in-march-we-see-firefox-87/

Джек Арчибальд начал писать серию статей про производительность сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 1".

В первой части он рассказывает про сайт команды Альфа Таури. На медленном соединении и слабом устройстве страница загружается больше минуты. Одна из основных проблем связана с тем, что рендеринг блокируется CSS, который используется для трекинга используемых шрифтов. Также на сайте есть предзагрузка изображений, которые используются в карусели в верху страницы. Изображения загружаются с большим приоритетом и занимают канал, который мог бы быть использован для загрузки критических ресурсов. Также на сайте есть неоптимизированные изображения, на которых можно было бы сэкономить больше 200kb. Джек попробовал оптимизировать сайт — время его полной загрузки снизилось до 7 секунд.

Интересная статья. Очень рекомендую почитать всем, кто занимается производительностью.

#performance

https://jakearchibald.com/2021/f1-perf-part-1/

Как оказалось в статье про CSS Nesting есть много неточностей. Роман Дворнов рассказал, как на самом деле обстоят дела с этой спецификацией в последних постах своего канала https://t.me/gorshochekvarit Рекомендую заглянуть и подписаться на его канал.

Никита Прокопов из JetBrains написал статью про внутреннее устройство эмоджи — "Emoji under the hood".

В самом простом случае эмоджи — это одна кодовая позиция (то есть символ) из Unicode-таблицы. Сами изображения эмоджи находятся в шрифтах операционной системы: Apple Color Emoji (macOS/iOS), Segoe UI Emoji (Windows), Noto Color Emoji (Android). Приложения и сайты могут поставлять свой уникальный набор глифов эмоджи.

Большой набор эмоджи создаётся с помощью комбинации нескольких кодовых позиций Unicode — кластера графем. Например, два эмоджи можно объединить в один с помощью кодовой позиции U+200D (ZERO-WIDTH JOINER). Если эмоджи представляют людей, им можно задать оттенок кожи с помощью специальных модификаторов U+1F3FB..U+1F3FF и т.п.

Очень интересная статья. Рекомендую почитать всем.

#programming

https://tonsky.me/blog/emoji/

Швета Пандитрао и Мустафа Эмре-Асер из команды разработки Chrome рассказали о грядущем использовании HTTPS в качестве дефолтного протокола для навигации по интернету — "A safer default for navigation: HTTPS".

На сегодняшний день HTTPS использует подавляющее число сайтов. Поэтому начиная с Chrome 90 сайты по умолчанию будут открываться по HTTPS при вводе их адреса без указания протокола. Это позволит немного сократить время на установку HTTPS-соединения.

При переходе на сайт без поддержки HTTPS Chrome будет откатываться на использование HTTP. То есть если ваш сайт работает по HTTP, в новых версиях Chrome он будет загружаться немного медленнее из-за первичной попытки установки HTTPS-соединения.

#chrome #performance

https://blog.chromium.org/2021/03/a-safer-default-for-navigation-https.html

Джейк Арчибальд написал вторую часть из серии статей про оптимизацию производительности сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 2".

Во второй части Джейк исследует производительность сайта Alfa Romeo. На сайте подключается скрипт, который скрывает экран загрузки. Он загружается с очень низким приоритетом, из-за чего экран загрузки отображается очень долго. Проблема заключается в том, что скрипт подключается внизу страницы с атрибутом defer. Поэтому браузер сначала начинает загружать изображения и другие ресурсы, а затем сам скрипт. Проблема была решена переносом скрипта в <head>.

Ещё была проблема с основным изображением сайта, которое отображалось после загрузки JS-бандла. Как оказалось, разработчики использовали полифил для создания адаптивных изображений. Этот полифил был заменён на <picture>, так как он поддерживается во всех актуальных браузерах.

После всех исправлений время загрузки сайта снизилось с 20 секунд до 3 секунд.

#performance

https://jakearchibald.com/2021/f1-perf-part-2/

Марк Ноттингем — участвует в разработке протоколов HTTP — написал статью о том, как читать RFC — "How to Read an RFC".

Любой RFC-документ — архивный документ. Это означает, что при исправлении ошибок и опечаток должен быть выпущен новый RFC под новым номером, а предыдущий RFC должен быть объявлен устаревшим. Для проверки статуса любого RFC-документа Марк советует использовать сайт tools.ietf.org. RFC-документы очень часто подробно описывают поведение протоколов. Поэтому попытка прочитать спецификацию "между строк" может привести к неправильной имплементации протокола.

Полезная статья. В первую очередь рекомендую почитать всем, кто периодически заглядывает в RFC.

#spec

https://www.mnot.net/blog/2018/07/31/read_rfc

Джейк Арчибальд написал третью часть из серии статей про производительность сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 3".

В этой статье исследуется сайт Red Bull. Он загружается довольно быстро — за 8 секунд. Тем не менее в нём тоже было, что улучшить.

В HTML было заинлайнено 800kb CSS. Для отрисовки страницы нужно было всего лишь 200kb. Так как браузер начинает рендерить страницу во время её загрузки, оставшиеся 600kb оказывали негативный эффект на FCP. Также была проблема с недостаточно хорошо оптимизированным основным изображением сайта. Проблема заключалась в том, что WebP для альфа-канала использует сжатие без потерь, из-за этого изображения с большими полупрозрачными областями получаются тяжёлыми.

После всех исправлений время загрузки сайта уменьшилось до 4.5 секунд.

#performance

https://jakearchibald.com/2021/f1-perf-part-3/

Лия Веру написала статью о том, как быстро сделать тёмную тему для сайта — "Dark mode in 5 minutes, with inverted lightness variables".

Основная идея заключается в том, чтобы использовать кастомное свойство для задания светлоты в цветовой модели HSL:

root {
 --l-0: 0%;
 --l-100: 100%;
}

@media (prefers-color-scheme: dark) {
 :root {
  --l-0: 100%;
  --l-100: 0%;
 }
}

body {
 background: hsl(0 0% var(--l-100));
 color: hsl(0 0% var(--l-0));
}

Это решение неидеально, так как при использовании HSL один и тот же уровень светлоты распределяется неравномерно по всему цветовому пространству. Эту проблему решает цветовая модель HCL, но её поддержка пока есть только в Safari TP.

#css #colors

https://lea.verou.me/2021/03/inverted-lightness-variables/

Джейк Арчибальд написал четвёртую часть из серии статей про оптимизацию производительности сайтов команд Формулы-1 — "Who has the fastest F1 website in 2021? Part 4".

В этой статье Джейк исследует производительность сайта Williams. С производительностью на этом сайте всё более менее хорошо — первый рендеринг контента происходит на шестой секунде. Но его можно было ускорить, так как на критическом пути рендеринга находился CSS, который подключался с внешнего сервиса. Также ещё одна проблема заключалась в том, что сайт работает по HTTP/1.1 из-за чего появляется ограничение на параллельную загрузку ресурсов. Есть проблема со сдвигом контента из-за загрузки изображения без установленной высоты и ширины.

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

#performance

https://jakearchibald.com/2021/f1-perf-part-4/

Алекс Рассел из Google рассказывает о том, как современный фронтенд влияет на веб в целом, и что можно с этим сделать — "The Mobile Performance Inequality Gap, 2021".

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

Одна из главных причин медленного веба — выбор неподходящих инструментов и неконтролируемый рост JS-бандлов. В 2017 году Алекс призывал ограничивать размер JS до 130-170KiB. Сейчас он предлагает поднять эту границу до 350KiB для JS и 100KiB для HTML/CSS/шрифтов. Это связано с тем, что в последние годы операторы сотовых сетей активно внедряли 4G. При этом вычислительная мощность среднестатистического смартфона, наоборот, не выросла. Сейчас до сих пор в бюджетных смартфонах часто используются устаревшие процессоры, построенные на базе 28нм технологического процесса. Эта ситуация в ближайшие годы изменится, так как пользователи неизбежно будут обновлять свои устройства и границу в 350KiB можно будет подвинуть ещё дальше.

Алекс призывает при выборе инструментов и принятии технических решений в первую очередь думать о пользователях, которые в подавляющем большинстве используют обычные дешёвые смартфоны, а не последний iPhone или флагманский Samsung.

#performance #mobile

https://infrequently.org/2021/03/the-performance-inequality-gap/

Андрей Печкуров — участвует в разработке Node.js — написал статью про внутреннее устройство Math.random в V8 — "[V8 Deep Dives] Random Thoughts on Math.random()".

V8 использует генератор псевдослучайных чисел (PRNG), поставляемый окружением (Node.js, Chromium) или откатывается на системный источник случайности (например, /dev/urandom в Linux), если он не был задан в окружении. После того как генератор был проинициализирован seed-значением, все последующие случайные числа генерируются детерминировано с помощью алгоритма xorshift128+ и сохраняются в пуле из 64 значений, который заполняется по мере необходимости. Использование пула заранее сгенерированных случайных чисел очень распространённый подход, который используется при реализации PRNG.

Math.random не рекомендуется использовать для задач, связанных с безопасностью, потому что под капотом он не использует криптографически безопасный генератор псевдослучайных чисел (CSPRNG). Для таких задач вместо Math.random рекомендуется использовать генератор из Web Crypto API или модуля crypto в Node.js.

#js #v8 #internals #security

https://apechkurov.medium.com/v8-deep-dives-random-thoughts-on-math-random-fb155075e9e5

На сайте V8 была добавлена страница, посвящённая статическим блокам инициализации класса — "Class static initializer blocks".

Статические блоки инициализации класса — это пропозал ECMAScript, который находится на третьем этапе добавления в стандарт. Он расширяет синтаксис класса, добавляя механизм для локализации кода, который должен быть выполнен только один раз во время инициализации кода:

class C {
  static x = ...;
  static y;
  static z;
  static {
    const obj = doSomethingWith(this.x);
    this.y = obj.y;
    this.z = obj.z;
  }
}

Поддержка сlass static initializer blocks появится в Chrome 91. Также посмотреть на эту фичу в действии можно уже сегодня в Chrome Canary.

#js #proposal

https://v8.dev/features/class-static-initializer-blocks

Дэниэл Штенберг — автор curl — написал статью про текущую поддержку HTTP/3 — "Where is HTTP/3 right now?".

Черновик спецификации HTTP/3 вышел на финальный этап и совсем скоро станет официальным документом. HTTP/3 уже включён в Chromium. В Firefox он будет включён в ближайших версиях. По данным w3techs поддержка HTTP/3 на самых популярных сайтах составляет 14%, по данным Cloudflare — 9%.

Также Дэниэл пишет о том, что HTTP/3 быстрее HTTP/2, но пользователи, подключённые к широкополосному каналу с низкими задержками, навряд ли заметят какие-либо изменения.

#http

https://daniel.haxx.se/blog/2021/04/02/where-is-http-3-right-now/