Document Dom tree vs Detached Dom tree？
NkS*_*NkS 9 javascript memory-leaks google-chrome-devtools
我发现内存泄漏使用chrome(新手:))
如何识别内存泄漏的位置？
什么是Document DOM树和Detached Dom树？
任何人都可以解释一下吗？
bha*_*tol 26
识别内存泄漏的步骤.
- 从认知模式Chrome开始.
- 打开您的应用程序
- 打开Chrome开发工具(我喜欢在自己的窗口中打开它最大化)
- 点击个人资料
- 使用"Take Heap Snapshot"选项和"Click Snapshot"
- 使用您的应用执行一些特定步骤
- 点击左上角的黑色圆圈拍摄另一张快照.
- 重复步骤5到7 2次
- 检查保留大小 - 如果它继续增加 - 你有内存问题
- 在"时间轴"选项卡下,单击"垃圾收集器"按钮.
- 拍摄另一张快照,看看内存是否达到合理水平.
识别分离的DOM树的步骤
- 要检测已分离的DOM树,请单击其中一个快照上的"配置文件"选项卡
- 您将看到许多对象 - 尝试通过键入DOM来过滤它们,如图所示
- 如果你看到任何Detached DOM Trees,那么你"可能"有问题.您正在做的事情可能需要您将一些DOM保留在一边以进行克隆等.因此必须排除这一点.如果您看到除此之外的任何DOM,您需要担心它们,特别是如果这是单页应用程序,因为其他应用程序很快会重新加载整个内容并且可能会清除内存.
您可以检查分离的DOM树,如下所示.
要检查它是什么DOM,您可能希望将鼠标悬停在Red HTML元素上,如下所示.一旦找到DOM,这有助于调试
什么是"文档DOM树"？ 整个Document里面是一个很大的DOM Tree.文档是XML,标签嵌套,从而形成树.(DOM - 文档对象模型.)
什么是"独立DOM树"？
HTML元素是消耗内存的对象的实例.每个这样的元素都可以在其上存储事件监听器和与之关联的数据.现在,"分离的DOM树"只不过是浏览器内存中的DOM,但是没有附加到主DOM树,即"Document DOM Trees".
通过检查这些悬挂对象,我们可以检测问题并避免内存泄漏.
解决这个问题是一个很大的话题,因为你可能会看到一些不同的解决方案.请按照以下帖子了解一些人为解决问题所做的工作.
- @hbhantol，感谢您提供详细信息。感谢您的时间和精力。:) (2认同)
- 此外，如果有人需要重新创建分离的 DOM 树场景，请按照以下步骤操作：https://developer.chrome.com/devtools/docs/heap-profiling-dom-leaks (2认同)
| 归档时间： |
|
| 查看次数： |
5766 次 |
| 最近记录： |