Проектирование и оптимизация мультимедийных объектов в вебе

Эволюция веб-мультимедиа: от Flash до иммерсивного веба

Мультимедиа в вебе — это не просто картинки и видео. Это сложная экосистема технологий, которая прошла путь от простых статических страниц до полноценных 3D-миров, работающих прямо в браузере. Понимание этой эволюции необходимо не для уроков истории, а для того, чтобы знать, какие инструменты использовать сегодня для решения конкретных бизнес-задач, обеспечивая при этом высокую производительность и доступность.

В этой статье мы разберем четыре ключевых этапа развития веб-мультимедиа, изучим современные стандарты оптимизации и принципы работы с 3D-графикой.

Этап 1: Флеш-эра (2000–2010)

В начале 2000-х годов HTML и CSS были слишком примитивны для создания сложной анимации или воспроизведения видео. Решением стала технология Adobe Flash (изначально Macromedia Flash). Это была закрытая проприетарная платформа, работающая через плагин браузера.

Flash позволял создавать векторную анимацию, игры и видеоплееры, которые выглядели одинаково в любом браузере. Язык программирования ActionScript давал разработчикам контроль над интерактивностью.

Однако у технологии были критические недостатки, которые привели к её закату:

• Закрытость: Для работы требовался внешний плагин.
• Безопасность: Регулярные уязвимости ставили под угрозу данные пользователей.
• Производительность и энергопотребление: Flash сильно нагружал процессор, что быстро разряжало батареи мобильных устройств.
• SEO и доступность: Поисковые роботы не могли индексировать содержимое Flash-контейнеров, а скринридеры (программы чтений с экрана) не могли их озвучить.

habr.com

Этап 2: HTML5-революция (2010–2015)

С появлением стандарта HTML5 веб перешел на открытые технологии, не требующие плагинов. Ключевыми нововведениями стали:

1. Теги <video> и <audio>: Нативная поддержка медиафайлов браузером.
2. Canvas API: Элемент <canvas>, позволяющий рисовать растровую графику с помощью JavaScript (используется для игр, графиков, сложной анимации).
3. CSS3: Появление transition и animation, которые переложили задачи по анимации интерфейса с JavaScript на движок браузера.

Производительность анимаций: 60 FPS

Золотой стандарт плавной анимации — 60 кадров в секунду (FPS). Чтобы достичь этого показателя, браузер должен успеть отрисовать один кадр быстрее, чем за 16.6 миллисекунд. Это рассчитывается по формуле:

$$T_{frame} = \frac{1000}{FPS}$$

Где $T_{frame}$ — время на один кадр в миллисекундах, $1000$ — количество миллисекунд в секунде, $FPS$ — целевая частота кадров (Frames Per Second). При $FPS = 60$, $T_{frame} \approx 16.66$ мс.

Для поддержания такой скорости важно анимировать только «дешевые» для браузера свойства. Изменение свойств, влияющих на геометрию (например, width, margin, left), вызывает перерасчет макета (Layout) и перерисовку (Paint).

Рекомендуемые свойства для анимации:

• transform: translate() — для перемещения.
• transform: scale() — для масштабирования.
• transform: rotate() — для вращения.
• opacity — для прозрачности.

Эти свойства обрабатываются на этапе композиции (Composite), часто с использованием графического процессора (GPU), что обеспечивает плавность.

habr.com

Этап 3: Мобильный веб и оптимизация (2015–2020)

С ростом мобильного трафика на первый план вышла скорость загрузки. Пользователи заходят на сайты через нестабильные мобильные сети (3G/4G), и «тяжелый» контент стал проблемой.

Оптимизация изображений

Современный подход к графике включает три компонента:

1. Современные форматы: Использование WebP и AVIF вместо JPEG и PNG. Они обеспечивают лучшее сжатие без потери качества.
2. Адаптивность: Использование тега <picture> и атрибута srcset. Это позволяет браузеру загружать изображение нужного размера в зависимости от разрешения экрана устройства, не скачивая 4K-картинку на смартфон.
3. Ленивая загрузка (Lazy Loading): Атрибут loading="lazy" или использование IntersectionObserver в JavaScript откладывает загрузку изображений, которые находятся вне видимой области экрана, до момента прокрутки к ним.

Метрики Core Web Vitals

Google ввел метрики, оценивающие качество пользовательского опыта:

