Улучшение веба с помощью OffscreenCanvas

Брайан Карделл из Igalia рассказал о преимуществах OffscreenCanvas — "Making the whole web better, one canvas at a time".

HTML-элемент canvas по статистике HTTPArchive используется чаще чем тег video. Он используется для разных целей: для отрисовки карт, для создания графических редакторов и отображения любой сложной графики.

Canvas бывает большим источником проблем производительности, так как выполнение кода отрисовки и процесс рендеринга в canvas происходят в главном потоке. Для решения этой проблемы был придуман новый API — OffscreenCanvas. С его помощью тяжёлые вычисления можно вынести в воркер. Передача готовой картинки из воркера в главный поток очень быстрый процесс и не влияет на отзывчивость страницы. Также благодаря OffscreenCanvas можно распараллелить рендеринг по нескольким воркерам, открывая новые возможности для веба.

На данный момент полноценная поддержка OffscreenCanvas есть только в Chrome. В Firefox его можно включить с помощью флага gfx.offscreencanvas.enabled. В WebKit он находится на этапе разработки.

#performance #api #webgl

https://bkardell.com/blog/OffscreenCanvas.html

Улучшение отзывчивости ввода текста

Нолан Лоусон написал статью про улучшение отзывчивости ввода текста в ресурсоёмких приложениях — "Improving responsiveness in text inputs".

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

let queued = false
textarea.addEventListener('input', () => {
  if (!queued) {
    queued = true
    requestIdleCallback(() => {
      updateUI(textarea.value)
      queued = false
    })
  }
})

Поддержка метода requestIdleCallback есть в Firefox и Chrome. В Safari он находится за экспериментальным флагом.

#performance

https://nolanlawson.com/2021/08/08/improving-responsiveness-in-text-inputs/

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

— Невыполненные обещания serverless
— Оценка проектов с помощью метода Монте Карло
— Как запомнить прочитанное
— Отключение scroll chaining с помощью overscroll-behavior
— Веб-платформа Aviasales
— Три ужасные фичи программирования из прошлого
— Проксирование сторонних скриптов с помощью Cloudflare Workers
— Оптимизация видео-обложек страницы (Hero Videos)
— Законы и принципы разработки
— Текущее состояние веба
— Создание компонента изображений для Next.js

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

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

https://www.patreon.com/myshov

Релиз Chrome 96

Вчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин по традиции рассказали обо всех новинках релиза — "New in Chrome 96".

В рамках Origin Trail появилась поддержка хинтов приоритета (priority hints). Хинты приоритета устанавливаются с помощью атрибута importance. Они используются в качестве сигналов на уровне разметки документа для управления последовательностью загрузки ресурсов.

Включена поддержка флага #force-major-version-to-100 для поднятия версии Chrome до 100. Этот флаг был добавлен для поиска потенциальных проблем парсинга строки User-Agent.

Реализована поддержка оптимизации Back/Forward Cache (BFCache). Теперь при каждой навигации браузер не удаляет из памяти ресурсы, использующиеся страницей, а отправляет их в BFCache на несколько минут. Если пользователь захочет вернуться назад на предыдущую страницу, то она будет восстановлена из этого кеша. Данная оптимизация использовалась только в Firefox и Safаri. Теперь она есть во всех браузерах.

Сделано несколько улучшений для PWA. В Chrome 96 была добавлена поддержка указания явного идентификатора приложения в манифесте с помощью поля id. Также теперь PWA-приложения могут регистрироваться в качестве обработчиков протоколов. Например, если PWA почтового клиента зарегистрируется как обработчик протокола mailto, тогда это приложение будет открываться автоматически при кликах по ссылкам с префиксом mailto:.

Есть много изменений в инструментах разработчика. Отображение содержимого запроса переехало из вкладки "Headers" в новую вкладку "Payload". В тестовом режиме добавлен CSS Overview. Появилась возможность копирования CSS-деклараций в формате, пригодном для вставки в JS, — полезное новшество для всех, кто использует CSS-in-JS. Теперь ошибки CORS в консоли можно спрятать. Добавлена поддержка эмуляции prefers-contrast и тёмной автотемы.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-96/
https://developer.chrome.com/blog/new-in-devtools-96/

Google Chrome 96 «сломал» Twitter, Discord и многое другое

После релиза Google Chrome 96 пользователи сообщают о проблемах с Twitter, Discord, Instagram, рендерингом видео и так далее. Разработчики уверяют, что им уже известно об этих проблемах новой версии браузера.

https://xakep.ru/2021/11/17/shrome-96-bugs/

Релиз TypeScript 4.5

Сегодня вышел TypeScript 4.5. Дениэл Розенвассер рассказал о всех новинках релиза.

