https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver (opens new window)
MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。
// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");
// 观察器的配置(需要观察什么变动)
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数
const callback = function (mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for (let mutation of mutationsList) {
if (mutation.type === "childList") {
console.log("A child node has been added or removed.");
} else if (mutation.type === "attributes") {
console.log("The " + mutation.attributeName + " attribute was modified.");
}
}
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
// 之后,可停止观察
observer.disconnect();
https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API (opens new window)
Resize Observer API 提供了一种高性能的机制,通过该机制,代码可以监视元素的大小更改,并且每次大小更改时都会向观察者传递通知。
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
if (entry.contentBoxSize) {
entry.target.style.borderRadius =
Math.min(
100,
entry.contentBoxSize.inlineSize / 10 +
entry.contentBoxSize.blockSize / 10
) + "px";
} else {
entry.target.style.borderRadius =
Math.min(
100,
entry.contentRect.width / 10 + entry.contentRect.height / 10
) + "px";
}
}
});
resizeObserver.observe(document.querySelector("div"));
PerformanceObserver() 构造函数使用给定的观察者 callback 生成一个新的 PerformanceObserver 对象.当通过 observe() 方法注册的 条目类型 的 性能条目事件 被记录下来时,调用该观察者回调.
var observer = new PerformanceObserver(function (list, obj) {
var entries = list.getEntries();
for (var i = 0; i < entries.length; i++) {
// Process "mark" and "frame" events
}
});
observer.observe({ entryTypes: ["mark", "frame"] });
function perf_observer(list, observer) {
// Process the "measure" event
}
var observer2 = new PerformanceObserver(perf_observer);
observer2.observe({ entryTypes: ["measure"] });