• LCP (Largest Contentful Paint): Время отрисовки самого крупного элемента (обычно баннера или текста). Отражает скорость загрузки.
• CLS (Cumulative Layout Shift): Насколько сильно «прыгает» контент при загрузке. Важно задавать размеры (width и height) для медиа-объектов, чтобы избежать сдвигов.
• FID (First Input Delay): Время задержки реакции на первое действие пользователя.

Доступность (Accessibility)

Согласно стандарту WCAG 2.1, мультимедиа должно быть доступно всем пользователям. Критически важным является атрибут alt для тега <img>. Он содержит текстовое описание изображения, которое зачитывается скринридерами для незрячих пользователей и отображается, если картинка не загрузилась.

Этап 4: Иммерсивный веб (2020–настоящее)

Современный этап характеризуется внедрением 3D-графики и дополненной реальности (WebXR) непосредственно в интерфейсы.

WebGL и Three.js

WebGL — это программный интерфейс для работы с 3D-графикой в браузере, использующий мощности видеокарты. Писать на чистом WebGL сложно, поэтому стандартом стала библиотека Three.js.

Для создания минимальной 3D-сцены в Three.js необходимы три компонента:

1. Scene (Сцена): Контейнер, где размещаются объекты, свет и камеры.
2. PerspectiveCamera (Камера): «Глаз», через который мы смотрим на сцену.
3. WebGLRenderer (Рендерер): Механизм, который отрисовывает сцену с точки зрения камеры на HTML-элемент <canvas>.

media.contented.ru

Интеграция с фреймворками

При работе с React или Vue.js важно правильно управлять жизненным циклом анимаций:

• В React стандартом де-факто является библиотека Framer Motion для декларативной анимации состояний.
• Во Vue.js используются встроенные компоненты <transition> (для одиночных элементов) и <transition-group> (для списков).
• Для сложных анимаций вместо setInterval (который может вызывать рассинхронизацию кадров) следует использовать requestAnimationFrame. Этот метод сообщает браузеру о намерении выполнить анимацию и просит запланировать перерисовку на следующем кадре.

Прогрессивное улучшение

Не все устройства могут потянуть тяжелую 3D-графику. Стратегия прогрессивного улучшения подразумевает:

1. Определение возможностей: Использование navigator.hardwareConcurrency (количество логических ядер процессора) или оценка FPS для определения мощности устройства.
2. Адаптивный контент:
   • Мощные устройства: Загрузка полноценной WebGL-сцены.
   • Слабые устройства: Автоматическая загрузка статического изображения или видео-превью.

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

Итоги

1. Эволюция веб-мультимедиа прошла путь от закрытого Flash к открытым стандартам HTML5 и высокопроизводительному WebGL.
2. Оптимизация изображений (WebP, lazy loading) и соблюдение метрик Core Web Vitals (LCP, CLS) критически важны для современного веба.
3. Для плавной анимации (60 FPS) следует использовать CSS-свойства transform и opacity, избегая изменения геометрии макета.
4. Библиотека Three.js упрощает работу с 3D, требуя для старта сцену, камеру и рендерер.
5. Доступность (атрибут alt) и прогрессивное улучшение гарантируют, что контент будет доступен максимальному числу пользователей независимо от их устройств.

Оптимизация изображений: форматы WebP/AVIF, адаптивность и доступность

Изображения составляют в среднем 50% веса современной веб-страницы. Неоптимизированная графика — главная причина медленной загрузки, высокого показателя отказов и низких позиций в поисковой выдаче. В предыдущей статье мы рассмотрели эволюцию мультимедиа, а теперь перейдем к практическим инструментам, которые позволяют сократить вес страницы в разы без видимой потери качества.

Форматы нового поколения: WebP и AVIF

Долгое время стандартами были JPEG (для фото) и PNG (для графики с прозрачностью). Однако алгоритмы сжатия 90-х годов уже не отвечают современным требованиям производительности. На смену им пришли форматы, разработанные специально для веба.

WebP

Разработан Google в 2010 году. Поддерживает как сжатие с потерями (как JPEG), так и без потерь (как PNG), а также прозрачность и анимацию. В среднем WebP-файлы на 26-30% меньше, чем их аналоги в JPEG или PNG при том же визуальном качестве.

AVIF

Самый современный формат, основанный на видеокодеке AV1. Он обеспечивает еще более эффективное сжатие, чем WebP, и поддерживает 10-битную глубину цвета (HDR). AVIF идеально подходит для фотографий с большим количеством деталей и градиентов.

Эффективность сжатия можно рассчитать по формуле:

$$E = \frac{S_{orig} - S_{new}}{S_{orig}} \times 100\%$$

