Привет!
Спасибо, что присоединились ко мне на пути к пониманию CSS Houdini.
Цель этой статьи
Цель этой статьи - концептуально объяснить вам Houdini. Насколько это возможно, я буду стараться не писать настоящие коды. Я объясню, как работает Houdini, только с помощью визуальных подсказок.
Прочитав эту статью, вы приобретете довольно сильные ментальные модели и сможете перейти к изучению других технических статей о Houdini. Я обязательно добавлю дополнительные технические ресурсы, которые вы можете изучить в конце этой статьи.
Чтобы наше путешествие по Houdini было таким интересным, как я надеюсь, вам придется внимательно следить за мной. Это очень наглядное руководство, поэтому постарайтесь не потеряться в визуальных эффектах.
Предположим, я старый волшебник, и вы рядом со мной, познавая красоту магии! Вспомните Дамблдора и Гарри Поттера. Ура!
Теперь давайте сделаем первый шаг в пути - краткое введение в CSS Houdini и объясним, почему это стоит вашего внимания.
Слово предостережения
В этой статье обсуждается технология будущего, Houdini, с не очень хорошей поддержкой браузеров прямо сейчас.
Даже если вам это неудобно, я покажу вам, почему Houdini по-прежнему стоит вашего времени и внимания.
Мы договорились?
Вступление
Найдите минутку и подумайте о будущем веб-разработки.
Что вы видите в следующие 4 года?
Как далеко мы зашли бы как разработчики? Какие изменения вы ожидаете в отношении инструментов, технологий и всего, что у вас есть!
Поразмыслив над этим некоторое время, я могу сделать простой вывод. Я твердо верю, что будущее веб-разработки очень яркое!
Быстрый просмотр веб-обновлений Chrome, публикуемых командой разработчиков Chrome, приведет вас в восторг!
По большей части цель проста.
Чтобы сократить разрыв между Интернетом и нативным и упростить разработчикам создание отличных возможностей в открытом Интернете.
Создание отличного опыта в Интернете - такая важная цель для будущего Интернета.
Скажите, если я ошибаюсь, но когда я говорю «будущее Интернета», разве вам не легко увидеть, как Javascript оказывает большое влияние на Интернет?
Об этом было нетрудно догадаться.
Хорошо, а как насчет CSS?
Есть ли у CSS что-нибудь предложить в этом ярком будущем, которое мы ожидаем?
Интересно, что CSS во всем этом не отходит на задний план. Вообще!
Да! Да!! Да!!! CSS должен сыграть свою роль в будущем, которого мы все ожидаем.
Замечательная технология будущего CSS, на которую следует обратить внимание, называется CSS Houdini.
Это блестящая технология.
Позволь мне объяснить.
Что такое Гудини?
Моя первая попытка узнать о CSS Houdini привела меня к простому поиску в Google по запросу «что такое Houdini?»
К сожалению, поисковый запрос не дал ничего, связанного с CSS.
Измените поисковый запрос на «CSS Houdini», и вы получите несколько результатов.
Тем не менее, что такое H - o - u - d - i - n - i?
Я с вами в этом. Само слово звучит как-то странно.
Что ж, может быть, нам удастся почерпнуть некоторые подсказки из истории!
Вот и все! Когда-то жил знаменитый американский фокусник по имени Гарри Гудини, известный своей сенсационной магией.
Хорошо, звучит неплохо, но что вообще за разговоры о Magic?
Что ж, CSS Houdini дает вам доступ к API-интерфейсам низкоуровневого рендеринга CSS, которые позволяют создавать волшебные вещи в сети.
Создавать волшебные вещи?
Когда я говорю, что Houdini позволяет создавать волшебные вещи, что я имею в виду?
Понимаете, для непосвященных то, что мы делаем, как разработчики, считается волшебством. Мы буквально делаем что-то полезное из пустого текстового файла и редактора кода.
Однако под капотом мы знаем, что байты HTML и CSS считываются из сети / диска и обрабатываются механизмом браузера.
Движок браузера отвечает за создание этого волшебства, выполнив довольно сложный список шагов.
Таким образом, байты HTML и CSS преобразуются в узлы и соответствующие им древовидные структуры, DOM и CSSOM
Затем древовидные структуры объединяются, образуя дерево рендеринга.
Отсюда браузер вычисляет точный размер и положение каждого объекта на странице и, наконец, рисует элементы на экране!
Ой!
Куда я иду со всем этим?
В этом волшебном процессе перехода от пустого файла к полностью обработанной веб-странице мы, как разработчики, мало что делаем. Движок браузера творит все магию, а нам не хватает всего хорошего.
Ну, не раньше Гудини!
Объясняя Гудини 5-летнему ребенку.
В детстве вы, должно быть, задавались вопросом, как рождаются младенцы. Я действительно задался вопросом, как в какой-то момент.
Если у вас был младший брат или сестра, вы, вероятно, когда-то думали: «как он был создан?», «откуда берутся дети?»
Если бы ваши родители были чем-то близки с моими, вы, вероятно, получили бы ответ вроде: «Ну, где-нибудь в мамином животе».
Это просто случилось, а?
Будьте готовы дать волю своему воображению.
Теперь представьте себе мир, в котором возможно следующее.
Пока ребенок находится в животе мамы, представьте, что вы можете просто прикоснуться к животу мамы с помощью волшебной палочки и сказать: «Привет, плод, получи голубой глаз и светлые волосы» .
Затем, как только на свет появляется ребенок, бум !, они получают голубые глаза и светлые волосы, которые вы хотели!
Я знаю. Это было бы хаотично, но круто!
Подождите, а что бы случилось?
Что ж, если бы это было возможно, вы были бы частью магического процесса создания ребенка.
Вместо того, чтобы оставить их генетическую комбинацию природе, вы бы каким-то образом «создали» новое существо, просто прикоснувшись к животу мамы - простой, эффективный и недорогой процесс!
Что ж, вот как вы себя чувствуете от Houdini!
С Houdini вы не просто наблюдаете, как движок браузера рождает ребенка - визуализируйте вашу страницу из глубины пустоты в красиво отрисованную страницу.
Вместо этого вы получаете свою волшебную палочку и становитесь частью процесса.
С технической точки зрения вы получаете доступ к низкоуровневым API-интерфейсам, которые позволяют задействовать несколько этапов конвейера рендеринга CSS. Благодаря этой возможности вы присоединяетесь к движку браузера для создания нестандартных вещей, которые в противном случае были бы невозможны.
Короче говоря, теперь вы можете творить чудеса, а не просто смотреть, как это делает браузер!
Создание магии обходится дорого
Гарри Поттер провел годы в Хогвартсе, изучая магию. Нам, разработчикам, есть над чем поработать, если мы хотим творить волшебство.
В обобщенном процессе рендеринга, который я обсуждал ранее, как вы думаете, может работать процесс подключения к процессу рендеринга через Houdini?
Самое простое предположение, которое вы могли придумать, - это каким-то образом манипулировать DOM каким-либо волшебным образом.
Это неплохая идея, но полагаться на манипулирование DOM для получения доступа к API-интерфейсам низкоуровневого рендеринга CSS имеет ряд серьезных недостатков.
Во-первых, когда запускается процесс рендеринга в браузере, он делает определенные предположения, которые, как предполагается, не изменятся.
Другая проблема с манипулированием DOM заключается в том, что если бы существовал способ волшебного манипулирования DOM, то это также было бы выполнено в основном потоке Javascript.
В основном потоке уже выполняется так много вещей, и создание магии таким образом, вероятно, окажется медленным и неэффективным.
Есть ли другое решение?
Абсолютно!
Для создания магии вам понадобится волшебная палочка.
В мире CSS Houdini волшебная палочка называется Worklet.
Если вы помните из веб-102 (это не настоящий курс), есть идея веб-работников.
Технически веб-воркеры - это просто выполнение сценариев в фоновом режиме независимо от каких-либо сценариев пользовательского интерфейса, то есть сценария JavaScript, выполняемого с HTML-страницы, который выполняется в фоновом режиме, не затрагивая другие сценарии, выполняющиеся на странице.
Они, как известно, довольно эффективны!
Worklets похожи на веб-работников. Они не определены для запуска в конкретном потоке, поэтому механизм рендеринга может выбрать запускать их где угодно.
Это не все.
Несколько рабочихлетов также можно запускать параллельно без какого-либо вмешательства в глобальную область видимости. Это похоже на некую контейнеризацию. Такой тип параллелизма дает значительный прирост производительности. Я говорю о скорости движка рендеринга CSS!
Если вам интересно, как работают эти тренировки, они используют классы Javascript, которые зарегистрированы в глобальной области, а затем определенные методы этих классов вызываются механизмом рендеринга.
Здесь следует отметить, что мы не вызываем эти методы, механизм рендеринга выполняет вызов в любое оптимальное время, которое он решает.
Итак, как все это происходит? Общий обзор.
Чтобы получить общий обзор того, как работают рабочие наборы, рассмотрите следующее описание жизненного цикла тренировки:
Все начинается с движка рендеринга.
Чтобы проанализировать и выполнить Javascript, механизм рендеринга запускает свой основной поток Javascript.
На этом все не заканчивается.
Механизм рендеринга также запускает несколько процессов тренировки для обработки рабочих операций.
В идеале эти рабочие процессы являются отдельными потоками от основного потока.
Они не блокируют основной поток.
После этого шага ваш файл javascript загружается в основной поток.
В этом файле javascript вы можете загрузить рабочий лист, вызвав метод worklet.addModule, например. worklet.addModule('./path/to/module.js').
Это асинхронно загрузит рабочийлет. Обратите внимание, что рабочий лист находится в файле javascript, который вы пишете!
Как только рабочийлет получен, он загружается в два или более доступных рабочих процесса.
Наконец, при необходимости механизм рендеринга вызывает соответствующий метод из загруженного рабочего листа. Этот вызов может быть из любого экземпляра, загруженного в процессы рабочеголета.
Покажи мне код?
Цель этой статьи - концептуально объяснить, как работает Houdini. Надеюсь, на этом этапе вы получили некоторое представление о том, что такое Houdini.
Тем не менее, возможно, что какой-то примерный код свяжет ваши концы с концами в вашем понимании.
Давайте посмотрим на пример.
Если после всех объяснений Houdini по-прежнему звучит нечетко, этот раздел развеет все ваши сомнения на простом практическом примере.
Рассмотрим пример веб-сайта ниже:
Предположим, вам было поручено создать фон заголовка checker.
Как бы вы это сделали?
Что ж, вы можете придумать много разных способов, но у всех есть свои недостатки.
Давайте посмотрим, как этот заголовок проверки можно воссоздать эффективным способом с помощью CSS Houdini.
Небольшая заметка: у Houdini есть много разных API для создания магии. Конкретный вариант, который я выбрал для объяснения, называется PAINT api.
Сначала создайте тег script в вашем html файле и проверьте, поддерживает ли браузер Worklets, в частности, worklet рисования.
Помните, ни ворклетов, ни магии :(
Обратите внимание, что рабочий лист добавляется, если браузер поддерживает рисование.
Обратите внимание, как вызывается метод addModule.
CSS.paintWorklet.addModule("worklet.js")
Мы попросили загрузить некий рабочийлет worklet.js. Давайте на самом деле напишем реализацию worklet.
Все начинается с класса Javascript.
В worklet.js мы определили класс Javascript с именем Checker и зарегистрировали его.
Когда загружается HTML документ, браузер отслеживает карту (необычный объект) пользовательских красок.
Принцип работы Paint API заключается в том, что вы должны «зарегистрировать» свои собственные раскраски, и они будут доступны браузеру для рисования волшебства.
Эта «регистрация» выполняется путем вызова глобального метода registerPaint и передачи имени и значения.
registerPaint("checker", CheckerPaint)
После этого вы определяете метод paint в классе Javascript.
Это метод, который будет вызывать движок рендеринга.
Когда механизм визуализации вызывает этот paint метод, ему передаются три аргумента.
ctx, geom и styleMap.
Вы можете называть их как угодно, но первый параметр ctx относится к контексту 2-го рендеринга. Это похоже на двумерный контекст холста, если вы уже работали с ним раньше.
geom представляет геометрию любого элемента DOM, к которому вы хотите применить этот рабочийлет. Геометрия будет содержать width и height элемента DOM.
styleMap - это карта, которая содержит все стили, связанные с элементом DOM, к которому применяется пользовательская краска.
В методе paint вы можете делать все, что захотите, с доступными параметрами.
Напишем туда немного Javascript.
Это было просто.
Чтобы создать фон в клетку, мы можем продолжить цикл по ширине и высоте любого элемента, к которому применяется эта пользовательская краска.
О, это вас смутило?
Вот снова фрагмент цикла.
Это представляет собой вложенный цикл по height и width элемента.
Обратите внимание, как width и height отключены от параметра geom.
В этом цикле мы можем продолжить создание фактического средства проверки, воспользовавшись параметром ctx - контекстом 2-го рендеринга.
Вы можете представить контекст как большой белый лист бумаги, на котором вы можете нарисовать что угодно.
Нарисуем шашку.
Внутри цикла мы выбираем один из цветов из ранее определенного массива colors и задаем ему фон, соответствующий этому цвету.
Все это было бы проще, однако ctx использует Javascript API, очень похожий на элемент холст.
Итак, чтобы раскрасить небольшой прямоугольник, вам нужно вызвать такие методы, как beginPath, fillStyle, rect и fill.
Я знаю, это утомительно.
Однако работать с контекстом холста очень легко, если вы его освоите. Прочтите код еще раз. Кроме того, он вполне читаем.
Теперь, когда пользовательская краска была зарегистрирована и логика записана, ее можно применить к элементу header, как показано ниже:
background-image: paint(checker)
paint - это глобально доступная функция, а checker - имя зарегистрированной краски, которую мы написали.
Вот и все!
После этого заголовок окрашивается фоновым изображением проверки!
Гудини за работой!
Для более подробного изучения я рекомендую это интерактивное руководство по Houdini и Введение в Paint API от Уны Кравец.
Заключение
С концептуальной точки зрения, можете ли вы сказать, что теперь лучше понимаете Houdini?
Следуйте за мной, чтобы увидеть продолжение этой статьи.
