草庐IT

javascript - 文档 Dom 树与分离的 Dom 树？

coder 2024-05-17 原文

正在使用 chrome 发现内存泄漏(新手 :))

如何识别内存泄漏的位置？

什么是 Document DOM 树和 Detached Dom 树？

谁能解释一下？

最佳答案

识别内存泄漏的步骤。

  1. 从无认知模式 Chrome 开始。
  2. 打开您的应用程序
  3. 打开 Chrome Dev 工具(我喜欢在自己的窗口中将其最大化)
  4. 点击个人资料
  5. 使用 Take Heap Snapshot 选项并单击 Snapshot
  6. 对您的应用执行一些特定步骤
  7. 点击左上角的黑色圆圈再拍一张快照。
  8. 再重复步骤 5 到 7 2 次
  9. 检查保留大小 - 如果它继续增加 - 你有内存问题
  10. 在“时间轴”选项卡下，点击“垃圾收集器”按钮。
  11. 再拍一张快照，看看内存是否下降到合理的水平。

识别分离 DOM 树的步骤

  1. 要检测分离的 DOM 树，请单击其中一个快照上的“配置文件”选项卡
  2. 您会看到很多对象 - 尝试通过输入 DOM 来过滤它们，如图所示
  3. 如果您看到任何分离的 DOM 树，那么您“可能”遇到了问题。您正在做的事情可能需要您保留一些 DOM 用于克隆等。因此必须排除这种情况。如果您看到超出此范围的任何 DOM，则需要担心它们，尤其是如果这是一个单页应用程序，因为其他应用程序很快就会重新加载整个内容，这可能会清除内存。

  4. 您可以检查分离的 DOM 树，如下所示。

  5. 要检查它是什么 DOM，您可能需要将鼠标悬停在红色 HTML 元素上，如下所示。一旦找到 DOM ，这有助于调试

什么是“文档 DOM 树”？ 整个Document里面就是一个很大的DOM Tree。文档是 XML，标签是嵌套的，因此形成了一棵树。 (DOM - 文档对象模型。)

那么什么是“分离的 DOM 树”？

HTML 元素是消耗内存的对象实例。 每个这样的元素都可以在它们上面存储事件监听器和与之关联的数据。 现在“分离的 DOM 树”只不过是浏览器内存中的 DOM，但没有附加到主 DOM 树，也就是“文档 DOM 树”。

通过检查这些悬挂的对象，我们可以检测问题并避免内存泄漏。

解决这个问题是一个很大的话题，因为您可能会看到一些不同的解决方案。按照以下帖子了解一些人为解决问题所做的工作。

Can't seem to cleanup detached DOM elements

Javascript Memory Leaks: Detached DOM tree

关于javascript - 文档 Dom 树与分离的 Dom 树？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23057287/

javascriptDomlistrongmemory-leaksgoogle-chrome-devtools

有关javascript - 文档 Dom 树与分离的 Dom 树？的更多相关文章

  1. Matlab imread（）读到了什么 （浅显 当复习文档了） - 2

    matlab打开matlab，用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组（矩阵），往往是a*b*cunit8类型解释一下这个三维数组的意思，行数、数和层数，unit8：指数据类型，无符号八位整形，可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法，即RGB每个通道有256色阶（2^8）。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组，它将以灰度方式绘制；可以把图像拆分为rgb三层，可以以灰度的方式观察它figure(1

  2. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. Ruby 等同于 Sphinx 文档生成器？ - 2

    Ruby有一些不错的文档生成器，例如Yard、rDoc，甚至Glyph。问题是Sphinx可以做网站、PDF、epub、LaTex等。它在重组文本中完成所有这些事情。在Ruby世界中有替​​代方案吗？也许是程序的组合？如果我也能使用Markdown就更好了。 最佳答案 自1.0版以来，Sphinx有了“域”的概念，它是从Python和/或C以外的语言标记代码实体(如方法调用、对象、函数等)的方法。有一个rubydomain,所以你可以只使用Sphinx本身。您唯一会缺少的(我认为)是Sphinx使用autodoc从源代码自动创建文档

  4. ruby-on-rails - 在 irb 中阅读文档 - 2

    我怀念ipython的一件事是它有一个?为特定功能挖掘文档的运算符。我知道ruby​​有一个类似的命令行工具，但是我在irb中调用它非常不方便。ruby/irb有类似的东西吗？ 最佳答案 Pry是IPython的Ruby版本，它支持?命令来查找有关方法的文档，但语法略有不同:pry(main)>?File.dirnameFrom:file.cinRubyCore(CMethod):Numberoflines:6visibility:publicsignature:dirname()Returnsallcomponentsofthef

  5. 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

  6. ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本？ - 2

    我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案 这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t

  7. ruby - 如何让 Nokogiri 解析并返回 XML 文档？ - 2

    这是一些奇怪的例子:#!/usr/bin/rubyrequire'rubygems'require'open-uri'require'nokogiri'print"withoutread:",Nokogiri(open('http://weblog.rubyonrails.org/')).class,"\n"print"withread:",Nokogiri(open('http://weblog.rubyonrails.org/').read).class,"\n"运行此返回:withoutread:Nokogiri::XML::Documentwithread:Nokogiri::

  8. H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2

    目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

  9. Ruby YAML 多文档 - 2

    这是我的YAML文件“test.yml”:---alpha:100.0beta:200.0gama:300.0---3...第一个文档是一个散列。第二个文档是一个整数。我正在尝试将它们作为散列和整数加载到Ruby程序中。这是我目前的尝试:require'yaml'variables=YAML.load_file('test.yml')putsvariables.inspect 最佳答案 要访问单个文件中的多个YAML文档，请使用load_stream方法(正如“matt”在对其他答案之一的评论中提到的):YAML.load_stre

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