Браузер рендеринга

Question

Предоставляют ли браузеры какую-либо ловушку перед рендерингом, где вы можете применить изменения к стилям элементов DOM до их рендеринга?

Например, я могу захотеть изменить цвет всего, что красный до зеленый

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

• Анализ CSS и Javascript веб-страницы для определения стилей элементов.Это кажется излишним, так как браузер также делает это
• Сканирование DOM и проверка вычисленных стилей каждого элемента и переопределяющих вещей.Это работает, но если элементы изменяются динамически, нам приходится многократно сканировать изменения, которые могут быть значительными

Так существует ли такая ловушка браузера?Если нет, какой альтернативный подход вы бы порекомендовали?

Answer 1

Для того, чего вы пытаетесь достичь, было бы очень полезно взглянуть на код расширения Chrome под названием Dark Reader . Это расширение может сделать всю вашу страницу темной, но делает это разумно, анализируя CSS кода. Если что-то уже темно, оно оставляет все как есть. Яркие фоны делаются черными, а текст - белым, только если необходим контраст. Изображение прояснит ситуацию

Оригинал

Темный читатель визуализирован

Dark reader использует js для анализа CSS и стилей и внедряет свои собственные стили CSS в страницу, чтобы получить требуемый эффект.

Если вы действительно хотите подключиться к конвейеру рендеринга браузера, взгляните на Project Houdini , который позволит такие настройки для браузера в будущем. Сейчас не готово.

Answer 2

Нет привязки рендеринга для каждого элемента, нет.Вы можете запросить обратный вызов непосредственно перед рендерингом следующего кадра (обычно это 60 кадров в секунду) через requestAnimationFrame, но это было бы не лучшим местом для проверкидумая о.

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

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

• Просмотрите таблицы стилей , чтобы найти правила, которые вы хотите изменить
• Определите элементы со встроенными стилями, которые вы хотите изменить
• Прослушайте изменения атрибута style, чтобы вы моглиможет реагировать на эти изменения в случае необходимости