Mithril应用打开第9个弹窗时崩溃，求内存优化以支持多弹窗

弹窗复用，避免重复创建实例 #

别每次点击都新建弹窗组件，搞个弹窗池维护几个现成的实例。弹窗关闭时只隐藏（比如加个hidden类），而不是销毁DOM和组件。需要打开新弹窗时，直接复用池里的闲置实例，更新数据后显示。Mithril里可以通过条件渲染控制显示状态，不用反复调用m.mount销毁重建，能大幅减少DOM节点和组件实例的创建开销。

管控API请求，减少冗余与内存占用 #

每个弹窗5-6次请求，很容易出现重复请求或未完成请求占用内存：

• 缓存请求结果：用Mithril的m.request自带的缓存配置（设置cache: true），或者自己维护一个全局缓存对象，根据请求的URL和参数缓存响应数据，相同数据的弹窗直接复用缓存，不用重复发起请求。
• 取消未完成请求：弹窗关闭时，调用m.request返回promise的abort()方法，终止还在pending的请求，避免请求回调持有弹窗实例引用导致内存泄漏。

手动清理组件残留资源 #

Mithril的自动GC不一定能覆盖所有场景，尤其是嵌套组件里的自定义事件或订阅：

• 在弹窗组件的onremove生命周期钩子中，手动移除内层列表的滚动、点击等事件监听，取消所有自定义订阅（比如Mithril的m.subscribe），清理定时器或动画帧。
• 弹窗隐藏时，可以卸载内层列表的DOM（用条件渲染，比如visible ? m(ListComponent) : null），只保留外层容器，需要显示时再渲染，减少DOM节点数量。

优化虚拟DOM渲染效率 #

• 给弹窗组件和内层列表的每个项设置唯一的key（比如m("#popup-" + id, {key: id}, ...)），让Mithril的diff算法能精准识别变化，减少不必要的DOM操作。
• 避免在render函数里动态创建新对象或数组，比如把列表数据存在组件的state中，不要每次render都重新生成，减少虚拟DOM的diff计算量。

排查内存泄漏点 #

用Chrome DevTools的Memory面板，录制打开/关闭弹窗前后的内存快照，对比查找未被回收的组件实例、DOM节点或事件监听。重点检查有没有全局变量（比如window上的对象）引用弹窗实例，导致GC无法回收。

内容的提问来源于stack exchange，提问作者Ernanni