Был добавлен новый утилитарный тип Awaited. Этот тип моделирует разворачивание промисов с помощью await в async-функциях и метода .then() у промисов. Awaited теперь используется для типизации Promise.all, улучшая вывод типов.

С версии 4.5 встроенные типы можно обновлять отдельно от компилятора. Также теперь можно оверрайдить встроенные типы, используя пакеты @typenoscript/lib-* в node_modules.

Строковые шаблонные типы могут использоваться в качестве дискрименантов в union'ах. Эта фича будет полезна при типизации ответов API.

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

Появилась возможность отключения удаления неиспользуемых импортов. Также в рамках этой фичи был добавлена поддержка модификатора type для импортируемых типов: import {someFunction, type BaseType} from "./module.js";.

Реализованы пропозалы "Ergonomic Brand Checks" и "Import assertions".

Также в этой версии должна была появиться поддержка ESM для Node.js, но она была временно удалена из-за несовместимости с экосистемой и проблем в реализации.

#release #typenoscript

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-4-5/

Рендеринг DOOM с помощью чекбоксов

Эндрю Хэли из Vercel рассказал про свой эксперимент с DOOM — "DOOM Rendered via Checkboxes".

В статье рассказывается про интеграцию библиотеки Checkboxland и WebAssembly-порта DOOM. Checkboxland — это библиотека для рисования с помощью чекбоксов на HTML-странице. С её помощью можно рендерить текст, фигуры, изображения и видео.

Для рендеринга картинки DOOM используется видео. Изображение из <canvas> захватывается с помощью метода captureStream(), преобразуется в MediaStream и передаётся методу renderVideo из Checkboxland. Таким образом получается картинка. Автор пишет про то, что на высоких разрешениях всё тормозило, поэтому он остановился на разрешении 160x100. Вполне возможно, что в будущем мы увидим какой-нибудь бенчмарк на базе этого проекта.

Статья несерьёзная, но интересная. Рекомендую заглянуть.

#webassembly #fun

https://healeycodes.com/doom-rendered-via-checkboxes
https://habr.com/ru/post/590337/ (мой перевод на русский язык)

Утечка исходных кодов из source maps (сорс мапов)

Попалась на глаза статья про потенциальные проблемы сорс мапов — "Source-maps could be revealing your private project files".

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

В общем, статья про довольно известные вещи. Я бы не стал про неё писать, если бы не вспомнил про ещё одну статью — "Топ тупых лазеек для исследования конкурентов: source map". В этой статье автор рассказывает про доступ к исходным кодам фронтенда Яндекс.Еды с помощью сорс мапов. Также он настроил переодическую автоматическую выгрузку кода в GitHub, чтобы следить за процессом разработки фронта.

Как бы то ни было, статьи полезные. И на всякий случай ещё разок проверьте, не доступны ли в проде сорс мапы для ваших проектов.

#js #security

https://levelup.gitconnected.com/automatically-generated-source-maps-could-be-revealing-your-private-projects-files-17b2d13d7da4
https://teletype.in/@opendevcast/SyYaunCHB

Открытие исходного кода фреймворка Remix

Райан Флоуренс и Майкл Джексон — авторы React Router и Reach UI — полгода назад представили новый проект Remix — фреймворк для разработки приложений с серверным рендерингом на базе React. Всё это время он распространялся платно. После привлечения трёх миллионов долларов в качестве инвестиций они открыли исходный код проекта под лицензией MIT.

По сути Remix — это конкурент Next.js. Райан и Майкл в презентации дипломатично ушли от сравнения с Next.js. Говорят, что друзья с создателем Next.js и хотят жить в мире, но по лендингу проекта видно, что Remix претендует на свой кусок пирога. Более того они поделились планами по монентизации проекта. Они планируют создавать платные сервисы вокруг фреймворка, как это сделал Vercel с Next.js.

Основные отличия от Next.js. В Remix серверный код можно размещать внутри React-компонентов. Кастомный транспилятор удаляет этот код при создании бандла для клиента, и оставляет в серверной сборке. То есть это что-то похожее на серверные компоненты из React 18. Ещё очень большой упор в презентации был сделан на эргономику работы с формами — выглядит всё, действительно, очень удобно и привычно. На сайте проекта также говорится про улучшение флоу загрузки приложения, но над этой фичей работает core-команда React, а не Remix, и она появится в Next.js (или уже появилась?).

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

#announcement #react #jsframeworks

https://remix.run/ (сайт проекта)
https://www.youtube.com/watch?v=wsJaUjd1rUo (презентация Remix)

Поиск причины деградации времени сборки Webpack 5

Оуэн Хэннесси поделился историей поиска бага, из-за которого время запуска dev-сервера Webpack замедлилось в пятнадцать раз — "Understanding why our build got 15x slower with Webpack 5".

