Джонатан Лай из Etsy рассказал, как его команда ускорила Webpack-сборку приложения — "The journey to fast production asset builds with Webpack".

Первая версия приложения собиралась самописным сборщиком "builda". Команда Etsy занималась его поддержкой, но не успевала за развитием js-экосистемы, поэтому было принято решение перевести сборку на Webpack. Главными требованием было время сборки — не более 5 минут.

Проект состоит из более 12000 модулей, которые с учётом одиннадцати локалей собираются в 13200 ассетов. Подход "в лоб" с использованием готовых Webpack-плагинов увеличил время сборки до 40 минут (сборка с использованием legacy-сборщика проходила за 5 минут). Основная проблема заключалась в лишней работе при генерации локалей. В итоге ребятя сделали своё решение, в котором ассеты для всех локалей генерируются один раз. Решили проблему со скоростью минификации файлов. Terser-webpack-plugin в их случае неэффективно работал с большим количеством модулей из-за того, что главный поток упирался в работу с диском и сериализовывал большое количество данных перед отправкой в воркеры. Процесс минификации вынесли из сборщика в отдельный шаг пост-процессинга.

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

#webpack #performance

https://codeascraft.com/2020/02/03/production-webpack-builds/

С 2018 года поиск Google начал использовать для ранжирования сайтов метрики производительности. В этом году для оценки производительности будут добавлены новые метрики. Алексей Махметхажиев рассказал о грядущем обновлении в статье "Новый Google PageSpeed Insights на движке Lighthouse 6 (beta): проверьте, какие показатели будут у вашего сайта".

Будут добавлены TBT (Total Blocking Time) — время в течении которого пользователь не может взаимодействовать с сайтом после его отображения, например, из-за парсинга большого объёма js-кода. LCP (Largest Contentful Paint) — время до отрисовки самого большого фрагмента контента на странице. CLS (Cumulative Layout Shift) — метрика, показывающая насколько сильно происходит сдвиг контента при загрузке сайта.

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

#seo #performance #google

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

Джереми Вагнер — специалист по производительности — запустил новый канал на youtube. В первом видео он рассказал про IntesectionObserver — "Hell-bent for Webperf: The IntersectionObserver API".

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

Рекомендую посмотреть видео, если интересуетесь темой производительности и хотите посмотреть на примеры использования IntersectionObserver API.

#performance #videoepisode

https://www.youtube.com/watch?v=3Esjyp7wnhQ

Крейг Баклер написал неплохой пост про отладку Node.js-приложений — "How to Debug a Node.js Application: Tips, Tricks and Tools".

В статье рассказывается про разные способы отладки: от методов объекта console ( console.log(), console.dir(), console.count() ) до использования сторонних npm-пакетов. Довольно много инфы про VS Code. Например, он поддерживает логпойнты (логирование состояния приложения без изменения исходного кода программы). В отличие от инструментов разработчика Crhome и Firefox, где логпойнт это js-код, VS Code использует формат some description {variable}.

Cтатью можно почитать, если хотите узнать больше про возможности отладки Node.js.

#debug #nodejs

https://www.sitepoint.com/debug-node-app-tips-tricks-tools/

Джим Бланди и Гарольд Киршнер из команды Firefox рассказали про то, как они оптимизировали JavaScript-отладчик в инструментах разработчика — "Future-proofing Firefox’s JavaScript Debugger Implementation".

Отладчик в Firefox состоит из фронтенда, написанного на React и Redux, и слоя интеграции с JS-движком SpiderMonkey. Именно про оптимизацию этого слоя рассказывается в статье. Одна из оптимизаций заключалась в упрощении реализации сборщика мусора. Отладчик использует Debugger API, который доступен в коде dev tools с помощью объекта Debugger. Для установки текущего состояния отладки js-кода использовался специальный флаг Debugger.enabled, который создал много проблем в реализация сборщика мусора. В процессе чистки кода от этого флага избавились, значительно упростив код в самом отладчике и js-движке.

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

#firefox #internals

https://hacks.mozilla.org/2020/03/future-proofing-firefoxs-javascript-debugger-implementation/

Росс Кирслинг — участвует в разработке спецификации ECMAScript — написал статью про самую ужасающую часть спецификации — "Tales from "Ecma's Crypt": Annex B.3.3".

