Что нового в Chrome 157: рендеринг HTML на Canvas, свойство corner и потоковый HTML

Ноябрьский стабильный релиз Google Chrome 157 приносит один из самых масштабных пакетов обновлений веб-платформы за последние годы. Команда Chromium сосредоточилась на устранении давних архитектурных узких мест: медленного парсинга строк в DOM, ограничений стилизации углов блоков и исторической пропасти между процедурной 2D-графикой на холсте и декларативной разметкой HTML.

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

HTML-in-canvas: живая верстка и текст прямо на 2D-холсте

Каждый разработчик, писавший игры, редакторы диаграмм или интерактивные карты на базе элемента <canvas>, знает эту головную боль: холст — это «глупая» растровая матрица пикселей.

Чтобы вывести красивую карточку с переносом текста, кнопкой и тенью, разработчикам приходилось:

Вручную рассчитывать координаты каждого символа через метод ctx.fillText();
Реализовывать собственный сложный перенос строк, выравнивание и усечение многоточием;
Или использовать костыли вроде html2canvas, которые превращали кусок DOM в SVG через foreignObject и блокировали главный поток браузера на сотни миллисекунд.

В Chrome 157 дебютирует долгожданный нативный стандарт HTML-in-canvas:

const canvas = document.getElementById('game-viewport');
const ctx = canvas.getContext('2d');

// Создаем живой фрагмент DOM-разметки
const cardElement = document.createElement('div');
cardElement.className = 'player-hud';
cardElement.innerHTML = '<h3>Игрок 1</h3><p>Рейтинг: 2 450</p>';

// Нативная отрисовка размеченного блока прямо на холсте
ctx.drawElement(cardElement, 20, 20, 280, 120);

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

Свойство corner и суперэллипсы: современная геометрия углов

Более пятнадцати лет скругление углов в CSS ограничивалось окружностями и эллипсами через свойство border-radius. Однако современный промышленный интерфейс (дизайн-системы Apple, Material You, Figma) давно перешел на суперэллипсы (squircle) и срезанные скошенные углы (bevel). Раньше для них приходилось генерировать тяжелые пути SVG clip-path или возиться со сложными масками.

Chrome 157 внедряет официальную спецификацию CSS Corner Shorthand:

/* Базовое скругление суперэллипсом: <радиус> / <форма> */
.app-card {
  corner: 24px / squircle;
}

/* Гранулярная настройка отдельных углов карточки */
.dashboard-widget {
  corner-top-left: 20px / bevel;      /* Срезанный футуристичный угол */
  corner-top-right: 28px / squircle;  /* Плавный суперэллипс */
  corner-bottom: 12px / round;        /* Классическое круглое скругление */
}

Свойство объединяет радиус скругления и геометрическую форму контура. Для обратной совместимости сохраняется алиас corners. Теперь карточки с эстетикой iOS и Figma верстаются одной чистой строкой CSS, не перегружая дерево стилей дополнительными псевдоэлементами и кастомными SVG-путями.

Потоковый рендеринг: методы appendHTML и streamHTML

Работа с динамическим HTML в JavaScript годами опиралась на метод element.insertAdjacentHTML('beforeend', html). У него было два заметных недостатка: строковые константы позиций провоцировали опечатки, а сам метод в принципе не умел работать с современными сетевыми потоками.

В Chrome 157 появились две полноценные оптимизированные замены:

element.appendHTML(htmlString): Прямая высокопроизводительная замена для вставки в конец элемента. Метод оптимизирован в ядре V8: он избегает промежуточных строковых аллокаций в оперативной памяти и валидирует разметку напрямую в контексте родительского узла.
element.streamHTML(readableStream): Настоящий прорыв для интеграции с Server-Sent Events (SSE) и потоковым Fetch API:

// Потоковый рендеринг контента без ожидания полной загрузки
const response = await fetch('/api/feed-stream');
const feedContainer = document.getElementById('live-feed');

// Браузер парсит и добавляет чанки в DOM по мере их поступления по сети
await feedContainer.streamHTML(response.body);

Браузер больше не ждет, пока многомегабайтный ответ прилетит целиком: элементы рендерятся инкрементально по мере поступления сетевых пакетов, кардинально снижая задержку первого взаимодействия (First Contentful Paint). Это фундаментально меняет архитектуру рендеринга лент новостей, чатов с ИИ и аналитических дашбордов в веб-приложениях.

Новинки верстки и профилирования: от text-overflow до LoAF

В релиз также вошла пачка долгожданных точечных улучшений для повседневной веб-разработки:

Произвольные строки в text-overflow: теперь вместо банального троеточия … можно указать любую произвольную строку:
```
.feed-snippet {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " [читать далее]";
}
```
Якорное позиционирование: свойство position-visibility получило значение anchor-visible. Всплывающая подсказка теперь автоматически скрывается, если сам якорный элемент выходит за пределы экрана при скролле, избавляя интерфейс от висящих в воздухе оверлеев.
Детализация метрик Long Animation Frames (LoAF): в API длинных кадров анимации появилось четкое разделение времени на исполнение JavaScript-скриптов и пересчет геометрии (Style & Layout). В системах мониторинга RUM теперь можно мгновенно понять, что именно затормозило страницу — тяжелый цикл или неэффективный селектор CSS.

Как мы видели в разборе Chrome DevTools и новые инструменты, браузер превращается в высокопроизводительную нативную платформу, последовательно закрывая исторические костыли веба и делая приложения быстрее.