javascript - 交换大树的首选方式（例如 SPA 中的页面）：`display: none`、`replaceChild()` 等

在开发复杂的 Web 应用程序（如 SPA）时，我们面临着在不同时间显示/启用/保持更新的应用程序不同部分的问题。

例如，作为一个简单的示例，考虑在 SPA 中交换应用程序的当前页面/部分/活动。

假设这些树很重要（它们是整个页面，它们可能包含 CSS 动画、事件处理程序、一些非静态内容等）并且我们关心性能，那么现在交换它们的首选方式是什么进进出出？现代框架选择什么方法？为什么？

特别是，需要考虑的几个指标很重要：

请注意，为了尽可能快，我们希望以某种方式保持内容/页面的预加载（即此处不讨论网络请求）。

就上下文而言，以下是人们多年来使用的几种方式：

在 JS 中有一些字符串模板。切换页面时，立即完全替换内容innerHTML（为了性能），重新附加处理程序并根据需要开始更新非静态值，等等。
将所有内容都保留在 DOM 中（即所有可能页面的所有元素），但有非活动页面，带有display: none. 然后，交换当前页面，只需将display页面中的属性切换出去和进入页面。另外，不要更新不可见的页面以避免性能损失。
将树保留在 JS 中（即保留对NodeJS 中每个页面的每个最顶层的引用），并使用例如replaceChild().

标签： javascripthtmlcssperformancedom