Defront — про фронтенд-разработку и не только

Анализ производительности HTTP/3

В блоге requestmetrics была опубликована статья, посвящённая анализу производительности HTTP/3 — "HTTP/3 is Fast".

HTTP/3 — это новая версия протокола HTTP, работающая поверх транспортного протокола QUIC. Более подробно про HTTP/3 можно почитать в публикации HTTP/3: the past, the present, and the future.

В этой же статье проверялась скорость загрузки трёх видов сайтов: простой сайт, тяжёлый сайт, SPA. Ресурсы загружались с трёх разных серверов в Нью-Йорке, Лондоне и Бангалоре. Чем больше было расстояние, тем лучше всего показывал себя HTTP/3. Если для передачи данных между Миннесотой и Нью-Йорком выигрыш скорости составил более 200 мс, то для соединения между Миннесотой и Бангалором выигрыш был уже 3-4 секунды. Такой значительный разрыв в скорости загрузки объясняется тем, что в HTTP/3 решена проблема с “head-of-line blocking” — блокировкой передачи данных во время потери пакетов.

#http #performance #benchmark

https://requestmetrics.com/web-performance/http3-is-fast

За прошедшие две недели в канале для патронов Defront было опубликовано двенадцать постов:

— Гриды для раскладок, флексы для компонентов
— Миграция плейера asciinema на Solid.js и Rust
— Лог жизни за десять лет
— Изображения и блокирование перехода в ждущий режим
— Советы начинающим программистам
— Ликвидация редиректов
— Уменьшение зависимости от псевдоэлементов
— Типизация JSON.parse(JSON.stringify(x))
— Различия между SLO, SLA и SLI
— Как справляться с неудачами и ошибками
— Анализ взаимосвязи JavaScript-ошибок и производительности
— Адаптация HTML для режима чтения

