为什么 translate3d 会泄漏 DOM 节点？答案

【问题标题】：Why is translate3d leaking DOM nodes?为什么 translate3d 会泄漏 DOM 节点？
【发布时间】：2013-10-12 19:28:49
【问题描述】：

考虑这个 HTML 页面：

http://jsbin.com/aYUcelo/1/ （我建议下载它以消除所有 jsbin 噪音）。

单击 GO 按钮会在正文中添加一个 div。 RM 删除其中一个 div。它还将两种样式之一应用于新 div：

newDiv.style.color = "red";
// or
newDiv.style.WebkitTransform = "translate3d(0px, 0px, 0px)";

你可以在chrome dev tools的内存时间线上看到不断增长的节点，如果应用了WebkitTransform，GC是无法移除的。红色样式不会发生这种情况。

编辑：只是为了明确应用“红色样式”添加和删除 div 的操作是节点数等价的。

这种行为的原因是什么？我错过了重点吗？甚至没有 DOM 节点泄漏？

这里可以找到两条时间线记录： https://docs.google.com/file/d/0B9S6doraVaWXdjRyWjluMW1BUlU（翻译） https://docs.google.com/file/d/0B9S6doraVaWXQVAwbFpfZzh1RVE（红色）

在这两个记录中，连续添加和删除 3 个 div，最后请求 GC。仅供参考：我有一个更复杂的 Angular 应用程序，但我可以找出内存泄漏到同一个问题。无论如何，我创建了这个更简单的示例。

编辑：时间线记录的两张图片： https://docs.google.com/file/d/0B9S6doraVaWXMURzMjdhMWI0UDA https://docs.google.com/file/d/0B9S6doraVaWXWGhwVWhlMjN4dkE

编辑 2：运行 Windows 8 / Chrome 30.0.1599.69 m

【问题讨论】：

提交了一个铬错误，描述了同样的问题：code.google.com/p/chromium/issues/detail?id=304689

标签： javascript css google-chrome memory-leaks

【解决方案1】：

您是否偶然使用了 Visual Studio 2013？如果是这样，请检查您的网络面板并查看任何 XHR 活动与内存中不稳定的对象操作之间是否存在相关性。如果是这种情况，这是因为 Visual Studio 2013 集成了一个 signalR 浏览器监视器，该监视器在您部署它的浏览器中测试您的项目时运行。

【讨论】：