Web Page - Frontend Backend DevOps

Ваш код не медленный, он просто держит главный поток Скролл подёргивается, кнопка отвечает с задержкой, буквы в поиске появляются на полтакта позже. Первый рефлекс: искать медленный алгоритм. Автор разбора показывает, что чаще проблема не в скорости кода, а в том, что он занимает единственный поток, где живут и JavaScript, и стили, и layout, и paint. Бюджет на кадр при 60 Гц около 16,6 мс, из которых практически доступны примерно 10; на 120 Гц вдвое меньше. Функция на 200 мс замораживает экран на 200 мс, и никакой бандл-оптимизацией это не лечится. Отсюда четыре приёма на самом потоке: делить длинные задачи, группировать частые, расставлять приоритеты, откладывать необязательное. И три способа увести работу с потока: на композитор, в worker, или не делать её вовсе. Внутри интерактивные демо: чат, куда прилетают сотни сообщений в секунду, и разница между «рисовать сразу» и «отдавать поток каждые 20 сообщений». Yield не делает работу быстрее, но возвращает интерфейсу отзывчивость. Я бы прошёл этот текст перед следующим разбором INP. Разбор в блоге kciter. #перформанс #javascript

Chrome 154 beta: WebSocket в локальную сеть, постквантовые ключи в Web Crypto и табы на чистом CSS Три вещи из беты, которые меняют код. Первая: new WebSocket(url, { protocols: "soap", targetAddressSpace: "local" }) открывает сокет к устройству в локальной сети со страницы на HTTPS, если пользователь дал разрешение Local Network Access, а имя хоста резолвится в локальный IP. Раньше это было запрещено без обходных путей. Вторая: в crypto.subtle появились ML-KEM 768/1024, ML-DSA 44/65/87, ChaCha20-Poly1305 и гибрид X-Wing. Сквозное шифрование в веб-приложении можно строить на постквантовых алгоритмах без сторонних библиотек. Третья: scroll-marker-group: tabs делает из CSS-карусели настоящий tablist для скринридеров, активный маркер единственный останавливается по Tab, а контент неактивных панелей скрыт из дерева доступности. Что сломается: Background Fetch начал применять CORS, AbortController передаёт reason в Response и ReadableStream. Полный список на сайте. #браузеры #css

Интерпретатор Wasm стал в 2,2 раза быстрее, и это важно там, где V8 не поможет В браузере WebAssembly исполняет JIT, и про интерпретаторы фронтендеры обычно не думают. Но как только Wasm выходит за пределы вкладки, в плагины, edge-функции, iOS-приложения и песочницы, JIT либо запрещён, либо не помещается в память. Там живёт Wasmi, интерпретатор на Rust, и версия 2.0 по замерам проекта в 2,2 раза быстрее 1.0 по геометрическому среднему. Внутри четыре режима dispatch вместо одного switch-loop, новое IR с аккумуляторными регистрами и структура CodeMap, где вызов функции не делает ни одного lookup. Включение SIMD больше не замедляет обычный код: в 1.0 это стоило около 8%. Бенчмарки можно повторить из репозитория wasmi-benchmarks; сравнение с Wasm3, WAMR и Wasmtime Pulley, а также историю про Rust 1.92, который уронил CoreMark на треть, разобрали на сайте. #wasm #перформанс

Safari наконец починил top-level await: WebKit переписал загрузчик модулей с нуля Если модуль с await на верхнем уровне падал у вас в Safari с «Cannot access ... before initialization», это не ваш баг. WebKit сегодня рассказал, почему так было: загрузчик модулей Safari написали по черновику WHATWG Loader, заброшенному в январе 2016 года, ещё до появления async/await в языке. Top-level await из ES2022 прикрутили поверх него, и годы точечных правок проблему не закрывали. В январе 2026-го команда удалила старый загрузчик целиком и переписала его на C++ по алгоритмам спецификации ECMAScript. В примере из блога один модуль с задержкой импортируется три раза: старый Safari завершал импорты в порядке 2, 3, 1, и два из трёх падали на неинициализированных экспортах, новый выдаёт 1, 2, 3. Проверяли тест-кейсами от команды Bun (тот же JavaScriptCore, те же баги), фаззером графов модулей со сравнением вывода с другими движками и полным набором модульных тестов test262. Исправление уже в Safari Technology Preview 251 и бете Safari 27, в стабильный придёт с релизом 27. Обходные пути для Safari пока не убирайте, старые версии никуда не денутся. Что именно ломалось и как это чинили, разобрали подробнее.