Где $E$ — эффективность сжатия в процентах, $S_{orig}$ — размер исходного файла (например, JPEG), $S_{new}$ — размер нового файла (WebP или AVIF).

Пример: Если исходный JPEG весит 150 КБ, а сконвертированный AVIF — 75 КБ, то эффективность сжатия составляет 50%. Это означает, что мы экономим половину трафика пользователя.

Стратегия использования (Fallback)

Не все браузеры (особенно старые версии Safari или Internet Explorer) поддерживают AVIF. Чтобы обеспечить кроссбраузерность, используется тег <picture>, который позволяет браузеру выбрать первый поддерживаемый формат из списка.

<picture>
  <!-- Браузер попробует загрузить AVIF -->
  <source srcset="image.avif" type="image/avif">
  <!-- Если AVIF не поддерживается, попробует WebP -->
  <source srcset="image.webp" type="image/webp">
  <!-- Фолбэк для старых браузеров -->
  <img src="image.jpg" alt="Описание изображения">
</picture>

Адаптивные изображения

Загружать 4K-изображение на экран смартфона шириной 375 пикселей — это расточительство ресурсов сети и процессора. Адаптивность изображений решает две задачи: переключение разрешения (Resolution Switching) и художественное кадрирование (Art Direction).

Переключение разрешения: атрибут srcset

Если пропорции изображения остаются неизменными, но меняется его размер, используется атрибут srcset в теге <img>. Он предлагает браузеру список файлов с указанием их ширины, а браузер сам выбирает оптимальный вариант, исходя из плотности пикселей экрана (DPR) и текущей ширины окна.

<img src="photo-400.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Адаптивное фото">

• srcset: список файлов и их реальная ширина в пикселях (дескриптор w).
• sizes: подсказка браузеру, какую ширину экрана будет занимать изображение. Например, (max-width: 600px) 100vw означает, что на экранах до 600px картинка будет во всю ширину.

Художественное кадрирование: тег <picture>

Иногда на мобильных устройствах нужно не просто уменьшить картинку, а обрезать её (кропнуть), чтобы показать главный объект крупнее. Для этого используется тег <picture> с атрибутом media.

Производительность и Core Web Vitals

Оптимизация изображений напрямую влияет на метрики LCP (скорость загрузки) и CLS (стабильность макета).

Ленивая загрузка (Lazy Loading)

Изображения, находящиеся за пределами первого экрана, не должны загружаться сразу. Современный стандарт — использование нативного атрибута loading="lazy".

<img src="photo.jpg" loading="lazy" alt="...">

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

Предотвращение сдвигов макета (CLS)

Одна из самых частых ошибок — вставка изображений без указания размеров. Браузер не знает пропорций картинки до её полной загрузки, поэтому сначала отображает текст, а потом резко сдвигает его вниз, когда картинка загрузилась. Это ухудшает метрику CLS.

Решение: Всегда явно указывайте атрибуты width и height (или соотношение сторон через CSS aspect-ratio).

$$AR = \frac{W}{H}$$

Где $AR$ — соотношение сторон (Aspect Ratio), $W$ — ширина, $H$ — высота. Браузер использует эти данные, чтобы зарезервировать место под картинку еще до начала её загрузки.

Пример: Для изображения 800x600 браузер вычислит пропорцию $800 / 600 = 1.33$ и оставит пустой блок нужной высоты, предотвращая скачок контента.

Доступность (Accessibility)

Изображения должны быть доступны не только визуально, но и семантически. Основной инструмент здесь — атрибут alt.

Правила написания Alt-текста

1. Информативность: Описывайте то, что важно для понимания контента. Если на картинке график, в alt должны быть выводы из этого графика, а не просто слова "График продаж".
2. Лаконичность: Не пишите "Изображение..." или "Картинка..." — скринридер (программа экранного доступа) и так это озвучит.
3. Декоративные изображения: Если картинка нужна только для красоты (например, фоновый узор или иконка стрелки рядом с текстом ссылки), атрибут alt должен быть пустым (alt=""). Это сигнал скринридеру пропустить элемент.

Хороший alt-текст — это тот, который вы бы прочитали человеку по телефону, если бы он не мог видеть экран.

Итоги

1. Используйте форматы WebP и AVIF для уменьшения веса файлов на 30-50% по сравнению с JPEG/PNG. Реализуйте фолбэк через тег <picture>.
2. Применяйте атрибуты srcset и sizes, чтобы браузер загружал изображения оптимального размера для конкретного устройства.
3. Всегда указывайте width и height для предотвращения сдвигов макета (CLS) и используйте loading="lazy" для отложенной загрузки.
4. Заполняйте атрибут alt смысловым описанием для контентных изображений и оставляйте его пустым для декоративных.