В JavaScript всегда была возможность использовать блоки ( {} ) не только с операторами if, while, for, но и как обособленную синтаксическую конструкцию (standalone block). Спецификация не описывала ситуацию, когда внутри блока определялась функция, поэтому исторически в разных браузерах этот сценарий был реализован по-разному. Для исправления этой проблемы в спецификацию был добавлен раздел, который фактически говорит о том, что определение функции внутри блока должно себя вести одновременно как var и let. Например, вот этот код не в strict-режиме выведет в консоль 1:

var a = -1;
(function () {
  const printOuter = () => console.log(a);
  {
    a = 1;
    function a() {}
    a = 2;
    printOuter();
  }
})();

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

#js #specification

https://dev.to/rkirsling/tales-from-ecma-s-crypt-annex-b-3-3-56go

Разработчики Chrome и Edge в прошедшем году работали над элементами управления форм в браузере. В блоге Chromium появилась статья, в которой рассказывается о проделанной работе — "Updates to form controls and focus ".

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

В итоге все элементы были приведены к единому внешнему виду и адаптированы под тач-устройства. У всех элементов и диалогов появилась полноценная поддержка управление с клавиатуры, например, диалогом выбора цвета теперь можно пользоваться без мыши/тачпада. Был доработан фокус у элементов. Теперь это рамка чёрного цвета с белой обводкой. Так было сделано, для того чтобы фокус был виден на светлых и тёмных фонах. Эти изменения уже доступны в Edge, включение новых элементов для пользователей Chrome запланировано в версии 83.

Для того чтобы системно собирать обратную связь по новым элементам, разработчики Edge создали сайт open-ui.org. Если вы работаете над дизайн-системой или набором компонентов, разработчики приглашают присоединиться к обсуждению элементов управления браузера.

#ux #a11y

https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

В блоге v8 была опубликована третья часть из серии статей Марьи Хёлтэ про структуру спецификации ECMAScript — "Understanding the ECMAScript spec, part 3".

В этой статье объясняется несколько тем: разница между лексической и синтаксической грамматикой, принцип разворачивания сокращений ( [+In, ?Yield, ?Await] и другие) в полноценные продукции. Всё разбирается на примере того, как в спецификации описывается возможность использования ключевого слова await в качестве идентификатора в обычных функциях, и каким образом await становится недоступен в асинхронных функциях. Для полного понимания статьи нужно быть знакомым с базовыми принципами построения контекстно-свободных грамматик — будет достаточно почитать несколько абзацев на википедии.

Эта статья не последняя в серии — в следующей части обещают рассказать, как в спеке описывается automatic semicolon insertion (ASI).

#js #specification

https://v8.dev/blog/understanding-ecmascript-part-3

Кэти Хемпениус на сайте web.dev опубликовала гид по решению проблем, возникающих из-за большого траффика — "Fix an overloaded server".

Если на сайт внезапно пришло большое количество пользователей, и он перестал осиливать нагрузку, то надо предпринять четыре шага:
1. Оценка — поиск причин отказов: CPU, IO, память, сеть.
2. Стабилизация — быстрые фиксы, которые позволят вернуть сайт к жизни: rate limiting, кэширование, отключение фич, которые особо сильно не влияют на бизнес-метрики, но которые потребляют ресурсы.
3. Улучшение — использование CDN и балансеров, добавление железа, использования сжатия ресурсов
4. Мониторинг — использование средств мониторинга показателей по перцентилям, чтобы средние значения не могли скрыть проблемы, которые возникают не у всех пользователей.

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

#performance #backend

https://web.dev/overloaded-server/

В блоге WebKit вышла статья про новинки Safari 13.1, релиз которого запланирован на весну, — "New WebKit Features in Safari 13.1".

На iPadOS появится полноценная поддержка мыши и тачпада. Чтобы контент был доступен для всех пользователей вне зависимости от устройства ввода, он не должен зависеть от тач-событий. Вместо них рекомендуется использовать Pointer Events.

