草庐IT

javascript - MutationObserver 在整个 DOM 中检测节点的性能

coder 2023-07-04 原文

我有兴趣使用 MutationObserver检测是否在 HTML 页面的任何位置添加了某个 HTML 元素。例如，我会说我想检测是否有 <li> 's 添加到 DOM 中的任何位置。

所有 MutationObserver到目前为止，我看到的示例仅检测节点是否添加到特定容器。例如:

一些 HTML

<body>

  ...

  <ul id='my-list'></ul>

  ...

</body>
MutationObserver定义
var container = document.querySelector('ul#my-list');

var observer = new MutationObserver(function(mutations){
  // Do something here
});

observer.observe(container, {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

所以在这个例子中，MutationObserver设置为观察一个非常确定的容器( ul#my-list )以查看是否有 <li> 's 附加到它。

如果我想成为有问题吗？不太具体 , 并留意 <li>像这样覆盖整个 HTML 正文:
var container = document.querySelector('body');

我知道它适用于我为自己设置的基本示例......但是不建议这样做吗？这会导致性能不佳吗？如果是这样，我将如何检测和衡量该性能问题？

我想也许所有的 MutationObserver 都是有原因的。示例与他们的目标容器非常具体……但我不确定。

最佳答案

这个答案主要适用于大而复杂的页面。
如果在页面加载/渲染之前附加，如果页面又大又复杂( 1 ， 2 )，未优化的 MutationObserver 回调可以使页面加载时间增加几秒钟(例如，5 秒到 7 秒)。回调作为阻止 DOM 进一步处理的微任务执行，并且可以在复杂页面上每秒触发数百或数千次。大多数示例和现有库都没有考虑到这种情况，并提供了好看、易于使用但可能会很慢的 JS 代码。

  • 始终使用 devtools profiler并尝试使您的观察者回调消耗少于页面加载期间消耗的总 CPU 时间的 1%。
  • 避免触发 forced synchronous layout通过访问 offsetTop 和类似的属性
  • 避免使用像 jQuery 这样复杂的 DOM 框架/库，更喜欢原生 DOM 的东西
  • 观察属性时，使用attributeFilter: ['attr1', 'attr2'] .observe() 中的选项.
  • 尽可能以非递归方式观察直接 parent (subtree: false)。
    例如，通过观察 document 等待父元素是有意义的。递归地，成功断开观察者，在这个容器元素上附加一个新的非递归观察者。
  • 当只等待一个带有 id 的元素时属性，使用极快的 getElementById而不是枚举 mutations数组(它可能有数千个条目):example .
  • 如果页面上所需的元素相对较少(例如 iframe 或 object )，请使用 getElementsByTagName 返回的实时 HTMLCollection和 getElementsByClassName并重新检查它们而不是枚举 mutations例如，如果它有超过 100 个元素。
  • 避免使用 querySelector尤其是极慢的 querySelectorAll .
  • 如 querySelectorAll在 MutationObserver 回调中是绝对无法避免的，首先执行一个 querySelector检查，如果成功，继续 querySelectorAll .平均而言，这样的组合会快得多。
  • 如果针对 2018 之前的 Chrome/ium，请不要使用需要回调的内置 Array 方法，例如 forEach、filter 等，因为在 Chrome 的 V8 中，与经典的 for (var i=0 ....) 相比，调用这些函数的成本一直很高。循环(慢 10-100 倍)，并且 MutationObserver 回调可能会在复杂的现代页面上报告数千个节点。
  • 即使在较旧的浏览器中，由 lodash 或类似的快速库支持的替代功能枚举也可以。
  • 截至 2018 年，Chrome/ium 正在内联标准数组内置方法。
  • 如果针对 2019 之前的浏览器，请不要使用 the slow ES2015 loops喜欢 for (let v of something)在 MutationObserver 回调中，除非您进行转译以使生成的代码与经典的运行速度一样快 for循环。
  • 如果目标是改变页面的外观，并且您有一种可靠且快速的方法来告诉正在添加的元素在页面的可见部分之外，请断开观察者的连接并通过 setTimeout(fn, 0) 安排整个页面的重新检查和重新处理。 :当解析/布局事件的初始爆发完成并且引擎可以“呼吸”甚至可能需要一秒钟时，它将被执行。然后，例如，您可以使用 requestAnimationFrame 以块的形式不显眼地处理页面。
  • 如果处理很复杂和/或需要大量时间，则可能会导致绘制帧过长、无响应/卡顿，因此在这种情况下，您可以使用去抖动或类似技术，例如在外部数组中累积突变并通过 setTimeout/requestIdleCallback/requestAnimationFrame 安排运行:
    const queue = [];
const mo = new MutationObserver(mutations => {
  if (!queue.length) requestAnimationFrame(process);
  queue.push(mutations);
});
function process() {
  for (const mutations of queue) {
    // ..........
  }
  queue.length = 0;
}

    • 回到问题:

    watch a very certain container ul#my-list to see if any <li> are appended to it.


    自 li是直接子节点，我们寻找添加的节点，唯一需要的选项是 childList: true (见上面的建议#2)。
    new MutationObserver(function(mutations, observer) {
    // Do something here

    // Stop observing if needed:
    observer.disconnect();
}).observe(document.querySelector('ul#my-list'), {childList: true});

    关于javascript - MutationObserver 在整个 DOM 中检测节点的性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31659567/

    MutationObserverjavascriptcodelihtmlmutation-observers

    有关javascript - MutationObserver 在整个 DOM 中检测节点的性能的更多相关文章

    1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    2. ruby - 在 Ruby 的 if 语句中检查 bash 命令 - 2

      如何在Ruby的if语句中检查bash命令的返回值(true/false)。我想要这样的东西，if("/usr/bin/fswscell>/dev/null2>&1")has_afs="true"elsehas_afs="false"end它会提示以下错误含义，它总是返回true。(irb):5:warning:stringliteralincondition正确的语法是什么？更新:/usr/bin/fswscell寻找afs安装和运行状态。它会抛出这样的字符串，Thisworkstationbelongstocell如果afs没有运行，命令以状态1退出 最

    3. Ruby 的数字方法性能 - 2

      我正在使用Ruby解决一些ProjectEuler问题，特别是这里我要讨论的问题25(Fibonacci数列中包含1000位数字的第一项的索引是多少？)。起初，我使用的是Ruby2.2.3，我将问题编码为:number=3a=1b=2whileb.to_s.length但后来我发现2.4.2版本有一个名为digits的方法，这正是我需要的。我转换为代码:whileb.digits.length当我比较这两种方法时，digits慢得多。时间./025/problem025.rb0.13s用户0.02s系统80%cpu0.190总计./025/problem025.rb2.19s用户0.0

    4. ruby - Ruby 性能中的计时器 - 2

      我正在寻找一个用ruby​​演示计时器的在线示例，并发现了下面的代码。它按预期工作，但这个简单的程序使用30Mo内存(如Windows任务管理器中所示)和太多CPU有意义吗？非常感谢deftime_blockstart_time=Time.nowThread.new{yield}Time.now-start_timeenddefrepeat_every(seconds)whiletruedotime_spent=time_block{yield}#Tohandle-vesleepinteravalsleep(seconds-time_spent)iftime_spent

    5. ruby-on-rails - 如果条件与 &&，是否有任何性能提升 - 2

      如果用户是所有者，我有一个条件来检查说删除和文章。delete_articleifuser.owner?另一种方式是user.owner?&&delete_article选择它有什么好处还是它只是一种写作风格 最佳答案 性能不太可能成为该声明的问题。第一个要好得多-它更容易阅读。您future的自己和其他将开始编写代码的人会为此感谢您。 关于ruby-on-rails-如果条件与&&，是否有任何性能提升，我们在StackOverflow上找到一个类似的问题：

    6. ruby-on-rails - 在 Rails 中需要整个目录树的好方法是什么？ - 2

      我正在使用Rails3.2.2并希望递归加载某个目录中的所有代码。例如:[Railsroot]/lib/my_lib/my_lib.rb[Railsroot]/lib/my_lib/subdir/support_file_00.rb[Railsroot]/lib/my_lib/subdir/support_file_01.rb...基于谷歌搜索，我试过:config.autoload_paths+=["#{Rails.root.to_s}/lib/my_lib/**"]config.autoload_paths+=["#{Rails.root.to_s}/lib/my_lib/**/"

    7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

      我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

    8. ruby - 在 Ruby + Chef 中检查现有目录失败 - 2

      这是我在ChefRecipe中的一blockRuby:#ifdatadirdoesn'texist,moveoverthedefaultoneif!File.exist?("/vol/postgres/data")execute"mv/var/lib/postgresql/9.1/main/vol/postgres/data"end结果是:Executingmv/var/lib/postgresql/9.1/main/vol/postgres/datamv:inter-devicemovefailed:`/var/lib/postgresql/9.1/main'to`/vol/post

    9. ruby - 如何找到我的 Ruby 应用程序中的性能瓶颈？ - 2

      我编写了一个Ruby应用程序，它可以解析来自不同格式html、xml和csv文件的源中的大量数据。我如何找出代码的哪些区域花费的时间最长？有没有关于如何提高Ruby应用程序性能的好资源？或者您是否有任何始终遵循的性能编码标准？例如，你总是用加入你的字符串吗？output=String.newoutput或者你会使用output="#{part_one}#{part_two}\n" 最佳答案 好吧，有一些众所周知的做法，例如字符串连接比“#{value}”慢得多，但是为了找出您的脚本在哪里消耗了大部分时间或比所需时间更多，您需要进行分

    10. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

      文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具，用来对区块链系统进行各种管理操作。但是对于初学者来说，还是可视化界面更友好，本节就来介绍WeBASE管理平台，这是一款微众银行开源的自研区块链中间件平台，可以降低区块链使用的门槛，大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行，在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设，一定

    随机推荐