草庐IT

javascript - 何时使用 NodeIterator

coder 2024-07-23 原文

Benchmark比较 QSA & .forEach对比 NodeIterator

toArray(document.querySelectorAll("div > a.klass")).forEach(function (node) {
  // do something with node
});

var filter = {
    acceptNode: function (node) {
        var condition = node.parentNode.tagName === "DIV" &&
            node.classList.contains("klass") &&
            node.tagName === "A";

        return condition ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
    }  
}
// FIREFOX Y U SUCK
var iter = document.createNodeIterator(document, NodeFilter.SHOW_ELEMENT, filter, false);
var node;
while (node = iter.nextNode()) {
    // do thing with node    
}

现在要么NodeIterator很糟糕，或者我做错了。

问题:我什么时候应该使用 NodeIterator ?

如果您不知道，DOM4 指定了什么 NodeIterator是。

最佳答案

NodeIterator (和 TreeWalker ，就此而言)由于各种原因几乎从未使用过。这意味着有关该主题的信息很少，并且 answers like @gsnedders'来，这完全不合时宜。我知道这个问题已经有将近十年的历史了，所以请原谅我的死灵术。

1. 启动与表现

确实，启动的 NodeIterator比 querySelectorAll 之类的方法慢，但这不是您应该衡量的性能。

关于NodeIterator的事情s 是他们以这种方式生活，就像 HTMLCollection或直播 NodeList ，您可以在启动一次后继续使用该对象。NodeList返回者 querySelectorAll是静态的，每次需要匹配新添加的元素时都必须重新启动。

This version jsPerf 的 NodeIterator在准备代码中。实际测试仅尝试使用 iter.nextNode() 遍历所有新添加的元素。 .您可以看到迭代器现在快了几个数量级。

2. 选择器性能

好吧，爽。缓存迭代器更快。 This version然而，显示了另一个显着差异。我添加了 10 个选择器不应该匹配的类( done[0-9] )。迭代器丢失了大约 10% 它的速度，而 querySelectors 失去了 20% .

另一方面，this version , 显示添加另一个 div > 时发生的情况在选择器的开头。迭代器丢失 33% 它的速度，而 querySelectors 的速度是 增加的 10% .

删除初始 div >在选择器的开头，如 this version表明这两种方法都变慢了，因为它们比早期版本匹配得更多。与预期的一样，在这种情况下，迭代器的性能相对比 querySelectors 更高。

这意味着在 NodeIterator 中基于节点自己的属性(它的类、属性等)进行过滤可能会更快。 ，虽然在选择器中有很多组合符(>、+、~ 等)可能意味着 querySelectorAll速度更快。对于 尤其如此。 (空间)组合器。使用 querySelectorAll('article a') 选择元素比手动循环遍历每个 a 的所有父级要容易得多元素，寻找具有 tagName 的元素的 'ARTICLE' .

附言在第 3.2 节中，我举了一个例子，说明如果您想要与空间组合器所做的相反的事情(排除带有 a 祖先的 article 标签)，完全相反的情况如何成立。

3 不可能的选择器

3.1 简单的层次关系

当然，手动过滤元素为您提供了几乎无限的控制。这意味着您可以过滤掉通常无法与 CSS 选择器匹配的元素。例如，CSS 选择器只能以选择 div 的方式“回顾”。 s 前面是另一个 div可以使用 div + div .选择 div s 后跟另一个 div是不可能的。

然而，在 NodeFilter 里面，您可以通过检查 node.nextElementSibling.tagName === 'DIV' 来实现此目的.对于 CSS 选择器无法做出的每个选择，也是如此。

3.2 更全局的层级关系

我个人喜欢的另一件事 NodeIterator s，是您可以通过返回 NodeFilter.FILTER_REJECT 来拒绝一个节点及其整个子树。而不是 NodeFilter.FILTER_SKIP .

想象一下你想遍历所有 a页面上的标签，带有 article 的标签除外祖先。使用 querySelectors，您可以输入类似的内容

let a = document.querySelectorAll('a')
a = Array.prototype.filter.call(a, function (node) {
  while (node = node.parentElement) if (node.tagName === 'ARTICLE') return false
  return true
})

而在 NodeFilter ，你只需要输入这个
return node.tagName === 'ARTICLE' ? NodeFilter.FILTER_REJECT : // ✨ Magic happens here ✨
       node.tagName === 'A'       ? NodeFilter.FILTER_ACCEPT :
                                    NodeFilter.FILTER_SKIP

综上所述

每次需要迭代相同类型的节点时，您不必启动 API。可悲的是，这个假设是在提出问题时做出的，+500 的答案(给予它更多的信任)甚至没有解决错误或任何好处 NodeIterator有。

有两大优势 NodeIterator必须提供:
  • 活力，如 §1
    • 中所述
  • 高级过滤，如第 3 节所述
    (我再怎么强调 NodeFilter.FILTER_REJECT 示例的用处都不为过)

    • 但是，不要使用 NodeIterator s 当以下任一情况为真时:
  • 它的实例只会被使用一次/几次
  • 使用 CSS 选择器可以查询复杂的层次关系
    (即 body.mobile article > div > div a[href^="/"])

    • 对不起，答案很长:)

    关于javascript - 何时使用 NodeIterator，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7941288/

    NodeIteratorjavascriptcodebrdomdom4

    有关javascript - 何时使用 NodeIterator的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

      我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

    3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

      很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

    5. ruby - 在 Ruby 中使用匿名模块 - 2

      假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

    6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

      我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

    7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

      关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

    8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

      我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

    9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    10. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

      我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

    随机推荐