Ember.js 从DOM中删除表可能会导致转换非常慢

我使用的是Ember JS 2.3.0、Ember Data 2.3.3和jQuery 2.1.4，当我试图从一个包含HTML表组件的页面过渡时遇到了一个问题。表格组件由来自此Ember数据调用的数据填充：

this.store.query('log', {filter: {
    created_at_from: moment().subtract(1, 'month').format('DD/MM/YYYY'),
    created_at_to: moment().format('DD/MM/YYYY'),
    object: 'IsoApplication'
}})

在开发人员工具的“时间线”和“网络”选项卡中查看后，这些问题正及时得到解决。它没有特殊的jQuery事件等附加到它，只是一个简单的HTML表，使用Ember动态生成

但是，当单击一个“链接到”帮助器，该帮助器从包含组件的页面转移出去时，在目标页面呈现之前会有10秒的巨大延迟。在这段时间内，似乎什么都没有发生，并且使用了开发人员工具“Timeline”并深入研究，似乎在调用“removeFromListeners”函数时出现了延迟（请参见所附的Timeline屏幕截图）。在这一点上没有发生异步的事情，因此没有出现加载器，但是问题似乎在于拆下表，因为如果我从模板中删除表组件，问题就会消失。如果没有表组件，页面几乎会立即转换

我附上了时间轴截图，看看是否有人可以帮助查明这个问题的可能原因。 欢迎提出任何建议

---

谢谢。

好的，在显著减少表中的行数后，我发现问题消失了@runspired提供了我的问题发生原因的详细且非常有用的描述，我在下面发布了这些描述，以通知可能有类似问题的其他人：

这里发生了很多事情

我已经就此做了几次演讲（包括余烬周末的两个播客（第38集和第39集））

我希望我的芝加哥余烬演讲能被录音，但我没有

但基本上可以归结为三件事来解释为什么这是缓慢的

事实上，这并不是因为“dom很慢”，这个论点掩盖了事情的真相

1.）不要渲染宇宙，渲染场景

最简单的类比就是拿你能想到的任何一款视频游戏，尤其是一款你能快速“旋转”摄像机视角的游戏

那个轴很像卷轴

实际上，您只希望渲染当前可见的内容，并准备更接近摄影机视图的内容

但是，准备远远看不见的内容是没有意义的

这是每个本机SDK和游戏SDK都学到的一课，但JS框架尚未意识到这一点

当人们说DOM很慢时，其实是因为他们试图呈现的东西远远超过了他们应该呈现的东西

2.）是大多数浏览器中的一个bug

分配给DOM的内存始终由分配它的选项卡保留

此分配会在页面的生命周期之外持续存在

这是一个真正的漏洞，希望Chrome等能很快修复

或者基本上，为DOM所做的分配堆大小只能不断增加

您可以重用分配的内存，但不能缩减它

这意味着，如果生成大量DOM节点，即使将它们拆下，该选项卡也会有很高的内存开销

这会导致其他方面的性能问题，因为用于JS分配等的内存较少

在移动设备上，尤其是安卓系统上，这个问题比在台式机上更严重。但它也会影响桌面

与1和2齐头并进的东西

在浏览器开始运行之前，可以渲染多少DOM节点是否有明确的限制

我发现这个限制大约是40k个DOM节点，在旧的android设备上低至20k，在Safari上则超过100k

但40k似乎是一个极限，如果将其作为目标，对所有平台都适用

如果您有700-2000个表行，每行可能有3个TDs，每个TD只有一个链接、跨度或其他元素，那么其中有一些文本

6300-18000节点

或者，基本上，你要处理的是你最大预算的一半

正如行的内容一样

所以7002-20002个节点计算行数

每行9个节点的估计值可能很低

如果我们加倍的话

你超过了最大值

18个节点听起来更有可能

3.）GC事件阻止了世界

[9:28] 即使选项卡分配的内存被保留

分配已清理完毕

（这样以后可以在更多DOM中重用）（已编辑）

因此，您一次至少释放最大DOM大小（可能更大）的内存

这对浏览器来说是一个很大的问题

在这段时间内，很多阵列和阵列观测器也可能被拆除

@runspired也是该项目的作者，该项目：

通过为performant列表和苗条渲染提供组件和原语，以符合核心理念：不渲染宇宙，渲染场景，重点改进高应力情况下的初始和重新渲染性能

---

好的，在显著减少表中的行数之后，我发现问题消失了@runspired提供了我的问题发生原因的详细且非常有用的描述，我在下面发布了这些描述，以通知可能有类似问题的其他人：

这里发生了很多事情

我已经就此做了几次演讲（包括余烬周末的两个播客（第38集和第39集））

我希望我的芝加哥余烬演讲能被录音，但我没有

但基本上可以归结为三件事来解释为什么这是缓慢的

事实上，这并不是因为“dom很慢”，这个论点掩盖了事情的真相

1）不要渲染t