Анимация интерфейсов: CSS-свойства, Vue.js и React

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

Однако неправильно реализованная анимация может стать «узким горлышком» производительности, вызывая зависания (jank) и нагружая процессор устройства. В этой статье мы разберем, как создавать плавные анимации (60 FPS) с помощью CSS, а также рассмотрим специфику работы с анимациями в популярных фреймворках Vue.js и React.

Производительность CSS-анимаций

Браузер отрисовывает страницу в несколько этапов. Этот процесс называется Pixel Pipeline:

1. JavaScript: Обработка логики и скриптов.
2. Style: Расчет стилей CSS.
3. Layout (Компоновка): Расчет геометрии и положения элементов (ширина, высота, отступы).
4. Paint (Отрисовка): Заливка пикселей (цвет, тени, границы).
5. Composite (Композиция): Сборка слоев и вывод на экран.

Главное правило оптимизации: избегайте свойств, вызывающих Layout и Paint. Анимация свойств width, height, margin, top/left заставляет браузер пересчитывать геометрию всего макета на каждом кадре. Это ресурсоемкая операция.

Для достижения плавности 60 FPS необходимо анимировать свойства, которые влияют только на этап Composite. Эти свойства обрабатываются графическим процессором (GPU).

«Дешевые» свойства для анимации

• transform: перемещение (translate), масштабирование (scale), вращение (rotate).
• opacity: прозрачность.
• filter: визуальные эффекты (размытие, яркость).

Использование transform: translate(x, y) вместо top и left позволяет перемещать элемент в отдельном композитном слое, не затрагивая соседние элементы.

По данным MDN Web Docs

Математика плавности: Линейная интерполяция (Lerp)

Когда мы анимируем объект с помощью JavaScript (или когда браузер рассчитывает промежуточные кадры CSS-перехода), используется формула линейной интерполяции. Она позволяет найти значение свойства в любой момент времени $t$.

$$V_t = V_{start} + (V_{end} - V_{start}) \times t$$

Где:

• $V_t$ — текущее значение свойства (например, позиция по X) в момент времени $t$.
• $V_{start}$ — начальное значение.
• $V_{end}$ — конечное значение.
• $t$ — коэффициент прогресса анимации от 0.0 до 1.0 (где 0 — начало, 1 — конец).

Пример: Если мы перемещаем объект от 0px до 100px, и анимация выполнена на 50% ($t=0.5$), то: $V_{0.5} = 0 + (100 - 0) \times 0.5 = 50$. Объект будет на позиции 50px.

Анимация во Vue.js

Vue.js предоставляет встроенный компонент <Transition>, который автоматически управляет классами CSS в зависимости от состояния элемента (появление в DOM или удаление из него).

Жизненный цикл переходов

Когда элемент оборачивается в <Transition name="fade">, Vue добавляет и удаляет 6 классов в определенные моменты времени:

1. v-enter-from: Начальное состояние перед появлением (например, opacity: 0).
2. v-enter-active: Активная фаза появления (здесь задается transition: opacity 0.5s).
3. v-enter-to: Конечное состояние появления.
4. v-leave-from: Начальное состояние перед исчезновением.
5. v-leave-active: Активная фаза исчезновения.
6. v-leave-to: Конечное состояние после исчезновения.

<template>
  <button @click="show = !show">Переключить</button>
  <Transition name="slide">
    <div v-if="show" class="box">Привет, Vue!</div>
  </Transition>
</template>

<style>
/* Активная фаза анимации */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

/* Состояние "скрыто" */
.slide-enter-from,
.slide-leave-to {
  transform: translateX(100%);
}
</style>

Для анимации списков используется компонент <TransitionGroup>, который добавляет специальный класс v-move для элементов, меняющих свое положение при сортировке или удалении соседей.

Согласно документации Vue.js, такой декларативный подход позволяет отделить логику (JS) от визуального представления (CSS).

Анимация в React

В React нет встроенного компонента, аналогичного <Transition> из Vue. React просто монтирует или размонтирует компоненты. Если компонент удаляется из дерева (unmount), он исчезает мгновенно, и CSS-анимация не успевает проиграться.

Для решения этой проблемы используются внешние библиотеки или хуки.

Framer Motion

Стандартом индустрии для React является библиотека Framer Motion. Она позволяет описывать анимации декларативно через пропсы.

import { motion, AnimatePresence } from "framer-motion";

