Хук рендеринга в браузере
Предоставляют ли браузеры какой-либо хук перед рендерингом, где вы можете применять изменения к стилям элементов DOM до их рендеринга?
Например, я могу изменить цвет всего, что красный, на зеленый.
Это требование относится к расширению браузера, поэтому решение должно работать на разных веб-страницах. Нетривиально переопределить стиль элемента, не обращая внимания на исходный код, поскольку стиль элемента является результатом работы CSS и Javascript, и этот механизм отличается для разных веб-сайтов. На ум приходят следующие способы:
- Разбор CSS и Javascript веб-страницы для определения стилей элементов. Это кажется излишним, так как браузер также делает это
- Сканирование DOM и проверка вычисленных стилей каждого элемента и переопределение вещей. Это работает, но если элементы изменяются динамически, нам приходится многократно сканировать изменения, которые могут быть тяжелыми.
Так существует ли такой браузерный хук? Если нет, то какой альтернативный подход вы бы порекомендовали?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Нет никакого хука рендеринга для каждого элемента, нет. Вы можете запросить обратный вызов непосредственно перед рендерингом следующего кадра (обычно 60 кадров в секунду) через requestAnimationFrame, но это не лучшее место для проверки, о которой вы думаете.
Чтобы перехватывать изменения отдельных элементов, вы можете настроить наблюдатели мутаций для перехвата изменений их атрибута style (который является изменил, задав различные свойства свойства style в коде). Вы захотите посмотреть, превратится ли это в проблему с производительностью.
Поэтому я подозреваю, что вам нужно будет сделать комбинацию того, что вы описали, и выше:
- Просмотрите таблицы стилей, чтобы найти правила, которые вы хотите изменить.
- Определите элементы со встроенными стилями, которые вы хотите изменить
- Прислушивайтесь к изменениям атрибута
style, чтобы при необходимости реагировать на эти изменения.
@ rhino2rhonda - Боюсь, у меня нет особого понимания этой стороны вещей, кроме того, что я подозреваю, что вы правы насчет последствий для производительности ...
Для того, чего вы пытаетесь достичь, вам было бы очень полезно взглянуть на код расширения Chrome под названием Темный читатель. Это расширение может сделать всю вашу страницу темной, но делает это разумно, анализируя css кода. Если что-то уже темное, оно оставляет все как есть. Яркий фон делается черным, а текст белым, только если необходим контраст. Изображение прояснит ситуацию
Темный читатель визуализировался
Dark reader использует js для анализа css и стилей и внедряет собственные стили CSS на страницу для получения необходимого эффекта.
Если вы действительно хотите подключиться к конвейеру рендеринга браузера, взгляните на Проект Гудини, который позволит такие настройки для браузера в будущем. Он не готов сейчас.
И Dark Reader, и Project Houdini очень актуальны. Благодаря тонну!
Спасибо! Это очень полезно. Я предполагаю, что прослушивание изменений DOM должно работать достаточно хорошо. Если вы не возражаете, не могли бы вы пролить свет на то, почему не существует хуков рендеринга? Я предполагаю производительность, потому что это кажется полезной функцией, особенно для расширений браузера.