Проблема возникла после добавления невинной тёмной темы. Первые подозрения упали на CSS-in-JS-библиотеку Linaria. С помощью профилировщика внутри библиотеки была найдена проблемная функция, в которой использовался метод массива .concat(). Переписывание кода без использования .concat() решило проблему. Однако оставались вопросы, из-за того что в оригинальном коде просадки скорости не было при сборке проекта с помощью Webpack 4. Надо было исследовать исходники V8.

В V8 у метода .concat() есть две ветки выполнения кода — медленная и быстрая. Медленная ветка начинает работать в том случае, если движок хотя бы один раз устанавливал Symbol.isConcatSpreadable. В Webpack 5 это происходило в коде, отвечающем за обратную совместимость с четвёртой версией. Для решения проблемы разработчики Webpack добавили экспериментальную опцию backCompat, которая полностью отключает обратную совместимость, избавляясь от ещё большего количества проблемного кода.

#v8 #performance #webpack

https://engineering.tines.com/blog/understanding-why-our-build-got-15x-slower-with-webpack

Не пишите квадраты

Степан Зубашев критикует современные тренды написания JavaScript-кода — "Обращение к Javanoscript-сообществу: перестаньте писать квадраты".

Популярность функциональных методов для работы с массивами и современные фичи JavaScript открыли двери для очень лаконичного кода. Но иногда чрезмерное увлечение лаконичностью приводит к падению производительности. В статье на примере использования .concat() внутри .reduce() рассказывается, почему это может оказаться серьёзной проблемой.

source.reduce(
  (acc, item) => acc.concat(func(item)),    
  [] 
);

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

Степан призывает не ставить в абсолют краткость кода и задумываться о производительности.

#js #algorithm #performance

https://habr.com/ru/post/590663/

SVGcode — конвертация растровых изображений в SVG

Томас Штайнер рассказал про новый инструмент для конвертирования растровых изображений в SVG — "SVGcode: a PWA to convert raster images to SVG vector graphics".

SVGCode — это PWA, с которым можно работать в вебе, оффлайн или установить локально. Поддерживаются все популярные растровые форматы — JPG, PNG, GIF, WebP, AVIF. Из коробки работает постеризация — уменьшение количества цветов изображения — для улучшения качества конвертации.

Приложение создано на базе WebAssembly-версии утилиты potrace. В SVGcode есть все фичи полноценных приложений: буфер обмена реализуется с помощью Async Clipboard API, доступ к файловой системе с помощью File System Access API, есть возможность регистрации SVGCode на уровне ОС в качестве обработчика файлов. Исходный код распространяется под лицензией GPL.

#noscript #tool #pwa

https://web.dev/noscriptcode/

Ускорение установки HTTPS-соединений

Саймон Харн рассказал о том, как HTTPS-сертификаты влияют на производительность сайта — "The Performance Cost of EV Certificates".

Есть три основных типа HTPS-сертификатов: Domain Validation (DV), Organisation Validation (OV), Extended Validation (EV). DV-сертификаты выдаются на основе факта принадлежности домена, как в Let's Encrypt. OV- и EV-сертификаты выдаются организациям за оплату.

EV-сертификат предоставляет большее количество информации для пользователя, но по-большому счёту он не сильно отличается от OV. Вы могли видеть, что сайт использует EV-сертификат, когда в адресной строке рядом с иконкой замка зелёным текстом отображался владелец сертификата. С версии Chrome 77 такие сертификаты отображаются обычным значком замка без зелёного текста.

OV-сертификаты валидируются на стороне веб-сервера отправкой запроса на сервер организации, выдавшей сертификат. EV-сертификаты не могут валидироваться на стороне веб-сервера, поэтому их валидация происходит на клиенте, замедляя установку HTTPS-соединения. Задержка наиболее заметна в странах бывшего СССР, в Восточной Австралии, Канаде и большинстве стран Африки. Некоторые организации сталкивались с минутной задержкой для пользователей в Китае. Эта проблема решается переходом на OV-сертификат.

#http #performance #security

https://simonhearne.com/2020/drop-ev-certs/

Использование focus-visible с обратной совместимостью

Патрик Лаук поделился своим подходом для управления стилями фокуса — ":focus-visible and backwards compatibility".

По умолчанию браузеры отображают фокус только там, где нужно. Например, фокус не устанавливается при клике на кнопку с помощью мыши, но появляется при переходе к кнопке с помощью клавиатуры. Для пользователей это логичное поведение. Когда фокус кастомизируется с помощью псевдокласса :focus, он начинает отображаться во всех ситуациях, вызывая замешательство у пользователей и дизайнеров. Для решения этой проблемы в стандарт был добавлен псевдокласс :focus-visible, с помощью которого можно кастомизировать фокус, не ломая его стандартное поведение.

Для кастомизации фокуса во всех браузерах с учётом :focus-visible Патрик советует использовать следующий подход:

