Динамический UI для web-apps и CSS

Как организовать красивый и плавный интерфейс без "тормозов" и "зависаний".

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

задаем все размеры внешних типа main, article контейнеров жестко в пикселях
внутренние контейнеры типа app-icons, cards реализуем на flex с автопереносом
все динамически появляющиеся элементы показываем и убираем через трансформ , scale и прозрачность
при загрузке в мобильное устройство переключаем на другой размер в точках через media queries
при возможности используем scale внешних контейнеров типа main, article для разных размеров десктопов и мобильных экранов.
обработку тачскрин касаний подключаем только если это необходимо и выключаем обработку мыши

Основной принцип - задействовать GPU и разгрузить CPU за счет использования правильных свойств css. В браузерах уже пару лет аппаратное ускорение включено по умолчанию. Раньше нужно было включать вручную это была экспериментальная функция.

💥 Вообще это все актуально при создании интерактивных элементов и анимированных меню, карточек и т.д. и т.п. чтобы на телефонах стоимостью до $200 все работало красиво.

Мнение: А у нас на Бали у всех такие телефоны, кроме туристов.

На фото - Ява . Это не Бали. Снято на телефон за 180 USD:

на фото - Ява . Это не Бали. Снято на телефон за 180USD

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

https://www.figma.com/community/file/1385659531316001292

Что добавить? Чем дополнить? (открытый вопрос)…

Лучше добавить заблюренный отдельный слой, и включать его при необходимости, чем блюрить в свойствах css движущегося в процессе открытия контейнера с боковым меню, например.
задание всех размеров от <body> и <main> до самых маленьких матрешек типа <div class="pubDate"> или <div class="icon-text"> через % сделает длинные ленты, которые динамически подгружаются "зависающими" и "тормозными", что мы мы и наблюдали, когда использовали фбук.
одно из оправданий существования приложения у [[ ин:100 грамм ]] - необходимость контролировать расход системных ресурсов на стороне клиента при "скроллинге" - чтоб им всем провалиться.

Можно дополнить всё это ещё несколькими рекомендациями для повышения производительности и качества:

Анимации и переходы с GPU-ускорением:

Используйте для анимации свойства transform, opacity, и filter (например, blur). Они меньше загружают процессор, так как могут быть обработаны графическим процессором (GPU).
Избегайте анимаций свойств, требующих пересчета макета или перерисовки (например, width, height, left, top, margin, padding).

Lazy Loading и динамическая подгрузка:

Подгружайте тяжёлые ресурсы (изображения, видео, модули JavaScript) только при необходимости, особенно для мобильных устройств. Это можно сделать с помощью IntersectionObserver или атрибута loading="lazy" для изображений.

Уменьшение затрат на перерасчёт макета:

Старайтесь минимизировать reflows (пересчёт макета) и repaints (перерисовку). Чрезмерное использование querySelector, offsetWidth, scrollHeight и подобных методов может перегрузить производительность. Вместо этого, кешируйте значения при необходимости.

Оптимизация для высокого DPI (ретина-экраны):

Используйте srcset для изображений, чтобы загружать более качественные ресурсы на экраны с высоким DPI. Для SVG используйте vector-effect: non-scaling-stroke для сохранения чёткости линий при масштабировании.

Предварительная загрузка и prefetch:

Для улучшения перформанса используйте <link rel="preload"> и <link rel="prefetch"> для критически важных ресурсов (например, шрифтов, изображений, CSS). Это сократит задержку при отображении критичных элементов.

Использование will-change только по мере необходимости:

will-change: transform или will-change: opacity подсказывают браузеру подготовить GPU для анимаций, но они занимают память. Указывайте will-change только для элементов, которые действительно нуждаются в анимации.

Отдельные CSS классы для взаимодействия с тачскрином и мышью:

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

Медиа-запросы для устройств с ограниченными ресурсами:

Если требуется, добавляйте дополнительные медиа-запросы для очень маленьких экранов или старых мобильных устройств с ограниченными ресурсами, чтобы отключать тяжёлые анимации или загружать облегченную версию UI.

Использование rem и em для внутренних отступов и шрифтов:

Основные размеры можно задавать в пикселях, но внутренние отступы, отступы между элементами и размеры шрифтов можно задавать в rem и em, чтобы сохранить относительность и адаптируемость при смене размера шрифта в корне.

Контроль за состоянием анимаций (классами или библиотеками):

Для более точного контроля над анимациями (особенно сложными последовательностями) можно использовать библиотеки, такие как GSAP или anime.js, или управлять состоянием через CSS-классы, что позволит включать и выключать анимации, только когда это необходимо.

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