如何全局跟踪 JavaScript 中的属性更改和 DOM 突变？

问：

我正在做一个项目，我需要监控 DOM 中的更改，特别是跟踪影响 DOM 元素的任何和所有 JavaScript 属性更改。我的目标是侦听对属性的任何“设置”操作（包括直接赋值、方法调用等），这些操作会导致 DOM 中的修改。

这是我想要实现的目标：

1. 全局跟踪：我想要一种机制，允许我跟踪在我的 JavaScript 代码中任何位置设置的、影响 DOM 的任何属性。这包括 DOM 元素本身的属性或最终修改 DOM 的任何其他对象。

2. DOM 突变：除了跟踪属性变化外，我还需要观察对 DOM 结构的修改，包括元素的添加、删除、属性更改等。

根据我的理解，我不能整个 DOM 元素，我不确定如何使用来拦截属性更改。 观看 DOM 更改似乎是一个很好的解决方案。ProxyObject.defineProperty()MutationObserver

是否有推荐的方法或现有库来促进这种全局 DOM 监控？此外，考虑到跟踪所有这些更改的潜在巨大开销，我如何确保此过程具有性能效率？

提前感谢您的建议！

我首先尝试使用 Proxy 对象来拦截 JavaScript 属性更改。