快捷导航
蚂蚁部落 网站首页 前端教程 DOM监听 查看内容

栏目导航

Mutation Observer优点

2017-11-16 23:01| 发布者: admin| 查看: 921| 评论: 0|来自: 蚂蚁部落

利用Mutation Observer可以监听DOM属性节点或者子节点的增加或者删除等变化。

Mutation Observer是DOM4增加,也就是HTML5新增的API,与之类似,DOM3增加的Mutation Events也可以完成类似功能,但是由于存在一系列的问题,所以W3C已经将其废弃,随意当前依然得到部分浏览器的支持。

更多关于HTML5内容可以参阅HTML5 API版块。

一.Mutation Events:

首先简单介绍一下Mutation Events,它能够监听DOM树结构的变化。

代码片段如下:

[JavaScript] 纯文本查看 复制代码
document.getElementById("ant").addEventListener("DOMSubtreeModified", function () {
  console.log("蚂蚁部落");
}, false);

子节点被修改,那么就会在控制台输出"蚂蚁部落"。

当然Mutation Events还包括其他不少事件,这里就不介绍了。

主要缺点如下:

(1).浏览器兼容性问题很大,并且W3C已经将其废弃。

(2).性能较差,Mutation Events是同步操作,节点的每次变动,都会触发事件,如果节点连续进行一万次变动,那么事件会连续触发一万次,执行一万次回调函数,很有可能导致浏览器卡顿的现象。

(3).Mutation Events是真正的事件,存在冒泡现象,所以可能会触父级Mutation Events事件,导致一些问题。

二.Mutation Observer:

它被用来替代Mutation Events,所有的监视操作会在其他脚本执行完毕后异步执行。

所有的变化都记录在数组中,最后统一使用回调函数处理,例如一个dom元素进行了若干变化,每一次变化都会暂时存储在一个数组中,等所有脚本执行完成,通过回调函数来统一执行每一次变化对应的动作。

特别说明:Mutation Observer在功能上类似于事件,但是并不是真正的事件。

浏览器兼容性:

a:3:{s:3:\"pic\";s:43:\"portal/201711/16/231824nlvzl9hnovo5noyd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

从上图看,Mutation Observer的浏览器支持度还是非常不错的。

主要优点如下:

(1).浏览器兼容性更好。

(2).因为是异步操作,所以性能会更好。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-23 15:51 , Processed in 0.194074 second(s), 25 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部