Скрытые проблемы preload

Шаби Паникер из Google рассказала о скрытых проблемах preload — "The cost of preload".

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

Ситуация усугубляется тем, что в Chrome есть баг, из-за которого любой предзагружаемый ресурс попадает в начало очереди загрузок. Тем самым заставляя разработчиков расставлять preload у всех критических ресурсов для достижения оптимальной последовательности загрузки.

Пока в Chrome не исправлен баг, Шаби советует использовать preload только в самых крайних случаях.

Очень рекомендую почитать документ всем, кто занимается производительностью.

#performance #chrome

https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/

Релиз Chrome 93

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

Была добавлена поддержка CSS Module Scripts — импорт CSS-файлов в JavaScript. Импортированный CSS можно подключается к document или shadowRoot с помощью свойства adoptedStyleSheets.

На второй этап origin trial перешёл Multi-Screen Window Placement API, с помощью которого можно получить информацию о всех экранах пользователя и программно управлять размещением окон.

Теперь PWA могут быть зарегистрированы в качестве обработчиков URL (эта фича стала доступна в Chrome 92). Добавлена возможность кастомизации контролов управления окном PWA.

В инструментах разработчика добавлена поддержка отладки выражений от контейнера. Появилась поддержка отображения содержимого web bundle во вкладке Network. Добавлены новые опции для копирования строк из консоли. Lighthouse обновился до версии 8.1.

Chrome переходит на четырёхнедельный цикл релизов.

#chrome #release

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

App History API — улучшенный роутинг для SPA

Cэм Торогуд рассказал про новое экспериментальное API для упрощения реализации клиентского роутинга в SPA — "Modern client-side routing: the App History API".

Для управления роутингом в SPA используется History API. History API отвечает за историю браузера, всё остальное (обработка событий навигации, управление переходами между экранами, сохранение временного состояния) ложится на плечи разработчика. App History API устраняет эти недостатки, связывая историю браузера, событие навигации и переходы между экранами.

Работа с App History API происходит с помощью объекта appHistory. Для обработки событий навигации нужно установить обработчик на событие navigate. Обработчик будет перехватывать все события навигации, в том числе при отправке POST-запросов и при программном изменении истории. В API есть встроенные средства для управления процессом перехода на новые экраны SPA с возможностью установки обработчиков на успешный переход или переход с ошибкой.

На данный момент App History API доступен только в бете Chrome 95 за экспериментальным флагом.

#spa #api #experimental

https://web.dev/app-history-api/

Уменьшение объёма изображения с помощью растра и SVG

Зак Лезерман поделился опытом оптимизации тяжёлого изображения — "Vector? Raster? Why Not Both!".

У Зака возникла проблема — SVG с иллюстрацией для сайта занимало 10Мб. Он попробовал экспортировать SVG в разные растровые форматы, наилучший результат был у AVIF — 168Кб. Для дальнейшего уменьшения объёма Зак разделил иллюстрацию на две части — фон и передний план. На фоне находится градиент с простыми геометрическими фигурами, поэтому в SVG он занимает всего 4Кб. На переднем находятся сложные фигуры и фотографии, поэтому для него больше подходит растровый формат, Зак выбрал webp (74Кб). Эти два изображения были скомбинированы в одно с помощью CSS. В итоге объём изображения был уменьшен с 10Мб до 78Кб.

Статья небольшая, но полезная. Рекомендую почитать.

#performance

https://www.zachleat.com/web/vector-raster-split/

Причины сломанной загрузки JS и CSS

На сайте правительства Великобритании есть руководство, посвящённое прогрессивному улучшению — "Building a resilient frontend using progressive enhancement".

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

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

#web

https://www.gov.uk/service-manual/technology/using-progressive-enhancement

Малоизвестные возможности Node.js

Саймон Плендерлит написал несколько небольших статей, посвящённых малоизвестным возможностям Node.js — "What’s new in Node.js core?".

В Node.js появилась встроенная поддержка генерации UUID с помощью метода randomUUID из модуля crypto. Доступно в Node.js v14.17.0 и выше.

Есть поддержка AbortController для отмены асинхронных операций. Доступен в версии 14.17.0 (экспериментально), стабильная поддержка добавлена в 15.4.0.

Для импорта встроенных модулей можно использовать протокол node:. Его использование помогает отделить внутренние модули от внешних: import url from "node:url";. Доступно в v12.20.0 (ESM), v14.13.1 (ESM) и v16.0.0 (ESM, CommonJS).