Было добавлено много новых API. С помощью Web Animations API станет доступно программное управление параметрами анимаций и переходов: остановка и повторное воспроизведение анимации, изменение направления, скорости, продолжительности и т.п. Будет доступен Async Clipboard API, который предоставляет доступ к системному буферу обмена, сохраняя отзывчивость страницы. API доступен только в безопасном контексте внутри обработчиков жестов пользователя, например, pointerup. Реализована поддержка ResizeObserver для более гибкого управления дизайном компонентов в зависимости от размеров контейнера, а не вьюпорта. В WebRTC добавлена поддержка работы через прокси-сервисы и Dual-Tone Multi-Frequency (DTMF) для поддержки большего количества аудио-сервисов.

Элементы управления форм будут поддерживать новый атрибут enterkeyhint, с помощью которого можно изменить текст кнопки enter виртуальной клавиатуры на done, go, next, previous, search и send.

В CSS появится поддержка Shadow Parts для стилизации web-компонентов по месту использования. Добавлен line-break: anywhere для мягких переносов внутри текста. Было добавлено новое медиа-выражение dynamic-range для адаптации контента под специфические возможности экрана, например, HDR.

В JavaScript движке появится поддержка оператора nullish coalescing ( ?? ) и нового метода String — String.prototype.replaceAll().

В инструментах разработчика панели Debugger и Resource объединены в единую панель Sources для более удобной отладки кода. Пояится новая вкладка Layers 3D-визаулизацией отрендеренных слоёв для упрощения поиска проблем производительности. На уровне инструментов разработчика можно адаптировать любой скрипт под свои нужды с помощью Local Overrides. Теперь также как и в Chrome Dev Tools любой скрипт может быть проигнорирован во время отладки с помощью Script Blackboxing.

Соединения с ресурсами по протоколам TLS 1.0 и TLS 1.1 будут помечаться как "Not Secure". Информация из document.referrers будет доступна только оригинальному домену. Любые данные web-сайтов (Indexed DB, LocalStorage, Media keys, SessionStorage, Service Worker registrations) старше семи дней будут очищаться, если пользователь не посетит сайт в течении этого периода. Последний пункт — очень спорное решение, которое вызвало негодование среди разработчиков.

#safari #announcement

https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/

Лия Веру — участвует в разработке спецификации CSS — написала статью про новый формат кодирования цветов в CSS — "LCH colors in CSS: what, why, and how?".

Цвета в CSS определены в цветовом пространстве sRGB. У sRGB есть недостаток — с помощью него нельзя закодировать все цвета, которые могут быть отображены современными экранами (примерно одна треть от всех возможных цветов). Для решения этой проблемы в спецификацию CSS Color Module Level 4 было добавлено новое представление цветов — lch() (Lightness Chroma Hue).

LCH не только покрывает большее цветовое пространство, но и позволяет работать с цветом более интуитивно. В LCH любое изменение компонент цвета на одно и то же смещение будет давать одно и то же смещение в визуальном представлении цвета. Это свойство в цветовых пространствах называется "perceptual uniformity". В HSL perceptual uniformity не поддерживается, и изменение светлоты на 20% у двух цветов, отличающихся только тоном, будет давать в результате новые цвета с визуально отличающейся светлотой.

Поддержки LCH на данный момент нет ни в одном браузере, но уже идёт работа над его внедрением в Safari.

#css #colors

http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

Стефан Баумгартнер написал пост про тип Symbol в JS и TypeScript — "Symbols in JavaScript and TypeScript".

Symbol используется для получения уникальных значений. С помощью символов можно разграничивать библиотечные и пользовательские данные в рамках одного объекта. Но это только одно их применение. В статье разбирается пример их использования для создания подобия enum в TypeScript, который кроме типобезопасности накладывает дополнительные ограничения в рантайме после компиляции в JavaScript:

const COLOR_RED: unique symbol = Symbol('RED')
const COLOR_GREEN: unique symbol = Symbol('GREEN')
const COLOR_BLUE: unique symbol = Symbol('BLUE')
const COLOR_BLACK: unique symbol = Symbol('BLACK')

const ColorEnum = {
  [COLOR_RED]: COLOR_RED,
  [COLOR_GREEN]: COLOR_GREEN,
  [COLOR_BLUE]: COLOR_BLUE,
}

function getHexValueWithSymbolKeys(color: keyof typeof ColorEnum) {
  switch(color) {
    case ColorEnum[COLOR_BLUE]: break; // good
    case COLOR_RED: break; // good
    case COLOR_BLACK: break; // bad
  }
}

