Что такое Skia
Что проверяют
Представляете ли вы, что происходит ниже CSS: кто превращает описание интерфейса в пиксели и почему одни свойства дорогие, а другие почти бесплатные. Вопрос на кругозор, его задают, когда в вакансии есть графики, canvas или заметная анимация.
Как отвечать
Skia это открытая библиотека двумерной графики: пути, заливки, обводки, градиенты, текст, фильтры. Она даёт единый интерфейс поверх разных бэкендов и растеризует как на процессоре, так и через видеокарту.
Почему это касается фронтенда:
- Skia работает внутри браузеров на движке Chromium и растеризует и содержимое страницы, и
canvas. Тени, размытия и скругления в итоге становятся вызовами её примитивов; - на Android она же рисует системный интерфейс, поэтому картинка в вебвью и в нативном экране получается похожей не случайно;
- есть сборка в WebAssembly: её берут, когда нужен свой рендер в браузере, совпадающий с мобильным попиксельно;
- в мобильной разработке на React Native есть биндинг к Skia, которым делают то, что не выражается стилями: маски, шейдеры, покадровое рисование.
Сильный ответ добавляет вывод для практики: одинаковая на вид картинка стоит по-разному. Прозрачность и трансформации ложатся на композитор, а тень с большим радиусом или фильтр заставляют заново растеризовать слой, и просадка кадров начинается именно там.
Где спотыкаются
Называют Skia движком браузера. Это растеризатор: он не разбирает HTML, не считает раскладку и не исполняет скрипты. Разбор и раскладка живут выше, а Skia получает уже готовый список команд рисования.
Уверенно говорят, что на ней работает Flutter, и на этом останавливаются. В свежих версиях там по умолчанию собственный движок рендеринга, а Skia осталась для веба и запасного пути. Ответ надёжнее строить на браузере и системном рендере, это не устаревает.
Путают аппаратное ускорение с бесплатностью. Видеокарта быстро закрашивает, но каждый новый слой, маска и режим наложения это дополнительная текстура и переключение цели рендера. На слабом устройстве такой интерфейс проседает сильнее простого.