替代 DOMNodeInserted [英] Alternative to DOMNodeInserted

问题描述

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

DOMNodeInserted is known to make dynamic pages slow, MDN even recommends not using it altogether, but doesn't provide any alternatives.

我对插入的元素不感兴趣，我只需要知道某个脚本何时修改了 DOM.是否有更好的替代突变事件侦听器的方法(可能在 nsiTimer 中使用 getElementsByTagName)?

I'm not interested in the element inserted, I just need to know when some script modifies the DOM. Is there a better alternative to mutation event listeners (maybe getElementsByTagName inside an nsiTimer)?

推荐答案

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

If you are creating a web app that targets recent mobile phones and newer versions of browsers (Firefox 5+, Chrome 4+, Safari 4+, iOS Safari 3+, Android 2.1+), you can use the following code to create an awesome event for the insertion of dom nodes, and it even runs on the nodes initially part of the page's static mark-up!

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

Here's the link to the full post with and example: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

关于 Mutation Observers 的注意事项:虽然最近浏览器中较新的 Mutation Observers 功能非常适合监控对 DOM 的简单插入和更改，但请务必了解此方法可用于执行更多操作允许您监视任何 CSS 规则匹配.这对于许多用例来说都非常强大，所以我把它封装在一个库中:https://github.com/csuwildcat/SelectorListener

Note on Mutation Observers: while the newer Mutation Observers features in recent browsers are great for monitoring simple insertions and changes to the DOM, do understand that this method can be used to do far more as it allows you to monitor for any CSS rule match you can thing of. This is super powerful for many use-cases, so I wrapped this up in a library here: 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 几乎不可能做到的事情成为可能

Listening for more complex selector matches:

This enables things that are almost impossible to do with 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);

这篇关于替代 DOMNodeInserted的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！