const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        initial={{ opacity: 0, x: -100 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: 100 }}
        transition={{ duration: 0.5 }}
      >
        Контент
      </motion.div>
    )}
  </AnimatePresence>
);

Ключевой компонент здесь — <AnimatePresence>. Он откладывает удаление дочернего компонента из DOM до тех пор, пока не завершится анимация, определенная в пропе exit.

Императивный подход и requestAnimationFrame

Для сложных анимаций, требующих высокой производительности (например, параллакс или частицы), в React используют хук useLayoutEffect или useEffect в связке с requestAnimationFrame.

requestAnimationFrame (rAF) сообщает браузеру, что вы хотите выполнить анимацию, и просит запланировать перерисовку на следующем кадре. Это синхронизирует изменения с частотой обновления экрана монитора.

Доступность (Accessibility)

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

Современные стандарты требуют учитывать настройку операционной системы «Уменьшение движения». В CSS это делается через медиа-запрос:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Этот код фактически отключает анимацию для пользователей, которые явно попросили об этом в настройках системы.

Итоги

1. Для обеспечения плавности 60 FPS анимируйте только свойства Composite: transform и opacity. Избегайте изменения width, height, top, left.
2. Vue.js использует компонент <Transition> и систему из 6 классов CSS для управления стадиями появления и исчезновения элементов.
3. React требует использования дополнительных библиотек (например, Framer Motion) или компонента <AnimatePresence> для анимации размонтирования (unmount) элементов.
4. Линейная интерполяция ($V_t$) — базовая математическая модель для расчета промежуточных значений анимации.
5. Всегда учитывайте медиа-запрос prefers-reduced-motion для обеспечения доступности интерфейса.

Основы 3D-сцен в Three.js и стратегии прогрессивного улучшения

В предыдущих модулях мы научились оптимизировать изображения и создавать плавные 2D-анимации интерфейсов. Теперь мы переходим к самому сложному, но и самому впечатляющему типу мультимедиа в вебе — 3D-графике.

Внедрение 3D на сайт — это всегда поиск баланса между визуальным «вау-эффектом» и производительностью. Если CSS-анимация «весит» несколько килобайт, то 3D-сцена может загружать мегабайты текстур и геометрии, заставляя видеокарту пользователя работать на пределе. В этой статье мы разберем архитектуру библиотеки Three.js и научимся применять стратегии прогрессивного улучшения, чтобы ваш сайт работал быстро даже на слабых устройствах.

Что такое Three.js и зачем он нужен?

Браузеры отрисовывают 3D-графику с помощью технологии WebGL (Web Graphics Library). Это низкоуровневый API, который позволяет JavaScript взаимодействовать с видеокартой (GPU). Однако писать на чистом WebGL сложно: для отрисовки простого куба потребуется сотни строк кода, описывающих шейдеры, буферы и матрицы.

Three.js — это надстройка (абстракция) над WebGL. Она берет на себя всю математику и работу с буферами, предоставляя разработчику понятные объекты: «Сцена», «Камера», «Свет», «Материал».

Согласно документации MDN, Three.js является одной из самых популярных библиотек благодаря простоте освоения, хотя существуют и альтернативы, такие как Babylon.js.

Анатомия 3D-сцены

Для создания минимальной сцены в Three.js необходимы три фундаментальных компонента. Если убрать любой из них, вы увидите только черный экран.

1. Сцена (Scene)

Это контейнер, в который мы помещаем все объекты: 3D-модели, источники света и частицы. Это аналог съемочной площадки в кино.

2. Камера (Camera)

Это «глаз» наблюдателя. Сцена отрисовывается именно так, как её «видит» камера. Самый распространенный тип — PerspectiveCamera (перспективная камера), которая имитирует человеческое зрение: объекты вдалеке кажутся меньше.

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

R = rac{W}{H}

Где:

• $R$ — соотношение сторон (Aspect Ratio).
• $W$ — ширина области отрисовки (обычно window.innerWidth).
• $H$ — высота области отрисовки (обычно window.innerHeight).

3. Рендерер (Renderer)

Это механизм, который берет Сцену и Камеру, проводит математические расчеты и рисует итоговое изображение (кадр) на HTML-элементе <canvas>.

Базовый код инициализации

import * as THREE from 'three';

// 1. Создаем сцену
const scene = new THREE.Scene();

// 2. Создаем камеру
const camera = new THREE.PerspectiveCamera(
    75, // Угол обзора (FOV)
    window.innerWidth / window.innerHeight, // Соотношение сторон
    0.1, // Ближняя плоскость отсечения
    1000 // Дальняя плоскость отсечения
);