Идея интересная, но в повседневном коде наврятли стоит использовать такой подход — обычный enum выглядит более эргономично.

#js #typescript #es2015

https://fettblog.eu/symbols-in-javascript-and-typescript/

Недавно в Firefox была обнаружена проблема с кешированием данных в Twitter. Любой пользователь с физическим доступом к компьютеру теоретически мог прочитать чужие личные сообщения. Мартин Томсон из команды разработки Firefox рассказал, почему это произошло, в статье "Twitter Direct Message Caching and Firefox".

Чтобы предотвратить кеширование контента в браузерах, сайт должен отправить в ответе http-заголовок Cache-Control: no-store. В любом другом случае в Firefox начинает работать механизм эвристического кеширования. Этот механизм используется для предсказания, какой контент может быть закеширован и на какое время. Контент без Cache-Control: no-store сохраняется в кэше на семь дней. Как вы наверное уже догадались Twitter не отправлял этот заголовок в ответе из-за чего в Firefox включался механизм кеширования. Вместо него Twitter отправлял заголовок Content-Disposition, который используется для добавления метаинформации (например, имени файла) к загружаемым файлам. В статье говорится, что в "other browser" (как я понимаю Chrome) наличие этого заголовка отключает кеширование, но это поведение не является частью стандарта.

Какие можно сделать выводы из этой истории? Нужно проверять работу сайта в разных браузерах (Chrome, Firefox, Safari) и не стоит полагаться на поведение браузера, которое не соответствует стандартам.

#firefox #cache #http

https://hacks.mozilla.org/2020/04/twitter-direct-message-caching-and-firefox/

Ахмад Шадид написал статью про CSS-находки в новой версии Facebook — "CSS Findings From The New Facebook Design".

Из самого интересного. Для изменения цвета некоторых иконок используется хак с CSS-фильтрами ( filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%); ). Так было сделано, чтобы поддержать смену цвета у legacy-иконок для тёмной темы. Тень заголовка сайта сделана не с помощью свойства box-shadow, а с помощью изображения. Рой Хагиги из Facebook объяснил, что box-shadow убивал производительность при прокрутке страницы, особенно это было заметно на странице с большим количеством видео — отдельные части страницы при прокрутке временно исчезали.

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

#css #facebook

https://ishadeed.com/article/new-facebook-css/

Вчера вышла новая версия Chrome. Пит Лепаж рассказал про новинки браузера в статье "New in Chrome 81".

Было обновлено расписание релизов в связи с обстановкой в мире. Chrome 82 не будет. После версии 81 состоится релиз 83.

Был обновлён Web XR Device API. С помощью него можно будет определять поверхности реального мира и создавать приложения дополненной реальности для виртуального размещения мебели, картин и т.п.

В рамках Origin Trial доступен Badging API. Будет полезно, если вы разрабатываете PWA-приложение и хотите отобразить поверх иконки приложения количество непрочитанных сообщений. Также в Origin Trial стал доступен Web NFC для чтения и записи NFC-меток.

В JavaScript стало доступно новое INTL API DisplayNames. Благодаря ему можно получить название региона, валюты, языка, письменности по идентификатору региона, валюты и т.п.

В инструментах разработчика много изменений для работы с cookies: теперь можно поменять любое значение в cookies, заблокированные cookie подсвечиваются жёлтым цветом, добавлено отображение приоритета cookies (приоритет поддерживается только в Chrome), "Copy as Node.js fetch" в меню ресурса теперь копирует данные с cookies. В симулируемые устройства был добавлен Moto G4. Манифест панели Application отображает более корректные иконки приложения. Если content в CSS включает в себя экранированные символы, то при наведении на них курсором будет видно, что они собой представляют в реальности. Теперь ошибки парсинга source maps показывают больше информации о возникшей проблеме.

#announcement #chrome #release

https://developers.google.com/web/updates/2020/04/nic81

В конце марта прошла конференция PerfMatters, на которой выступили с докладами Йоав Вайс, Пол Айриш, Арон Тёрнер и другие. Посмотрел оттуда доклад "Turbocharging Walmart.com" Васанта Кришнамурти (лид фронтенд-направления Wallmart).

