要捕获单页面应用程序上的DOM重新渲染,可以使用MutationObserver来监听DOM的变化。下面是一个包含代码示例的解决方法:
// 创建一个MutationObserver实例
const observer = new MutationObserver((mutationsList, observer) => {
// 遍历每个发生变化的mutation
for(let mutation of mutationsList) {
// 判断是否是DOM节点的子树发生了变化
if(mutation.type === 'childList') {
// 处理DOM重新渲染的逻辑
console.log('DOM重新渲染');
// 可以在这里执行需要的操作
}
}
});
// 配置需要观察的目标节点和观察选项
const targetNode = document.querySelector('body');
const config = {
childList: true, // 观察目标节点的子节点变化
subtree: true // 观察目标节点的所有后代节点变化
};
// 开始观察目标节点的变化
observer.observe(targetNode, config);
上述代码创建了一个MutationObserver实例,并使用observe()方法开始观察目标节点的变化。当目标节点的DOM发生重新渲染时,MutationObserver的回调函数将被触发,我们可以在回调函数中执行需要的操作。在代码示例中,只打印了一条日志,你可以根据需要修改回调函数中的逻辑来处理DOM重新渲染。