Manifest V2 закрыт окончательно: Google удалил из Chrome Web Store все старые расширения, включая uBlock Origin Для авторов расширений новость не про блокировщик, а про режим совместимости: закончился период, когда V2-сборки у клиентов можно было обновлять. Chrome 138 был последней версией с корпоративным ключом ExtensionManifestV2Availability, в 139 его убрали, 31 августа расширения исчезли из магазина. Чек-лист переезда, если он ещё не завершён: сетевую фильтрацию на declarativeNetRequest со статическими правилами в JSON; фоновую страницу на service worker с состоянием в chrome.storage, а не в переменных; никакого удалённо загружаемого кода; проверка того же пакета в Edge и Firefox, у них свои отличия в поддержке V3. Что произошло с uBlock Origin и куда переехать пользователям разобрали на сайте. @tproger_web

Август-сентябрь — сезон поиска работы, и в IT он сейчас особенно непростой. Не всегда понятно, в какую сторону расти, страшно менять профессию, а после нескольких неудачных собеседований начинает казаться, что дело в вас. Собрали подборку материалов о карьере: куда двигаться, как проходить собеседования, как не выгорать, а также как понять, что компания вам подходит, и что делать дальше. Куда двигаться: Каких спецов сейчас не хватает Куда расти, если не хочется в менеджмент Как попасть в QA в 2026 Собеседования и выгорание: Почему тянет уволиться после отпуска Как пройти собес, если стесняешься Как пройти собес без опыта Работа в новой компании и карьерный трек: Что нужно знать про онбординг Почему сеньоров не слышат Как построить карьерный трек Как определять грейды Как измеряют вашу удовлетворённость работой

Задайте источник света один раз, и все тени на странице посчитаются сами Ambient CSS предлагает вместо ручных shadow-sm, shadow-md и shadow-lg описать свет: направление, интенсивность ключевого и заполняющего света, оттенок, высоту. Каждый элемент получает пятислойный box-shadow: тень, блики, фаски и внутренние затемнения, и все они согласованы между собой, потому что источник один. У элемента задаётся только высота над поверхностью, elevation от 0 до 3, и толщина, thickness от 0 до 2. Пакет @ambientcss/css работает без зависимостей в любом HTML, есть отдельная обёртка для React. Автор выложил третью версию 1 сентября, на HN у неё 94 очка. В комментариях жалуются на мобильную версию демо, так что смотреть лучше с десктопа: ambientcss.vercel.app. #css #фронтенд

Cloudflare начала отключать D1 на бесплатном плане после 5 млн прочитанных строк в сутки С 1 сентября превышение дневного лимита на Workers Free больше не проходит незаметно: запросы к базе возвращают ошибки до полуночи UTC (03:00 МСК), данные не удаляются. Лимиты прежние: 5 млн прочитанных и 100 тысяч записанных строк в сутки, 5 ГБ хранилища. Изменился только режим: раньше мягко, теперь жёстко. Ловушка в учёте: считаются строки, которые прошёл движок, а не строки в ответе. SELECT без индекса по таблице в 100 тысяч записей съедает 100 тысяч чтений за один вызов. Сколько реально прочитал запрос, D1 показывает в meta.rows_read. Что сделать: пройтись EXPLAIN QUERY PLAN по частым запросам и добавить индексы там, где SCAN; кэшировать горячие ответы в KV; писать батчами, лимит записей в 50 раз меньше лимита чтений. Тарифы платного плана и чек-лист собрали на сайте. @tproger_web

Уберите тормозящую задержку из многоуровневого меню — её заменяет геометрия Пользователь ведёт курсор по диагонали от пункта к подменю, задевает по дороге соседнюю строку, и содержимое переключается прямо под мышью. Обычное лечение — задержка перед сменой подменю, из-за которой интерфейс ощущается медленным. В большом меню Shop by Department на Amazon задержки нет, и промаха тоже. Синий треугольник на схеме — предполагаемый путь курсора. Его вершины: текущая позиция указателя и правые верхний и нижний углы открытого меню. Если следующая позиция попадает внутрь, человек, скорее всего, идёт к подменю, и оно остаётся открытым чуть дольше, даже когда курсор на секунду оказался над соседним пунктом. Вышел за треугольник — подменю переключается мгновенно. Механизм разобрал Бен Кеймeнс в 2013 году и выпустил по мотивам плагин jQuery-menu-aim, который позже применили в меню Khan Academy. Приём описывает геометрию намерения пользователя, поэтому живёт дольше любой библиотеки. #javascript #фронтенд