DOMNodeInserted的替代方案

Question

已知DOMNodeInserted使动态页面变慢,MDN甚至建议不要完全使用它,但不提供任何替代方案.

我对插入的元素不感兴趣,我只需要知道一些脚本何时修改DOM.是否有更好的替代突变事件监听器(可能是nsiTimer中的getElementsByTagName)？

Answer 1

如果您要创建一个针对最新手机和更新版本浏览器(Firefox 5 +,Chrome 4 +,Safari 4 +,iOS Safari 3 +,Android 2.1+)的网络应用,您可以使用以下代码创建一个很棒的用于插入dom节点的事件,它甚至可以在节点上运行,最初是页面静态标记的一部分!

以下是完整帖子的链接和示例:http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

关于Mutation Observers的注意事项:虽然最近的浏览器中较新的Mutation Observers功能非常适合监视简单的插入和DOM的更改,但是要明白这个方法可以用来做更多的事情,因为它允许你监视任何与你匹配的CSS规则可以的东西.这对于许多用例来说非常强大,所以我将它包装在一个库中:https://github.com/csuwildcat/SelectorListener

如果要定位各种浏览器,则需要为CSS和animationstart事件名称添加适当的前缀.您可以在上面链接的帖子中阅读更多相关信息.

基本节点插入案例

CSS:

@keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

div.some-control {
    animation-duration: 0.01s;
    animation-name: nodeInserted;
}

JavaScript:

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'nodeInserted'){
        // Do something here
    }
}, true);

倾听更复杂的选择器匹配:

这使得Mutation Observers几乎不可能完成任务

CSS:

@keyframes adjacentFocusSequence {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

.one + .two + .three:focus {
    animation-duration: 0.01s;
    animation-name: adjacentFocusSequence;
}

JavaScript:

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'adjacentFocusSequence'){
        // Do something here when '.one + .two + .three' are 
        // adjacent siblings AND node '.three' is focused
    }
}, true);

Answer 2

@naugtur简要提到的一个新选择是MutationObserver.它被设计为替换已弃用的变异事件,如果您正在开发的浏览器支持它(就像您正在开发浏览器扩展).