Появилась поддержка promise-based API — timers/promises и stream/promises (v15.0.0 и выше). Также есть относительно старые fs/promises (первая ревизия API была добавлена в v10.0.0) и dns/promises (v10.6.0).

#nodejs

https://simonplend.com/whats-new-in-node-js-core/

Использование внешних ресурсов в JavaScript без сборки

Ингвар Степанян рассказал о способе подключения ресурсов приложения без сборки — "Bundling non-JavaScript resources".

Современные бандлеры позволяют импортировать стили, wasm-модули, изображения и т.п. После сборки такие импорты превращаются в набор URL, которые без проблем загружаются браузером. С внедрением нативной поддержки esm в браузеры такой подход вызывает проблемы, так как JavaScript-код с импортом внешних ресурсов нельзя использовать без сборки.

В статье предлагается использовать альтернативный паттерн, который распознаётся всеми браузерами — new URL('./relative-path', import.meta.url). Такой подход формирует в рантайме корректный URL ресурса для дальнейшего использования. import.meta.url нужно использовать, чтобы пути резолвились относительно текущего JavaScript-файла, а не относительно HTML-документа. Выражение new URL('...', import.meta.url) также распознаётся современными сборщиками при создании чанков с кодом.

В будущем new URL('...', import.meta.url) может быть заменён методом import.meta.resolve('...') (на данный момент в спецификации не решены некоторые вопросы). Также в браузеры потихоньку начинает проникать поддержка import assertions, но она не покрывает все возможные виды ресурсов.

#bundle #esm

https://web.dev/bundling-non-js-resources/

В следующую среду, 15 сентября в 19:00 приглашаем на Tech Talks Зарплаты.ру в Новосибирске

Поболтаем на две темы:

Full-stack: когда middle - потолок. И чтец, и жнец, и на дуде игрец - правда ли, что full-stack-разработчик умеет всё и один способен тянуть на себе весь проект? Или если способен, то куда? Узкая специализация - ограниченность или экспертность? Приходите поделиться мнением и опытом.

Токсичность в IT:
Каждый из нас рано или поздно на работе сталкивается с токсичными людьми, командами или компаниями. Предлагаем обсудить, что такое токсичность, и как она проявляется в IT-мире. Будем рады услышать про ваш опыт, как вы с этим боролись и какие выводы сделали.

Tech Talks - это круглый стол или дискуссионная группа, в которой могут принять участие все желающие. Нет деления на докладчика и участника: наравне участвуют все, кто хочет. Кто не хочет - слушает общее обсуждение. Модератор встречи задает и поддерживает общий вектор.

Место: руинпаб "Типография", пространство "Camorra"
Адрес: Новосибирск ул. Красный проспект, 22

Ссылка на регистрацию: https://zarplata-ru-events.timepad.ru/event/1768480/

P.S. Welcome-drink от Зарплаты 🍻

Релиз Firefox 92

Вчера вышла новая версия Firefox. Рут Джон рассказала про новинки релиза — "Time for a review of Firefox 92".

Была добавлена поддержка CSS-свойства accent-color, с помощью которого можно изменять цвет элементов форм: чекбокса, радиокнопки, прогрессбара и ползунка. Это очень важное обновление, так как раньше не было возможности изменить цвет у нативных элементов, из-за чего разработчики вынуждены были создавать свои элементы управления.

Реализована поддержка CSS-дескриптора font-adjust у @font-face. Он позволяет тонко настраивать размер глифов, упрощая работу с разными шрифтами на одной странице. Также его можно использовать при решении проблемы сдвига контента из-за несовпадения метрик загружаемого шрифта с дефолтным шрифтом страницы.

В JavaScript-движок была добавлена поддержка нового метода Object.hasOwn(instance,prop), который недавно был утверждён TC39. Поведение этого метода похоже на Object.hasOwnProperty(), но Object.hasOwn() без дополнительных ухищрений работает с объектами, которые были созданы с помощью Object.create(null).

Также в CSS была добавлена поддержка управлением размером строчных букв относительно разных метрик с помощью font-size-adjust для двух значений. Улучшена работа с многоколоночными макетами. В font-family добавлена поддержка system-ui — синонима для семейства системных шрифтов.

#firefox #release

https://hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/

Типизация API с помощью кодогенерации TypeScript

Нэйт Андерсон написал статью про использование кодогенерации для покрытия типами нестандартных API — "TypeScript Compiler API: Improve API Integrations Using Code Generation".