Становитесь патроном канала на Patreon, чтобы получить доступ в Defront Plus (более 320 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Возможно, вам не нужен Rust и WASM, если у вас есть JavaScript

Увидел в канале @ufostation ссылку на статью Вячеслава Егорова про анализ проблем производительности библиотеки source-map — "Maybe you don't need Rust and WASM to speed up your JS".

Авторы source-map переписали основную логику библиотеки на Rust и WebAssembly, чтобы улучшить производительность. Егор решил проверить оригинальный код на предмет возможных оптимизаций. Там были найдены и исправлены проблемы, связанные с неоптимальной сортировкой, была уменьшена нагрузка на сборщик мусора заменой большого числа объектов типизированным массивом с ссылками на нужные данные, была испралвена проблема с деоптимизацией кода, связанной с передачей двух аргументов в функцию, которая ожидает на вход три аргумента.

В результате всех оптимизаций JavaScript-код стал уступать по скорости Rust и WebAssembly всего лишь на 15%.

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

#performance #js #internals #webassembly #rust

https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
https://habr.com/ru/post/350018/ (перевод на русский)

Топ-10 статей 2021 года

Всех с наступающим Новым Годом! Хочу подвести итоги уходящего года подборкой наиболее интересных статей, опубликованных в 2021 году.

— Не пишите квадраты — Степан Забушев критикует современные идиомы программирования в JavaScript

— Как Google Closure Compiler помог в разработке TypeScript — Люк Хобан про историю появления TypeScript

— CORS — история появления и нюансы использования — Джек Арчибальд объясняет работу CORS с помощью интерактивных примеров

— Использование базы данных SQLite на статическом сайте — Phiresky рассказывает про уникальный подход к работе с базой данных на статических сайтах

— Разрыв в производительности на мобильных устройствах — Алекс Рассел рассказывает о причинах плохой производительности сайтов

— Как читать спецификации web-стандартов — Эмили Старк делится советами по эффективному чтению стандартов

— Пара слов о @layer — София Валитова про новый CSS-стандарт, упрощающий работу с каскадом

— Руководство по оптимизации метрик Web Vitals — Барри Поллард рассказывает про оптимизацию метрик Web Vitals

— Как уменьшить размер node_modules — Кристоф Наказава делится советами по уменьшению размера зависимостей

— Изменение размеров изображения с учётом его содержимого в JavaScript — Алексей Трехлеб в интерактивной статье рассказывает про алгоритм Seam Carving

Важность тестирования сайтов на слабых устройствах

Эрик Бейли призывает тестировать сайты на слабых устройствах — "Test Your Product on a Crappy Laptop".

Если аналитические данные показывают преобладание пользователей с мощными устройствами, это не означает, что нужно ориентироваться только на состоятельную аудиторию, это означает, что нужно проверить работу сайта на недорогих ноутбуках или смартфонах. Пользователи слабых устройств часто не могут нормально пользоваться сайтом, поэтому они выпадают из аналитики. Такими пользователями могут быть состоятельные люди.

Чтобы контролировать доступность сайта для всех категорий устройств, Эрик предлагает проводить регулярные юзабилити-тесты на слабых устройствах. Также он предлагает купить дешёвый ноутбук (crapbook) и периодически вести на нём разработку.

У меня есть небольшая история на эту тему. Как-то мне пришлось работать на слабом ноуте, благодаря этому я нашёл редкую проблему с перформансом в React DevTools. Если бы работал на мощном ноуте, то проблема осталась бы незамеченной.

#performance #mobile

https://css-tricks.com/test-your-product-on-a-crappy-laptop/

Причины отсутствия поддержки AVIF в Safari

Джон Хеншоу написал небольшой пост про причины отсутствия поддержки AVIF в Safari — "Why WebKit supports AVIF but Safari does not".

Поддержка AVIF есть в Chrome и Firefox, единственным браузером, который не поддерживает новый формат изображений, остаётся Safari. Похожая ситуация была с WebP — Safari стал последним браузером, который добавил его поддержку. Со стороны это может показаться странным, потому что декодер AVIF был добавлен в WebKit в апреле 2021. Проблема заключается в том, что Safari не использует код WebKit для декодирования изображений, он делегирует эту работу системным библиотекам. Это означает, что поддержку нового формата в Safari стоит ждать тогда, когда его поддержка появится на уровне всей операционной системы.

#graphics #safari

https://www.coywolf.news/webmaster/why-webkit-supports-avif-but-safari-does-not/

Новые метрики для измерения отзывчивости сайтов

Разработчики Chrome уже более полугода работают над добавлением новых метрик, отвечающих за измерение отзывчивости сайтов. Хонгбо Санг рассказывает, как их можно подсчитать — "Hands On with the new Responsiveness Metrics".

В Core Web Vitals за отзывчивость страницы отвечает метрика First Input Delay. FID показывает величину задержки между пользовательским событием и временем, когда это событие начинает обрабатываться. У этой метрики много ограничений: оно показывает время задержки только первого события, оно не включает в себя время обработки события, с её помощью нельзя понять, лагает ли страница.

В новых экспериментальных метриках измеряется время обработки взаимодействий пользователя (interactions) на протяжении всей жизни страницы. Взаимодействие — это комбинация логически связанных DOM-событий. Например, для нажатия кнопки на клавиатуре такими событиями будут keydown, keypress и keyup.

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

Разработчики просят посмотреть результаты метрик на своих сайтах и оставить фидбек.

#performance #metrics

https://calendar.perfplanet.com/2021/hands-on-with-the-new-responsiveness-metrics/

Как подписать JSON

Раскопал в закладках статью Лауренса Вон Хоутвена про проблему криптографической подписи JSON — "How (not) to sign a JSON object".

Задача заключается в следующем. Есть некий JSON, необходимо гарантировать его подлинность.

Самый надёжный способ — сериализация объекта и получение для него подписи (tag) с помощью симметричного шифра. Затем полученная подпись отправляется на сервер вместе с данными в формате tag,json.

Если нужно добавить подпись внутрь передаваемого JSON, то появляется проблема с UTF. Например в python благодаря UTF можно сконструировать побайтово отличающиеся объекты, но идентичные друг другу при их сравнении с помощью ==. Это потенциальная брешь в безопасности. Для решения проблемы можно отправлять сериализовнную строку вместе с данными, использовать строковую замену или использовать альтернативный формат с автоматической канонизацией UTF. Тем не менее всё это можно легко запороть, что подтверждается неудачными реализациями подписей у AWS и Flickr.

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

#security

https://latacora.micro.blog/2019/07/24/how-not-to.html
https://news.ycombinator.com/item?id=20516489 (обсуждение статьи)

Тюнинг производительности Next.js-приложений

Бен Шварц поделился рекомендациями по улучшению производительности Next.js-приложений — "Next.js Performance: Making a Fast Framework Even Faster".

Для загрузки сторонних скриптов рекомендуется использовать компонент next/script со стратегией lazyOnload, чтобы код начинал грузиться тогда, когда завершается загрузка основного кода приложения. Для вставки изображений рекомендуется использовать компонент next/image. Он берёт на себя конвертацию изображений, генерацию плейсхолдеров и поддержку ленивой загрузки. Для уменьшения размера основного бандла приложения можно использовать динамическую загрузку кода с помощью import(). Для динамической загрузки React-компонентов — хелпер next/dynamic.

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

#jsframeworks #performance #react

https://calibreapp.com/blog/nextjs-performance

Defront Feed — новости веб-разработки

Мне часто попадаются небольшие новости и статьи, которые не попадают под формат канала. Такие материалы я обычно ретвичу или делюсь ими в чате канала. Долго думал, как эффективнее доносить их до аудитории. Публиковать их здесь не хочется, так как пропадёт фишка канала с дистиллированными статьями. Поэтому решил сделать отдельный канал для такого новостного контента — Defront Feed. В нём будут публиковаться новости и мини-посты, которые не попали в Defront и Defront Plus.

Приглашаю подписаться на канал. Если у вас есть какие-нибудь замечания, идеи и любой другой фидбек, то пишите мне в лс или в чат, контакты есть в описании канала.

@defront_feed

Самые интересные факты из веб-альманаха 2021

Стефан Джудис рассказал о наиболее интересных фактах из веб-альманаха 2021 года — "Highlights of the Web Almanac 2021".

Каждый год майнтейнеры HTTP Archive и активные участники сообщества составляют веб-альманах — слепок текущего состояния веба на базе исследования более восьми миллионов популярных сайтов. В этом году в веб-альманахе было опубликовано 24 главы про HTTP, HTML, CSS, JS, приватность, производительность и т.п.

Из интересного:
— jQuery используется на 84% сайтов, React — на 8%;
— Wordpress обслуживает 33% просканированных сайтов;
— 94% сайтов используют по крайней мере один сторонний ресурс; подавляющее большинство от сервисов Google;
— если на странице подключается виджет youtube, медианное время блокирования главного потока составляет 1,6 секунд;
— 16% страниц используют бессодержательные названия ссылок: "click here", "read", "more" и т.п.;
— 22% сайтов поставляется с HSTS (HTTP Strict Transport Security);
— на 20% сайтов нет определения атрибута lang.

#web #research

https://www.stefanjudis.com/blog/highlights-from-the-web-almanac-2021/

Группировка элементов массива с помощью groupBy

На последней встрече TC39 пропозал groupBy перешёл на stage 3. Лаури Барт рассказала о том, как он работает — "Array Grouping Explainer".

Группировка элементов массива распространённая операция. Она поддерживается всеми популярными утилитарными библиотеками (lodash, ramda). Пропозал реализует похожий алгоритм из этих библиотек. Метод groupBy принимает коллбек, в параметрах которого передаются текущий элемент, текущий индекс и сам массив. Элементы массива разбиваются на группы на основе строки, которая возвращается коллбеком. В результате получается объект с распределёнными элементами массива:

const names = ['vasya', 'vasilisa', 'oleg'];
const groupedNames = names.groupBy(name => {
 return name.charAt(0);
}
// результат:
// {v: ['vasya', 'vasilisa'], o: ['oleg']}

Также в пропозале есть второй метод groupByToMap, который работает точно также как groupBy, но возвращает не объект, а Map.

#js #proposal

https://laurieontech.com/posts/array-grouping/

Fuite — инструмент для поиска утечек памяти в SPA

Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".

Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.

Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.

#debug #tool #spa

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/

TechTalks Зарплаты.ру 29.12 в 19:00 в Новосибирске

Финалим год своей любимой развлекухой — болтаем за IT под пиво и пиццу. Как обычно, в программе 2 отделения:

Открытый микрофон
Вы заранее присылаете нам свой вопрос, кейс, жалобу, доклад, стендап - что угодно, о чём бы вы хотели поговорить с IT-аудиторией. Сцена и микрофон к вашим услугам, но можно написать и анонимно — на техтолке "письмо" прочитают ведущие. 5-10 минут на ваш кейс и 10-15 минут на его обсуждение. Форма для вашего кейса

IT-игра "100-к-2" (по мотивам "Сто к одному")
Мы пристали с дурацкими вопросами к сотрудникам Зарплаты.ру — от разработчиков до сотрудников отдела продаж и маркетологов. Будем угадывать самые популярные и самые редкие ответы от наших ребят. Новогоднее настроение, подарки и кринжовый угар — что ещё нужно за 3 дня до конца года?

Руин-паб "Типография" (Новосибирск, Красный проспект, 22), начало в 19:00

Ссылка на регистрацию

Релиз Safari 15.2

На прошлой неделе вышла новая версия Safari. Джен Симмонс рассказала про основные новинки релиза — "New WebKit Features in Safari 15.2".

— Объём доступной памяти для WebAssembly увеличен до 4Гб. Была оптимизирована обработка исключений.

— Добавлена поддержка HTTP-заголовков Cross-Origin-Opener-Policy и Cross-Origin-Embedder-Policy для включения SharedArrayBuffer

— Добавлена поддержка цветового пространства P3 в canvas

— Добавлена поддержка File Access API для упрощённой работы с файлами в веб-приложениях

По набору новых фич видно, что разработчики WebKit активно работают над добавлением поддержки веб-версии Photoshop.

Safari 15.2 доступен в macOS Monterey, Big Sur, Catalina и в iOS/iPadOS 15.2.

#safari #release

https://webkit.org/blog/12140/new-webkit-features-in-safari-15-2/
https://developer.apple.com/documentation/safari-release-notes/safari-15_2-release-notes

Глубокое клонирование объектов с помощью structuredClone

Сурма из Google рассказал про новое API для глубокого клонирования JavaScript-объектов — "Deep-copying in JavaScript using structuredClone".

Самым популярным решением для глубокого клонирования объектов был JSON-хак:

const myDeepCopy = JSON.parse(JSON.stringify(myOriginal));

Он стал настолько популярен, что в браузерах были добавлены специальные оптимизации для этого хака. На данный момент он остаётся самым быстрым способом для глубокого клонирования небольших объектов. Однако он не поддерживает объекты с циклическими ссылками, Map, Set, Date, RegExp и ArrayBuffer.

Структурное клонирование — это другое название для глубокого клонирования. Оно использовалось браузерами неявно при передаче объектов с помощью postMessage и сохранении объектов в IndexedDB. Новый метод structuredClone открывает удобный доступ к этому механизму клонирования без недостатков JSON-хака:

const myDeepCopy = structuredClone(myOriginal);

Поддержка strucutredClone на данный момент есть в Firefox 94, в nightly-версии Chrome и Safari TP.

#js #api

https://web.dev/structured-clone/

За прошедшие две недели в канале для патронов Defront было опубликовано одиннадцать постов:

— Невидимый бэкдор в JavaScript-коде
— Веб-зомби
— Скромная перегрузка функций в TypeScript
— Откладывание выполнения некритичных скриптов
— Использование ссылок mailto
— Алгоритмы сжатия в HTTP
— Стриминг контента в SPA
— Эффективное решение задач и отладка
— Как работает троттлинг в Lighthouse
— UI браузера с точки зрения безопасности
— Подожди пять минут

Становитесь патроном канала на Patreon, чтобы получить доступ Defront Plus (более 300 уникальных постов). Все донаты идут на поддержку канала, покупку еды, аренду квартиры, оплату медицинских услуг и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov

Улучшилась ли скорость веба благодаря Web Vitals?

Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".

Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.

Более непредвзятую оценку может дать HTTPArchive. Данные семи миллионов сайтов показывают небольшое падение производительности за прошедший год (вывод сделан на основе изменения SpeedIndex). Но и это тоже не конец истории, так как HTTPArchive собирает данные заглавных страниц сайтов, что может значительно влиять на итоговую оценку.

Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.

#performance #research

https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/

Преимущества хранения node_modules в git

Джек Франклин из команды разработки Chrome DevTools написал статью о том, почему они коммитят зависимости в систему контроля версий — "Why you should check-in your node dependencies".

Плюсы такого подхода:
— ускорение разворачивания проекта и уменьшение нагрузки на сеть;
— гарантированная воспроизводимость сборок;
— независимость от центрального хранилища кода;
— осознанное использование зависимостей.

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

#npm

https://www.jackfranklin.co.uk/blog/check-in-your-node-dependencies/

Релиз Firefox 95

В Firefox 95 включён RLBox — технология для улучшения безопасности браузера с помощью WebAssembly. Также в этой версии для всех пользователей был включён Site Isolation.

В macOS уменьшено потребление процессора во время обработки событий. А также было уменьшено потребление энергии при программном декодировании видео. Это особенно заметно в режиме полноэкранного просмотра.

В HTML был добавлен глобальный атрибут inputmode для настройки вида виртуальной клавиатуры на смартфонах. Firefox на Android теперь поддерживает CSS-свойство cursor.

В JS-движке значительных изменений не было, но был добавлен Crypto.randomUUID() — API для получения криптографически устойчивых значений UUID. Изменено поведение свойства SpeechSynthesisEvent.elapsedTime; теперь оно возвращает время в секундах.

#firefox #release

https://www.mozilla.org/en-US/firefox/95.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95