浏览器渲染钩

Question

浏览器是否提供任何预渲染钩子，您可以在其中将更改应用于DOM元素的样式，然后再进行渲染？

例如，我可能想要将 red 的任何颜色更改为 green

此要求是针对浏览器扩展的，因此该解决方案应可在不同的网页上运行。在不了解源代码的情况下覆盖元素的样式并非易事，因为元素的样式是在其上运行的CSS和Javascript的结果，并且不同网站的机制也不相同。想到的方法是：

• 解析网页的CSS和Javascript以确定元素的样式。这似乎是多余的，因为浏览器也在这样做
• 扫描DOM并检查每个元素和替代内容的计算样式。这可行，但是如果元素动态变化，我们必须反复扫描可能很重的变化

那么是否存在这样的浏览器挂钩？如果没有，您会推荐哪种替代方法？

Answer 1

没有按元素渲染钩，没有。您可以在requestAnimationFrame呈现下一帧（通常每秒60帧）之前请求回调，但这并不是进行您所考虑的检查的好地方。 / p>

要捕获对单个元素的更改，可以设置mutation observers来捕获对其style属性的更改（ 可以通过在{{ 1}}代码中的属性）。您将要观察这是否会导致性能问题。

因此，我怀疑您需要将上述内容与上述内容结合起来：

• 搜索style sheets来查找要更改的规则
• 使用要更改的内联样式标识元素
• 收听style属性的更改，以便您可以在必要时对这些更改进行回复

Answer 2

对于您要实现的目标，查看名为Dark Reader的Chrome扩展程序的代码将非常有帮助。此扩展程序可以使整个页面变暗，但是可以通过分析代码的CSS来智能地将其变暗。如果某物已经很暗，它将保持原样。仅在需要对比度时，将明亮的背景设置为黑色，将文本设置为白色。 图片可以使事情变得清晰

原始

呈现深色阅读器

Dark reader使用js分析CSS和样式，并在页面中注入自己的CSS样式以获得所需的效果。

如果您确实想利用浏览器的渲染管道，请查看Project Houdini，将来将允许对浏览器进行此类自定义。现在还没准备好。