В статье рассказывается о том, как автоматически сгенерировать типы из XML-декларации SOAP-сервиса. Для этого используется TypeScript API, с помощью которого можно программно создать любой корректный TypeScript-код.

Логика преобразования SOAP-типов в TypeScript-типы выглядит так. Декларация SOAP-сервиса парсится и из неё вычленяются входные и выходные типы и преобразуются в TypeScript-типы. Получившиеся типы используются для кодогенереации типов всех методов сервиса.

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

#typescript

https://blog.appsignal.com/2021/08/18/improve-api-integrations-using-code-generation.html

Удалённое выполнение кода в популярном npm-пакете

Тим Перри нашёл серьёзную уязвимость в npm-пакете pac-resolver (3 миллиона еженедельных загрузок) — "Proxies are complicated: RCE vulnerability in a 3 million downloads/week NPM package".

Администраторы предприятий часто используют PAC-файл для автоматической настройки HTTP-прокси в браузерах и других сетевых программах. Путь до этого файла добавляется вручную или автоматически с помощью протокола WPAD. Пакет pac-resolver упрощает работу с такими файлами в Node.js и является зависимостью proxy-agent. Proxy-agent в свою очередь используют Firebase CLI, AWS CDK и другие утилиты.

PAC — очень старый механизм, который был впервые добавлен в Netscape Navigator 2.0 в 1996-году и стал неофициальным стандартом. Содержимое PAC-файла — обычный JavaScript, который должен запускаться в изолированном контексте. Проблема в том, что pac-resolver запускал этот код с помощью модуля vm, механизм изоляции которого легко обходится, тем самым открывая вектор для удалённого выполнения кода.

Проблема была исправлена два месяца назад в pac-resolver v5.0.0. В новой версии используется пакет vm2, который был сделан специально для запуска потенциально опасного кода.

#security #nodejs

https://httptoolkit.tech/blog/npm-pac-proxy-agent-vulnerability/

Опыт оптимизации памяти Miro

Никита Руденко из Miro поделился опытом оптимизации памяти большого приложения — "Fighting for bytes in the frontend".

Ребята из Miro (популярный инструмент для совместной работы, использующий концепцию виртуальной доски для рисования) в прошлом году столкнулись с проблемой. У пользователей iPad из-за нехватки оперативной памяти ломался интерфейс программы.

Для исправления ситуации была оптимизирована структура данных хранения точек виджетов — вместо массива объектов набор точек стали хранить в виде одномерного типизированного массива. Также для снижения потребления памяти и оптимизации производительности рендеринга начали использовать специальные "сжатые" изображения виджетов в виде упрощённых векторных объектов. Была ещё успешная попытка снизить объём хранимой метаинформации для связанных виджетов, но от этой идеи отказались из-за большого количества UX-вопросов. После всех оптимизаций потребление памяти удалось снизить на 40%.

Полезная статья. Очень рекомендую почитать всем, кто разрабатывает большие и сложные web-приложения.

#performance #optimization

https://medium.com/miro-engineering/fighting-for-bytes-in-the-frontend-419c48103ef8

VirtualKeyboard API — управление поведением виртуальной клавиатуры

Томас Штайнер написал статью про VirtualKeyboard API — "Full control with the VirtualKeyboard API".

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

VirtualKeyboard API решает подобные проблемы. С его помощью можно отслеживать открытие и закрытие клавиатуры, получать её размеры и адаптировать необходимым образом страницу. Для этого используется объект navigator.virtualKeyboard. В рамках этого API также появилась возможность настройки поведения виртуальной клавиатуры для полей ввода с помощью атрибута virtualkeyboardpolicy.

В данный момент поддержка VirtualKeyboard API есть только в бете Chrome 94.

#api #mobile

https://web.dev/virtualkeyboard/

VirtualKeyboard API на практике

Брамус Ван Дамм написал статью про практическое применение VirtualKeyboard API — "Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API".

В статье рассказывается о том, как реализовать раскладку элементов страницы с адаптацией под открытие виртуальной клавиатуры. Для решения подобных задач можно использовать переменные окружения CSS, которые были добавлены в рамках VirtualKeyboard API: keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom и т.п. Например, адаптация нижнего блока под открытие клавиатуры на CSS может выглядеть так:

.bottom-box {
  position: fixed;
  bottom: 0;
  margin-bottom: calc(20px + env(keyboard-inset-height));
}

