替代DOMNodeInserted [英] Alternative to DOMNodeInserted

问题描述

已知DOMNodeInserted使动态页面变慢， MDN甚至推荐不完全使用它，但不提供任何替代方案。

我对插入的元素不感兴趣，我只需要知道某些脚本何时修改DOM。是否有更好的替代突变事件监听器（可能在nsiTimer内的getElementsByTagName）？

解决方案

如果您正在创建一个Web应用程序针对最新的手机和较新版本的浏览器（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功能对于监控简单的插入和改变DOM，明白这个方法可以用来做更多的事情，因为它允许你监视对于任何CSS规则匹配，你可以做的事情。这对于许多用例来说是超级强大的，所以我把它包装在一个图书馆里： https://github.com / csuwildcat / SelectorListener

如果要定位各种浏览器，则需要将相应的前缀添加到CSS和animationstart事件名称。

基本节点插入案例

CSS ：

  @keyframes nodeInserted {
 from {
 outline -color：#fff; 
} 
至{
 outline-color：＃000; 
} 
} 
 
 div.some-control {
 animation-duration：0.01s; 
 animation-name：nodeInserted; 
} 
  

JavaScript ：

  document.addEventListener（'animationstart'，function（event）{
 if（event.animationName =='nodeInserted'）{
 //在这里做某事
} 
}，true）; 
  

聆听更复杂的选择器匹配：

这使得几乎不可能使用Mutation Observers的事情

CSS ：

  @keyframes adjacentFocusSequence {
 from {
 outline-color：#fff; 
} 
至{
 outline-color：＃000; 
} 
} 
 
 .one + .two + .three：focus {
 animation-duration：0.01s; 
 animation-name：adjacentFocusSequence; 
} 
  

JavaScript ：

  document.addEventListener（'animationstart'，function（event）{
 if（event.animationName =='adjacentFocusSequence'）{
 //做某事，当'.one + .two + .three'是
 //相邻的兄弟姐妹AND节点'.three'集中在
} 
}，true）; 
  

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

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)?

解决方案

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!

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

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

You'll need to add the appropriate prefixes to the CSS and animationstart event name if you want to target various browsers. You can read more about that in the post linked to above.

The basic node insertion case

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);

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屋！