// 3. Создаем рендерер
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Объекты: Геометрия и Материалы

Пустая сцена невидима. Чтобы что-то показать, нужно создать Mesh (полигональную сетку). Mesh состоит из двух частей:

1. Geometry (Геометрия): Каркас объекта, состоящий из вершин (точек в пространстве) и граней (треугольников, соединяющих точки). Примеры: BoxGeometry (куб), SphereGeometry (сфера).
2. Material (Материал): Описание того, как поверхность реагирует на свет. Это цвет, текстура, прозрачность, блеск.

Важность выбора материала

Выбор материала напрямую влияет на производительность и внешний вид:

• MeshBasicMaterial: Самый «дешевый» для процессора. Он не реагирует на свет и не имеет теней. Объект выглядит плоским. Подходит для фонов или схематичной графики.
• MeshStandardMaterial: Физически корректный материал (PBR). Реагирует на свет, имеет шероховатость и металличность. Выглядит реалистично, но требует больше ресурсов GPU и обязательного наличия источника света на сцене.

// Геометрия куба
const geometry = new THREE.BoxGeometry();
// Материал, реагирующий на свет
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
// Объединяем в Mesh
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Не забываем добавить свет, иначе StandardMaterial будет черным
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

Анимационный цикл (Render Loop)

В отличие от статических веб-страниц, 3D-сцена должна перерисовываться 60 раз в секунду, чтобы создать иллюзию движения. Для этого используется метод requestAnimationFrame.

function animate() {
    // Планируем следующий кадр
    requestAnimationFrame(animate);

    // Обновляем свойства объектов
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // Рисуем кадр
    renderer.render(scene, camera);
}
animate();

Использование requestAnimationFrame вместо setInterval критически важно: этот метод приостанавливает рендеринг, если пользователь переключился на другую вкладку браузера, что экономит заряд батареи и ресурсы процессора.

Стратегии прогрессивного улучшения

3D-графика — ресурсоемкая технология. Бюджетный смартфон пятилетней давности не сможет обработать ту же сцену, что и мощный игровой ноутбук. Если вы попытаетесь загрузить тяжелую модель всем пользователям, вы получите высокий показатель отказов (Bounce Rate) из-за тормозов и зависаний.

Прогрессивное улучшение (Progressive Enhancement) — это подход, при котором базовый контент доступен всем, а расширенные возможности (3D) загружаются только тем, чьи устройства могут их потянуть.

Стратегия 1: Проверка поддержки WebGL

Не все устройства поддерживают WebGL. Перед инициализацией Three.js необходимо проверить наличие контекста.

Стратегия 2: Оценка производительности (Hardware Concurrency)

Мы можем косвенно оценить мощность устройства, узнав количество логических ядер процессора через navigator.hardwareConcurrency. Это не идеальная метрика, но она дает хорошее приближение.

$$P_{score} = N_{cores}$$

Где:

• $P_{score}$ — условный балл производительности.
• $N_{cores}$ — количество логических ядер процессора.

Пример логики загрузки:

const cores = navigator.hardwareConcurrency || 2; // Фолбэк на 2 ядра

if (cores < 4) {
    // Слабое устройство: показываем статичное изображение (WebP)
    loadStaticImage();
} else {
    // Мощное устройство: инициализируем Three.js и грузим 3D-модель
    initThreeJS();
}

Стратегия 3: Адаптивная детализация (LOD — Level of Detail)

Если вы все же хотите показать 3D всем, используйте разные модели:

• Low-poly (низкополигональная): Модель с малым количеством треугольников и текстурами низкого разрешения (для мобильных).
• High-poly (высокополигональная): Детализированная модель с HD-текстурами (для десктопов).

Оптимизация размера бандла

Библиотека Three.js достаточно тяжелая (более 600 КБ в минифицированном виде). Согласно данным makeagency.ru, браузер тратит значительное время не только на скачивание, но и на парсинг и компиляцию JavaScript.

Чтобы уменьшить вес, используйте Tree Shaking (тряску дерева) при сборке проекта (например, через Webpack или Vite). Импортируйте только то, что используете:

Плохо (импортируется вся библиотека):

import * as THREE from 'three';

Хорошо (импортируются только нужные модули):

import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, Mesh } from 'three';

Итоги

