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

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

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

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

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

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

Источник

2 ответа

Решение

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

оригинал

Темный читатель оказал

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

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

Источник

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

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

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

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