Есть небольшой нюанс. Чтобы воспользоваться VirtualKeyboard API, браузеру необходимо сообщить о своём намерении управлять перекрытием с помощью вызова кода
navigator.virtualKeyboard.overlaysContent = true. Это не очень удобно, поэтому Брамус завёл ишью с обсуждением альтернативных механизмов включения VirtualKeyboard API.

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

#css #api #mobile

https://www.bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/

Сокращение информации в User-Agent Chrome

В январе 2020 года разработчики Chrome объявили о намерении сократить передаваемую информацию в User-Agent для улучшения приватности. Из-за пандемии этот процесс отложили, и вот несколько дней назад был опубликован обновлённый план — "User-Agent Reduction Origin Trial and Dates".

Начиная с Chrome 92 (июль 2021) при обращении к методам navigator.userAgent, navigator.appVersion, navigator.platform выводится предупреждение. С четвёртой фазы (в Chrome 101) актуальной станет только мажорная версия; MINOR.BUILD.PATCH будут обнулены — Chrome 101.0.0.0. В шестой фазе (Chrome 110) на смартфонах будет удалена информация о модели устройства. В седьмой фазе (Chrome 113) миграция на новый формат User-Agent будет завершена. Если сайтам нужна детальная информация о клиенте, то они смогут получить к ней доступ с помощью User Agent Client Hints.

#chrome #announcement

https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html

Анимирование открывающихся блоков без лагов

Сэм Торогуд из Google рассказал о том, как реализовать аккордеон, который будет работать плавно даже на слабых устройствах — "How I Learnt To Stop Worrying And Love Animating The Box Model".

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

Для решения этой проблемы нужно вынести сдвигаемые элементы в отдельный слой рендеринга с помощью свойства will-change. Чтобы зря не тратить ресурсы (страница с большим количеством слоёв потребляет больше памяти), можно устанавливать will-change перед началом анимации и удалять после завершения.

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

#performance #css

https://whistlr.info/2021/box-model-animation/

В каких случаях можно использовать any

Стэфан Баумгартнер поделился своими мыслями о том, в каких случаях можно использовать тип any в TypeScript — "TypeScript: In defense of any".

Хорошим тоном считается отказ от any, но в некоторых случаях это невозможно. Например, при постепенной миграции большой кодовой базы на TypeScript. В тех местах, где нужно "нахакать". Также any незаменим при использовании сторонних библиотек без типизации.

Во всех случаях использование any нужно контролировать. Этому может помочь опция noImplicitAny, которая обязывает разработчика указывать тип any явно.

#typescript

https://fettblog.eu/typescript-any-is-ok/

Способы уменьшения размера JavaScript-бандла

Бэн Шварц поделился советами о том, как держать размер JavaScript-бандла под контролем — "Small Bundles, Fast Pages: What To Do With Too Much JavaScript".

В статье Бэн рассказывает про общие вещи: о влиянии больших бандлов на производительность страницы, об оптимальном размере загружаемого кода (300kb) и о бюджете производительности. Есть более конкретные советы, например, использовать плагин Import Cost во время разработки, чтобы размер подключаемых библиотек был всегда на виду. Также есть рекомендации по использованию стороннего кода: о хостинге кода на своём сервере и использовании фасадов для уменьшения времени инициализации страницы.

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

#performance #bundle

https://calibreapp.com/blog/bundle-size-optimization

Релиз Chrome 94

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

При создании двумерного контекста рисования canvas появилась возможность выбора цветового пространства. По умолчанию используется sRGB (оно было и раньше, сейчас это закреплено на уровне спеки), можно также выбрать цветовое пространство P3.

Стал доступен WebCodecs API. Благодаря ему приложения могут использовать кодеки для декодирования видеопотока с поддержкой аппаратного ускорения. Это очень полезно для видеоредакторов, приложений видеоконференций и стриминга.

В рамках Origin Trial можно включить WebGPU. WebGPU позволяет эффективно использовать ресурсы видеокарты для обработки графики и других вычислений.

Был добавлен метод scheduler.postTask() для управления задачами. Под капотом этот метод использует планировщик браузера. Добавлена экспериментальная поддержка CSS-свойства scrollbar-gutter. Добавлена поддержка VirtualKeyboard API. Поддержка WebSQL задеприкейчена и запланирована к удалению в Chrome 97.

В инструментах разработчика появилась локализация интерфейса на 80 языков. Теперь можно посмотреть список всех активных Origin Trials на вкладке Application при выборе фрейма верхнего уровня. Появилась индикация для контейнеров, инвертирование активного фильтра на вкладке Network и т.д.

#chrome #release

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