以下代码利用 DOM 突变事件 DOMNodeInserted检测 body 的存在元素并包裹它的 innerHTML放入 wrapper 中。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function DOMmanipulation() {
if (document.body) {
document.removeEventListener('DOMNodeInserted', DOMmanipulation);
// DOM manipulation start
document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
// DOM manipulation end
}
}
document.addEventListener('DOMNodeInserted', DOMmanipulation);
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
尽管包装成功，但有一个错误显示找不到节点。 This answer的一个问题解释说，这是因为当加载 jQuery 时，它添加了一个 div。元素进入 body 做一些测试，但未能删除 div元素，因为该元素已被包装到包装器中，因此它不再是 body 的子元素。
上面的实验告诉我们 DOMNodeInserted事件比 jQuery 的测试更快，因为 jQuery 的测试元素 ( div ) 在它可以被 jQuery 删除之前被包装。
现在下面的代码可以实现相同的操作，它使用了新引入的 DOM Mutation Observers。截至此时 (2012-07-11)，它仅适用于 Chrome 18 及更高版本。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var observer = new WebKitMutationObserver(function() {
if (document.body) {
observer.disconnect();
// DOM manipulation start
document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
// DOM manipulation end
}
});
observer.observe(document, { subtree: true, childList: true });
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
这段代码没有产生任何错误。这意味着 jQuery 比 DOM Mutation Observers 更快，因此它能够在元素被包装到包装器之前删除它的测试元素 ( div )。
从以上两个实验中，我们发现在执行速度上:
这个结果能恰本地证明 DOM Mutation Observers 比 DOM Mutation Events 慢吗？
最佳答案
DOM Mutation Observers，并不打算比 DOM Mutation Events 更快。相反，它们旨在提高效率和安全性。
区别的基本要点是只要有变化，DOM 突变事件就会触发。例如，这段代码会创建一个回调循环，最终会使浏览器崩溃。
document.addEventListener('DOMNodeInserted', function() {
var newEl = document.createElement('div');
document.body.appendChild(newEl);
});
事实上，它们以这种方式被调用并且经常对浏览器产生重大影响，因为它迫使浏览器在重新计算样式、回流和重绘周期之间中断，或者更糟的是迫使浏览器重新计算样式、回流和在每次回调时重新绘制。可能执行的其他代码对 DOM 进行了进一步更改，这将继续被您的回调中断，这一事实进一步加剧了这个问题。
更重要的是，由于事件以与普通 DOM 事件相同的方式传播，您将开始听到您可能不关心或未在代码中考虑的元素的变化。因此，DOM Mutation Events 的整个机制很难快速管理。
DOM Mutation Observers 抵消了这些问题，顾名思义就是观察 DOM 的变化，并为您提供从变化开始时发生的所有变化的报告。这是一个更好的情况，因为它允许浏览器在有意义的时间通知您，例如当文档空闲并且所有其他可以进行进一步更改的 JavaScript 已完成执行时，或者在浏览器重新启动之前重新计算/重绘循环，因此它可以应用您所做的任何更改，而不必在不久之后重复该循环。
它还使您更容易管理，因为您可以扫描所有更改的元素以找到您要查找的内容，而不是像以前那样为您不关心的内容编写大量案例处理代码突变事件的情况。更重要的是，它只会调用一次，因此您不必担心任何进一步的更改都会影响元素，即它们不再处于变化状态，它们已经发生变化。
因此，在回答您的问题时，DOM Mutation Observers 速度较慢，因为它们会等待 jQuery 完成对 DOM 的操作，然后再通知您 jQuery 更改了什么。由于上面解释的原因和你的例子，证明它是更安全更有效的解决方案(你不再导致错误)，你并不关心 jQuery 向 DOM 添加了一些东西，因为它会在不久之后删除它。使用 Observers，您会收到一份报告，详细说明添加和删除的 jQuery 元素。
但这仍然有点麻烦，因为您必须通过将元素与发生的所有更改进行匹配来弄清楚实际发生了什么。事实上，就您而言，没有发生任何事情(添加和删除相同的元素)，因此 DOM 的结构实际上没有发生任何变化。为了帮助解决这个问题，有一个名为 MutationSummary 的小库:
http://code.google.com/p/mutation-summary/
这会计算更改的净效果，并且只会调用传递这些更改的回调。因此，在您的情况下，您的回调根本不会被调用，因为更改的净影响为零。
例如对于以下内容，您只会得到一次更改。主体样式更改为 left: 1000px。即使我以 1000 个增量更改它。更改的净效果只是其初始值与最终值之间的差异。
function moveBody() {
for (var i = 0; i < 1000; i++) document.body.style.left = i + 'px';
}
moveBody();
关于javascript - DOM Mutation Observers 是否比 DOM Mutation Events 慢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11425209/
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife
我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案
我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查
我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/
这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
给定一个复杂的对象层次结构，幸运的是它不包含循环引用，我如何实现支持各种格式的序列化？我不是来讨论实际实现的。相反，我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby，我想解析XML和JSON数据以构建复杂的对象层次结构。此外，应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗？在任何提到的情况下，我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好，这样我以后就可以轻松支持多种XML格式。 最佳答案 我最