动态网站降级上的 MDL

Question

我们有一个旧的大型 ajax GUI，适用于 MDL。整个页面内容是动态构建的（来自 xml 描述）。

componentHandler.downgradeElements( /all old notes/ ;
remove all old notes form DOM
add new page content to DOM
componentHandler.upgradeAllRegistered();

这工作正常，但如果组件 MaterialLayout 是动态创建的，它会泄漏内存。使用 "downgrading fix (#2009" 删除内部引用。
内存泄漏的原因是组件 MaterialLayout 向 MediaQueryList (MDL 1.1) 添加了一个侦听器。

 this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));

在 MDL 1.1.2 中添加了两个 windows 事件处理程序，这会导致同样的问题。

window.addEventListener('pageshow', function (e) { ... } );
...
window.addEventListener('resize', windowResizeHandler);

此侦听器未被 downgradeElements 删除。因此 DOM 元素不是 GC。

问题：

删除带MaterialLayout的元素不缩进吗？
我在这里做的完全错了吗？
这是 MDL 问题吗？
是否有不更改 MDL 代码的解决方法？

Answer 1

有一个 MDL 问题报告 Layout downgrade #1340

最后的结论是：
MDL 适用于 1.x 的无状态站点。破坏整个布局并不是最初构建布局组件时考虑的事情。

所以正确答案是：
删除带有MaterialLayout for MDL的元素没有缩进1.x。

附加信息：
为了解决问题（用于测试），我删除了从 material.js 添加 MediaQueryList 侦听器（仍然是 1.0.4 和 deconstructComponentInternal 形式 1.1.2）。这似乎适用于我们的解决方案。到目前为止，我没有发现任何缺点（同样在我们的解决方案中）。

动态网站降级上的 MDL

MDL on dynamic websites downgrading

javascript

memory-leaks

material-design-lite