Defront — про фронтенд-разработку и не только
24.9K subscribers
21 photos
1.09K links
Ламповый канал про фронтенд и не только. Всё самое полезное для опытных web-разработчиков

Обсуждение постов @defrontchat

Также советую канал @webnya
Download Telegram
Пару дней назад я писал про статью Эрика Кори об оптимизации регулярных выражений. Там есть ссылка, объясняющая почему JS обогнал C++ в бенчмарке regex-dna — "How did JavaScript beat C++ at the regex-dna benchmark?"

Regex-dna — это небольшая часть бенчмарка Sunspider, на который ориентируются разработчики JavaScript-движков на протяжении уже многих лет. В ходе соревнования друг с другом, реализации движков regex-выражений стали очень продвинуты. На данный момент Chrome и Firefox используют форк движка iiregexp. Его особенность состоит в том, что он компилирует регулярные выражения на лету в оптимизированный машинный код.

Хочу добавить, что сам по себе iiregexp написан на C++. В бенчмарке из вопроса сравнивали V8 и С++ код, использующий другой движок — re2. Интересно, какой бы был результат, если бы в C++ коде использовался iiregexp...

#regexp #performance #benchmark

https://www.quora.com/How-did-JavaScript-beat-C++-at-the-regex-dna-benchmark
Эверт Пот провёл эксперимент по измерению скорости HTTP/1.1 и HTTP/2 в разных условиях — "Performance testing HTTP/1.1 vs HTTP/2 vs HTTP/2 + Server Push for REST APIs".

Основные выводы из статьи. Если очень критична скорость, то нужно продолжать компоновать множество запросов в один. Если вас интересует более элегантный дизайн API, то получение каждой сущности по уникальному URL вполне хорошее решение в условиях HTTP/2. Кэширование ответов в Firefox незначительно влияет на общий результат, в Chrome эксперимент с использованием кэша показал прирост скорости в 2.3 раза. Есть проблемы с HTTP/2 Push в Firefox — автор статьи пишет, что push в его экспериментах работал через раз.

В общем, эта статья — ещё один повод задуматься о переходе с HTTP/1.1 на HTTP/2, если вы этого ещё не сделали.

#http #benchmark #performance

https://evertpot.com/h2-parallelism/
Всегда ли WebP сжимает изображения лучше чем JPEG? Этим вопросом задался Йоханнес Сипола и написал статью "Is WebP really better than JPEG?"

Google в своих исследованиях про эффективность сжатия WebP говорил про уменьшение размеров изображений на 25-34% относительно JPEG. Йоханнес предполагает, что такая цифра получилась благодаря тому, что для создания JPEG-изображений использовался референсный кодировщик — cjpeg. В то время как существует более эффективный независимый кодировщик JPEG от Mozilla — MozJPEG. При сравнении разных наборов изображений из датасета от Kodak оказалось, что WebP уступает MozJPEG на больших изображениях. При этом во всех замерах с большим отрывом лидирует новый формат изображений — AVIF.

Выводы из статьи. Используйте WebP, когда сжимаются изображения меньше 500px, когда вы не можете использовать MozJPEG и когда вы можете использовать агрессивное сжатие с потерей качества.

#graphics #optimization #benchmark

https://siipo.la/blog/is-webp-really-better-than-jpeg
Дэниэл Александерсен поделился результатами сравнения WebP и AVIF в статье "Comparing AVIF vs WebP file sizes at the same DSSIM".

Дэниэл захотел улучшить качество изображений в своём блоге, сохранив их небольшой размер. Обычно все изображения кодировались с одними и тем же качеством. Такой подход иногда приводил к артефактам на одних изображениях и к избыточному размеру файлов на других, поэтому был выбран другой подход. Каждое изображение кодировалось несколько раз с индивидуальными настройками качества, затем бинарным поиском выбирались те изображения, которые были ближе всего к целевому показателю индекса DSSIM (аппроксимирует работу человеческого зрения и говорит о том, насколько изображения отличаются друг от друга).

При сравнении с оригинальными JPEG-изображениями медианное значение сокращения размера файлов при сжатии с помощью WebP составило 31.5%, у AVIF — 50.3%, на 85-ом перцинтиле 20% у WebP и 39.6% у AVIF. У WebP 2.7% изображений оказались больше оригинального изображения, у AVIF все изображения были меньше.

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

#graphics #optimization #benchmark

https://www.ctrl.blog/entry/webp-avif-comparison.html
Производительность стилизации в shadow DOM

Нолан Лоусон провёл небольшое исследование производительности стилизации в shadow DOM — "Does shadow DOM improve style performance?".

В пайплайне рендеринга браузера этап стилизации может занимать значительное время. В теории shadow DOM может его сократить, так как браузеру достаточно обработать инкапсулированные элементы. Проведённый бенчмарк подтвердил эту гипотезу, но только для сложных селекторов. Выигрыша относительно простых селекторов для id и class нет.

Выводы из статьи. Вариант оптимизации стилизации с помощью shadow DOM можно рассматривать при проектировании фреймворков. Shadow DOM не даёт прироста производительности относительно CSS Modules и других подобных решений для инкапсуляции стилей.

#css #performance #benchmark

https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/
Подходы использования SVG и их производительность

Тайлер Ситка сравнил производительность разных методов использования SVG на HTML-страницах — "Which SVG technique performs best for way too many icons?".

Самым производительным способом добавления SVG стал элемент <img> c data URI — 72 мс для 1000 иконок. Но при таком подходе невозможно стилизовать SVG с помощью внешних стилей. Наиболее сбалансированным способом для оптимизированных SVG оказался инлайнинг — 87 мс для 1000 иконок. Самым медленным способом стала CSS-маска — 150 мс.

Тайлер также пишет о том, что не нужно сильно задумываться о выборе подходящего метода, если на странице используется менее сотни SVG-изображений. Используйте тот подход, который нравится.

#benchmark #performance #svg

https://cloudfour.com/thinks/svg-icon-stress-test/
Анализ производительности 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