1. Three.js — это инструмент, упрощающий работу с WebGL. Для создания сцены обязательно нужны Сцена, Камера и Рендерер.
2. Mesh (Объект) состоит из Геометрии (формы) и Материала (внешнего вида). Материалы типа MeshStandardMaterial требуют источников света, но выглядят реалистичнее.
3. Для анимации используйте requestAnimationFrame, чтобы синхронизировать отрисовку с частотой обновления экрана и экономить ресурсы при неактивной вкладке.
4. Применяйте прогрессивное улучшение: проверяйте мощность устройства (navigator.hardwareConcurrency) и показывайте тяжелую 3D-графику только тем пользователям, чье оборудование способно её обработать. Для остальных используйте изображения-заглушки.
5. Оптимизируйте импорты (Tree Shaking), чтобы не отправлять пользователю код всей библиотеки, если вы используете лишь 10% её функций.

Метрики производительности Core Web Vitals и факторы проектирования

В предыдущих модулях курса мы научились создавать впечатляющие мультимедийные объекты: от оптимизированных изображений WebP до сложных 3D-сцен на Three.js. Однако даже самый красивый и технологичный сайт теряет смысл, если пользователь закрывает его, не дождавшись загрузки.

Сегодня недостаточно просто «сделать красиво». Необходимо «сделать быстро». Google формализовал понятие скорости и удобства в наборе метрик Core Web Vitals (CWV). Это не просто цифры для отчетов — это факторы ранжирования, которые напрямую влияют на то, увидит ли кто-нибудь ваш дизайн вообще.

В этой статье мы разберем три кита производительности (LCP, INP, CLS), математику их расчета и то, как дизайнерские решения влияют на технические показатели.

LCP (Largest Contentful Paint): Скорость восприятия

Метрика LCP измеряет время, за которое браузер отрисовывает самый крупный видимый элемент в области просмотра (viewport). Это может быть герой-изображение (hero image), видео-обложка или крупный текстовый блок.

Пользователю не важно, за сколько миллисекунд загрузился весь ваш JavaScript-код. Ему важно, когда он увидит основной контент. Согласно webseed.ru, в 2025 году эта метрика остается критически важной для SEO и удержания внимания.

Нормативы LCP

• Отлично: $\le 2.5$ секунды
• Требует улучшения: $2.5 - 4.0$ секунды
• Плохо: $> 4.0$ секунды

Факторы, убивающие LCP

1. Тяжелые медиа-ресурсы: Если ваш баннер весит 2 МБ, он физически не успеет загрузиться за 2.5 секунды на 4G сети.
2. Медленный ответ сервера (TTFB): Если сервер «думает» 1.5 секунды перед отправкой первого байта, у браузера остается всего 1 секунда на загрузку и отрисовку картинки.
3. Блокирующий рендеринг JavaScript и CSS: Браузер не нарисует картинку, пока не разберется со скриптами в <head>.

Оптимизация через приоритеты

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

<img src="hero.webp" fetchpriority="high" alt="Главный баннер">

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

INP (Interaction to Next Paint): Отзывчивость интерфейса

В марте 2024 года Google заменил устаревшую метрику FID (First Input Delay) на INP. Это фундаментальное изменение, которое многие дизайнеры и разработчики упустили.

Если FID измерял задержку только первого клика, то INP оценивает все взаимодействия в течение жизни страницы и фиксирует худший результат. Это метрика «тормозов» интерфейса.

Математика задержки

Время INP складывается из трех компонентов:

$$T_{INP} = T_{delay} + T_{processing} + T_{presentation}$$

Где:

• $T_{INP}$ — итоговое время взаимодействия.
• $T_{delay}$ (Input Delay) — время ожидания в очереди (пока главный поток занят другими задачами).
• $T_{processing}$ (Processing Time) — время выполнения обработчиков событий (вашего JS-кода).
• $T_{presentation}$ (Presentation Delay) — время, которое требуется браузеру, чтобы пересчитать макет и нарисовать следующий кадр.

Пример: Пользователь нажимает кнопку «Купить».

1. Браузер занят анимацией логотипа (50 мс ожидания).
2. Запускается скрипт добавления в корзину (150 мс выполнения).
3. Браузер перерисовывает иконку корзины (20 мс отрисовки). Итого: $50 + 150 + 20 = 220$ мс. Это уже зона «Требует улучшения» (норма — до 200 мс).

Как мультимедиа влияет на INP?

Тяжелые анимации на JavaScript или инициализация 3D-сцены (Three.js) занимают главный поток процессора. Если в этот момент пользователь попытается открыть меню, интерфейс «зависнет».

Решение: Разбивайте длинные задачи (Long Tasks) на мелкие части, используя setTimeout или requestIdleCallback, чтобы давать браузеру «продышаться» между вычислениями.

