javascript - 为什么 translate3d 会泄漏 DOM 节点？

Question

考虑这个 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 memory timeline中的节点数量不断增加，如果应用了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

Answer 1

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