Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

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

В этой статье исследуется сайт Aston Martin. Сайт загружается быстро — за 6 секунд. Это время было улучшено на три секунды благодаря решению проблем, связанных с неиспользующимся preconnect'ом, плохой оптимизацией главного изображения и загрузкой дополнительных стилей с другого сервера.

Также сайт использует сервис polyfill.io, который по User-Agent предоставляет набор нужных полифилов. Чтобы эти полифилы не загружались в современных браузерах, используется атрибут nomodule:



#performance

https://jakearchibald.com/2021/f1-perf-part-5/ Открыть/Комментировать

2021-04-06 12:25:40 За прошедшие три недели в канале для патронов Defront было опубликовано пятнадцать постов:

— Профилировка памяти Node.js-приложений
— Лучшие практики оптимизации видео для веба
— Специализация во фротенд-разработке
— Оптимизация стилей и их влияние на производительность страницы
— Использование SQLite как инструмента для анализа данных
— Стилизация псевдоэлементов с помощью JavaScript и кастомных свойств
— Производительность превью документов Dropbox
— Объяснение терминов, использующихся в спецификации промисов
— Использование prefers-reduced-motion для улучшения доступности
— Доступность мультиязычных документов
— Использование ASTExplorer для анализа JavaScript
— Мысли об управлении сложностью
— Способы завершения процесса Node.js
— Когда можно прервать работу своего коллеги и просить помощь
— Проблемы юзабилити и доступности прилипающих заголовков

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

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

https://www.patreon.com/myshov Открыть/Комментировать

2021-04-06 03:04:12 Дэниэл Штенберг — автор 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/ Открыть/Комментировать

2021-04-05 00:06:09 На сайте 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 Открыть/Комментировать

2021-04-04 09:50:58 Андрей Печкуров — участвует в разработке 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 Открыть/Комментировать

2021-04-03 08:06:17 Алекс Рассел из 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/ Открыть/Комментировать

2021-04-01 23:02:38 Джейк Арчибальд написал четвёртую часть из серии статей про оптимизацию производительности сайтов команд Формулы-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/ Открыть/Комментировать

2021-03-31 23:36:06 Лия Веру написала статью о том, как быстро сделать тёмную тему для сайта — "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/ Открыть/Комментировать

2021-03-30 22:34:13 Джейк Арчибальд написал третью часть из серии статей про производительность сайтов команд Формулы-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/ Открыть/Комментировать

2021-03-30 00:06:44 Марк Ноттингем — участвует в разработке протоколов 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 Открыть/Комментировать