CLS (Cumulative Layout Shift): Визуальная стабильность

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

Метрика CLS измеряет сумму всех неожиданных сдвигов макета за время жизни страницы.

Формула расчета сдвига

Оценка каждого сдвига рассчитывается как произведение двух долей:

$$S_{shift} = I_{fraction} imes D_{fraction}$$

Где:

• $S_{shift}$ — оценка единичного сдвига.
• $I_{fraction}$ (Impact Fraction) — доля площади экрана, затронутая сдвигом (объединение старого и нового положения элемента).
• $D_{fraction}$ (Distance Fraction) — расстояние, на которое сместился элемент, деленное на высоту экрана.

Числовой пример: Представьте, что на мобильном экране высотой 800 пикселей загружается изображение высотой 400 пикселей. Оно сдвигает текст вниз на эти 400 пикселей.

1. Distance Fraction: Текст сдвинулся на 400px при высоте экрана 800px. $D = 400 / 800 = 0.5$.
2. Impact Fraction: Сдвиг затронул нижнюю половину экрана (текст) и добавил новую верхнюю половину (картинка). Если считать упрощенно, затронуто 100% экрана (так как все сдвинулось). $I hickapprox 1.0$.
3. Итог: $S = 1.0 imes 0.5 = 0.5$.

Это катастрофический результат, так как хороший CLS должен быть меньше 0.1.

Дизайн-паттерны, вызывающие CLS

1. Изображения без размеров: Если в HTML не указаны width и height (или aspect-ratio в CSS), браузер не знает, сколько места оставить под картинку, пока она не загрузится.
2. Динамические шрифты (FOUT/FOIT): Замена системного шрифта на веб-шрифт может изменить ширину слов и высоту строк, вызывая переверстку всего текста.
3. Встраиваемый контент (Embeds): Видео с YouTube или посты из соцсетей часто меняют свой размер после инициализации скрипта.

Инфраструктура как фундамент метрик

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

Согласно habr.com, если сервер отвечает дольше 1 секунды, достичь хорошего показателя LCP (2.5 сек) практически невозможно, так как на загрузку контента остается всего 1.5 секунды. Использование CDN (Content Delivery Network) для доставки мультимедиа и настройка кэширования — обязательные условия для прохождения тестов Core Web Vitals.

Баланс между эстетикой и метриками

Проектирование мультимедийных объектов — это всегда компромисс. Рассмотрим три сценария:

1. Видео-фон (Video Background)

• Риск: Огромный LCP, высокая нагрузка на сеть.
• Решение: Использовать постер (картинку-заглушку), сжатый формат WebM и атрибут preload. Для мобильных устройств лучше вообще отключить видео-фон, заменив его статичным изображением.

2. Слайдеры и карусели

• Риск: Высокий LCP (если слайдер во весь экран) и CLS (если высота слайдов разная).
• Решение: Использовать CSS Scroll Snap вместо тяжелых JS-библиотек. Фиксировать высоту контейнера слайдера.

3. Анимация при скролле (Parallax)

• Риск: Высокий INP, так как обработчики скролла могут блокировать основной поток.
• Решение: Использовать IntersectionObserver вместо слушателей события scroll. Выносить анимацию в отдельные слои через CSS will-change.

Инструменты измерения

Нельзя улучшить то, что нельзя измерить. Для анализа CWV используются:

1. PageSpeed Insights: Показывает как лабораторные данные (эмуляция), так и полевые данные (реальный опыт пользователей Chrome).
2. Lighthouse: Встроен в Chrome DevTools. Помогает найти конкретные проблемы в коде.
3. Web Vitals Extension: Расширение для браузера, показывающее метрики в реальном времени.

Итоги

1. LCP (Largest Contentful Paint) — это скорость загрузки главного контента. Норма — до 2.5 секунд. Для оптимизации используйте современные форматы (AVIF/WebP) и атрибут fetchpriority="high".
2. INP (Interaction to Next Paint) заменил FID. Он измеряет отзывчивость на все действия пользователя. Норма — до 200 мс. Главный враг INP — длинные задачи JavaScript, блокирующие основной поток.
3. CLS (Cumulative Layout Shift) отвечает за визуальную стабильность. Норма — до 0.1. Всегда указывайте размеры (width/height) для изображений и видео, чтобы зарезервировать место в макете до загрузки.
4. Производительность — это часть UX. Красивая анимация, которая тормозит, вызывает больше раздражения, чем простой статический интерфейс.