/* стилизация фокуса */
/* в устаревших браузерах */
button:focus {
  outline: dotted 5px teal; 
}

/* отключение стилей `:focus` */
/* в современных браузерах */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* стилизация фокуса */
/* в современных браузерах */
button:focus-visible {
  outline: dotted 5px teal; 
}

На данный момент :focus-visible поддерживается во всех браузерах (в Safari за экспериментальным флагом).

#css #a11y

https://www.tpgi.com/focus-visible-and-backwards-compatibility/

Сравнение вычислительной производительности WebGL и WebGPU

Денис Радин сравнил вычислительную производительность WebGL и WebGPU — "WebGPU computations performance in comparison to WebGL".

WebGPU API предоставляет доступ к возможностям современных видеокарт. Для поддержки вычислений в нём используются вычислительные шейдеры (compute shaders). В WebGL что-то подобное можно сделать с помощью хака преобразованием данных в текстуру и их дальнейшей обработкой с помощью пиксельного шейдера. Так как WebGPU разрабатывался с учётом поддержки произвольных вычислений, в задаче на перемножение матриц он работает в 3,5 раза быстрее WebGL.

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

#webgl #webgpu #performance

https://pixelscommander.com/javanoscript/webgpu-computations-performance-in-comparison-to-webgl/
http://pixelscommander.com/ru/javanoscript/webgpu-computations-performance-in-comparison-to-webgl/ (на русском языке)

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

— Сандбоксинг кода с помощью QuickJS в Figma
— Неожиданное поведение custom properties с !important
— Отключённый JavaScript не спасает от фингерпринтинга
— Улучшение производительности Node.js-приложений
— Проблемы оверинжиниринга
— Оптимизация фреймворков с помощью инлайнинга ресурсов
— Идеальная ссылка
— Миграция проектов BBC на HTTPS
— TypeScript-конфиги для разных проектов
— CSS — это интерфейс
— Миграция кодовой базы Etsy на TypeScript

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

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

https://www.patreon.com/myshov

Изоляция сайтов в Firefox 94

Анна Гахокидзе из команды разработчиков Firefox рассказала про улучшение безопасности браузера с помощью изоляции сайтов — "Introducing Firefox’s new Site Isolation Security Architecture".

Старая архитектура Firefox для рендеринга контента сайтов использовала непривелигированные процессы. Эти процессы ограничены в выполнении операций, например, им запрещено записывать файлы на диск. Однако несколько сайтов могли быть соседями в рамках одного процесса, и зловредный сайт потенциально мог прочитать память другого сайта.

После обнаружения атак Meltdown и Spectre, которые эксплуатируют CPU для доступа к памяти сайтов-соседей, разработчики Firefox приступили к работе над новой архитектурой (проект Fission). В этой архитектуре все сайты находятся в независимых процессах. Изоляция сайтов позволяет решить проблему утечки данных через разделяемую память на системном уровне. Также изоляция улучшает стабильность браузера — критические ошибки не выходят за рамки выделенного процесса и не затрагивает сайты в соседних вкладках.

Переход на новую архитектуру с полноценной изоляцией сайтов был завершён в Firefox 94.

#firefox #security

https://hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/

Создание паттернов с помощью CSS Painting API

Джордж Франсис написал туториал по созданию генеративных паттернов с помощью CSS Painting API — "Creating Generative Patterns with The CSS Paint API".

Разработчики браузеров уже несколько лет работают над проектом Гудини (Houdini) — набором API для предоставления низкоуровневого доступа к CSS-движку. В этот набор входят CSS Painting API, CSS Layout API, CSS Properties and Values API и другие API.

CSS Painting API предоставляет низкоуровневый доступ к средствам рендеринга CSS. С его помощью разработчики могут создавать JavaScript-ворклеты для рендеринга изображений. Эти ворклеты могут быть использованы везде, где можно использовать изображения, например, в background-image и border-image. В туториале рассказывается об использовании CSS Painting API для создания генеративного арта.

Поддержка CSS Painting API на данный момент есть только в Chrome и других браузерах на базе Chromium.

#css #tutorial

https://css-tricks.com/creating-generative-patterns-with-the-css-paint-api/

Браузер. Рендеринг. Производительность

Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".

В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере about://tracing и профилировки страниц с помощью вкладки Performance в DevTools. Рассматриваются несколько случаев оптимизации производительности с объяснением, почему это работает именно так. При подготовке доклада Сергей консультировался с официальной документацией Chromium и с разработчиками браузера.

Доклад немного хардкорный, но полезный. Рекомендую посмотреть.

#performance #chromium #internals #talks

https://www.youtube.com/watch?v=tbDxm1hiEI4

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

Станислав Лашманов поделился опытом ускорения отрисовки комментариев в 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/