Ускорение отрисовки комментарии Хабра

Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".

Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.

Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.

Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.

#performance #spa #vue

https://habr.com/ru/company/habr/blog/590111/

Фонд UI

Chrome начал спонсировать независимых разработчиков и исследователей, работающих над вебом — "The UI fund".

На грант могут податься все желающие. Нет ограничений по срокам подачи заявок. Основное условие — работа над проектом, затрагивающим CSS, HTML или UI-инструменты. Под эти категории попадают инструменты для работы c HTML и CSS, работа над спецификациями или UI-исследованиями, работа в области доступности или работа над Open UI. Ведут проект Сара Дразнер и Николь Салливан. Для поддержки будут привлекаться эксперты из индустрии.

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

#opensource #announcement

https://web.dev/ui-fund/

Адаптация Relay для большой кодовой базы

На прошедшем React Conf 2021 был представлен новый компилятор Relay для оптимизации GraphQL-запросов — "Introducing the new Relay compiler".

Relay — это фреймворк для работы с GraphQL в React-приложениях. При использовании Relay компоненты декларативно описывают необходимые им данные с помощью GraphQL-фрагментов. Компилятор Relay на этапе сборки приложения обходит компоненты и подготавливает оптимизированный GraphQL-запрос на базе этих фрагментов.

Скорость компилятора с ростом кодовой базы Facebook постепенно ухудшалась, поэтому его переписали c JavaScript на Rust. Скорость работы компилятора улучшилась в пять-семь раз. Кроме улучшения производительности новый компилятор подготовил платформу для дальнейшего развития Relay. Например, благодаря ему в Relay появилась поддержка новой директивы @required для упрощения работы с данными. Также этот компилятор лежит в основе расширения для VSCode для поддержки автодополнения имён полей в GraphQL-фрагментах. Расширение на данный момент недоступно для внешних пользователей, так как над ним ещё ведётся работа.

#react #graphql #rust

https://relay.dev/blog/2021/12/08/introducing-the-new-relay-compiler/

Отладка утечек памяти с помощью "Detached Elements" в Edge DevTools

Патрик Броссет из Microsoft рассказал о новом инструменте для упрощения поиска утечек памяти в клиентских JavaScript-приложениях — "Debug memory leaks with the Microsoft Edge Detached Elements tool".

В DevTools Edge была добавлена новая вкладка "Detached Elements". С её помощью можно получить список всех DOM-элементов, откреплённых от документа, и быстро найти участок кода, в котором были сохранены ссылки на эти элементы. Для поиска утечек также можно использовать вкладку "Memory" со снятием снапшотов памяти (доступно во всех Chromium-based браузерах), но по сравнению с "Detached Elements" это не так удобно.

"Detached Elements" будет доступен в Edge 97.

#edge #devtools #debug

https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/

Создание временных сайтов с помощью Netlify Drop

Недавно Netlify запустил новый сервис "Drop" для быстрого развёртывания сайтов.

Netlify — это платформа для публикации статически генерируемых сайтов. У неё есть много полезных штук с довольно хорошим бесплатным тарифом. Сайт Defront хостится на Netlify, всё работает как часы.

Недавно они сделали совершенно гениальный по своей простоте сервис. Если вам нужно временно опубликовать сайт, берёте папку с index.html и сопутствующими ресурсами, кидаете её в окно браузера, и у вас появляется сайт. Сервис работает даже без аккаунта на Netlify, в этом случае сайт будет работать 24 часа, потом он будет автоматически удалён.

#tool

https://app.netlify.com/drop

Релиз 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

Преимущества хранения 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/

Улучшилась ли скорость веба благодаря 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/

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

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

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

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

https://www.patreon.com/myshov

Глубокое клонирование объектов с помощью 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/

Релиз 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

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

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

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

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

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

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

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/

Группировка элементов массива с помощью 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/

Самые интересные факты из веб-альманаха 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/

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

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

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

@defront_feed

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

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

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

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

#jsframeworks #performance #react

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

Как подписать 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 (обсуждение статьи)