Wallmart.com каждый месяц посещают 100 миллионов пользователей. Для того чтобы обеспечить наилучший пользовательский опыт, команда разработки сфокусировалась на производительности сайта. Применение всех техник, про которые рассказывается в докладе (код сплиттинг, использование сжатия brotli, resource hints и т.п.), уменьшило TTI более чем на 50%.

Из самого интересного. Использование хинта preload продиктовано наиболее распространёнными пользовательскими сценариями работы с сайтом — на каждой странице подгружается код бандла следующей страницы, на которую с большей вероятностью перейдёт пользователь. Preload отключают, если у пользователя включён режим экономии траффика ( NetworkInformation.saveData — доступен только в CHrome). Заголовок и подвал сайта рендерятся в отдельном сервисе, благодаря чему единожды отрендеренные куски HTML переиспользуются на всех страницах.

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

#performance #talk

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

Эдди Османи написал статью про актуальные способы профилировки React-приложений — "Profiling React.js Performance".

В статье рассказывается про React Profiler API, React Interaction Tracing API, User Timing API, про использование puppeteer и lighthouse для поиска проблем производительности.

С помощью React Profiler API можно получить подробную информацию о рендеринге компонентов. Для этого нужно обернуть интересующий компонент в <Profiler> и передать в пропсе onRender функцию, которая будет вызываться на каждое обновление компонента. Interaction Tracing API — это экспериментальное API, с помощью которого можно отследить, какое событие стало причиной медленного обновления, или, например, измерить сколько времени проходит с момента нажатия на кнопку и фактическим обновлением DOM.

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

#performance #react

https://addyosmani.com/blog/profiling-react-js/

Андрей Ситник в блоге Evil Martians опубликовал статью про грядующие изменения в PostCSS — "PostCSS 8.0 is coming".

В восьмой версии не ожидается ломающих изменений для большинства пользователей — все плагины, написанные для текущей седьмой версии, будут работать. Планируется работа над уменьшением размера node_modules — все плагины будут использовать общий пакет PostCSS. Будет добавлено новое API для написания плагинов, которое ускорит транспиляцию CSS-файлов; старое API остаётся доступно всем разработчикам плагинов без каких-либо нюансов. В PostCSS 8.0 будет удалена поддержка Node,JS 6 и 8. Также будет удалён шаг сборки с помощью Babel, исходники будут публиковаться в npm без транспиляции. Планируется доработка сайта документации.

https://evilmartians.com/chronicles/postcss-8-is-coming-here-is-what-it-brings

#announcement #library #css

Томас Штейнер в блоге web.dev написал статью про новое экспериментальное API — "WebSocketStream: integrating streams with the WebSocket API".

WebSocketStream в отличие от стандартного WebSocket API может ограничить поток входящих и исходящих сообщений в зависимости от текущей нагрузки (backpressure). Это особенно полезно для приложений, которые передают много траффика: видеоконференции, шаринг рабочего стала и т.п. В текущей версии WebSocket API реализовать backpressure для входящих сообщений невозможно, для исходящих сообщений — возможно, но только постоянно опрашивая WebSocket.bufferedAmount, что неэффективно и неэргономично.

WebSocketStream доступен только в Chrome. От команд Firefox и Safari пока не было сигналов о добавлении этой фичи.

#net #experimental

https://web.dev/websocketstream/

Не все проблемы производительности требуют глубокого понимания проблемы. Иногда их исправление может быть очень скучным, как удаление ненужного кода. Тим Кадлек написал небольшой пост по этому поводу — "Mundane Improvements, Big Impact".

Тим работал с клиентом, который использует Shopify (это такой аналог Битрикса, заточенный под магазины, популярный в Европе и Северной Америке). Одна из проблем заключалась в высоком TTFB (time to first byte) — сайт для некоторых пользователей начинал передавать данные спустя несколько секунд, но в синтетических тестах всё было хорошо. После небольшого исследования в html был найден огромный json-объект, генерация которого и приводила к задержке. Этот объект был нужен для старой системы аналитики, которая больше не использовалась, поэтому его можно было удалить. Удаление сериализованного объекта из html дало сокращение TTFB на 60%.

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

#musings #performance

https://timkadlec.com/remembers/2020-04-13-mundane-improvements-big-impact/