单页应用程序 - 是否将页面（视图）保留在 DOM 中？答案

【问题标题】：Single Page App - keep pages (views) in the DOM or not?单页应用程序 - 是否将页面（视图）保留在 DOM 中？
【发布时间】：2015-11-11 13:47:37
【问题描述】：

我正在构建一个移动网络应用程序，并正在考虑管理应用程序页面的最佳方法（比如“全屏视图”）。

使用 jQuery Mobile 时，大量使用的页面都保存在 DOM 中。其他一些框架（Backbone/Marionette）用户suggest 只有一个页面，该页面被拆分为导航更新的区域。由于我的页面之间没有太多可共享的内容（甚至页眉/页脚更改），这意味着如果之前删除了整个页面，则应该在导航时重新呈现整个页面。

通过快速使用这两种方法，我注意到已经从 DOM 缓存的页面比重新渲染要快得多，而且在保持页面更长时间时我没有感觉到性能问题。

我的问题是，根据您的经验，最好的方法是什么？如果页面内容没有太大变化或根本没有变化，那么也许我不应该删除视图。（我说的是最多 10 个中等重量的页面）。干杯

【问题讨论】：

一段时间后回到这个问题，我认为放弃在 DOM 中保存大页面是一个不错的选择。将视图设置到现有元素（即页面）可能比创建新元素更快，但总体而言，这会降低整个应用程序的性能，并且通常与动态编译小组件界面而不是拥有一块巨石。再次感谢！

标签： javascript dom jquery-mobile backbone.js marionette

【解决方案1】：

我相信传统的做法（通常是性能最高的）是只渲染足够的内容来填充页面。如果内容不能被看到，那么将它放在 DOM 中就没什么用了。

但是，仅仅因为这可能是传统的做法并不意味着它对您的应用来说是最好的。如果您能够将所有内容保留在 DOM 中，从而获得明显更好的性能，那么我认为这不是一个坏方法。

您可能在使用传统方法时遇到性能问题，因为您还没有改进该方法的经验或专业知识，但您最终会学会这些技巧，这可能是改用传统方法的最佳时机超越您更高效的方法。

【讨论】：

非常感谢。我认为您对了解如何优化 DOM 的需求是正确的。总的来说，我也认为保持 DOM 较小应该会带来更好的应用程序性能。