单页 Web 应用程序关注点

Question

情况

我正在对一个包含多个页面的 Web 应用程序进行原型设计，其中一些页面具有严重的 JavaScript 负载。我有一个（不是很原始）让页面布局加载一次的想法，并且只使用 ajax 请求更改内容。这可以做到，而且效果很好，但我有一些顾虑。

站点检查它收到的每个请求，如果是 AJAX 请求，它只返回内容（作为 MVC 4 部分视图，但这不是重点，这可以在任何地方完成。）否则，它加载整个页面，包括布局和所有内容。 这个想法是为我正在下载的每个 javascript 包设置一个状态标志。布局会有一个初始化js文件，包含页面的基本显示逻辑，如何获取内容等。

所有内容页面都会检查是否加载了它们的相关脚本，如果没有，则启动下载，并在成功事件中设置正确的标志。当 ajax 调用由于某种原因失败时，需要进行一些额外的错误处理。

问题

现在我担心的是，一些“子页面”上有很多 JS。由于我必须能够在移动浏览器上工作（尽管最重 js 的东西只是桌面，但让我们暂时忘记这一点），如果我加载了几 MB 的脚本，它将如何影响性能内存，并且“从不”卸载它们（因为页面没有重新加载）。另外，如果我通过 jQuery.getScript(...) 函数获取脚本，它们会被缓存吗？还是我应该以其他方式加载脚本？

同样的内容问题。如果我从 body 中移除 DOM 元素，用其他元素替换它们，然后重新加载原始子页面，在长期使用过程中，这对内存使用和性能有什么影响？

我真的很想找一个在这个领域有经验的人给我一些关于我所关心的问题的见解，然后再用一个无用的概念验证原型让自己看起来完全愚蠢。

提前致谢！

编辑：将标题改为正确的表达方式

编辑 2： 区分什么是问题，什么是上下文

Answer 1

我们不久前开发了一个类似的应用程序，我们决定让该应用程序使每个 AJAX 重页成为一个单独的页面。大约有。 6-8 个页面，每个页面都有非常不同的职责，因此您可以将其视为拥有 6-8 个独立的单页面应用程序。

对于您的情况，我可以想到两种方法：

1. 如果您的页面确实大量使用 JavaScript，并且每个页面都需要非常不同的脚本集，那么您通过不重新加载页面布局获得的性能可能会因您一直加载的内容量而损失。 特别是对于那些垃圾开始吞噬你的内存的糟糕编写的 JavaScript，不时重新加载整个页面以清除垃圾也不错。
2. 如果页面使用的 JavaScript 几乎相同（或者只有微小的差异），我建议将所有页面的每个脚本捆绑到一个并加载捆绑的脚本。
   但是在这种情况下，您可能会遇到整个页面永远不会重新加载的情况，因此请努力编写不会泄漏内存的 js。

如果您的服务器端可以正确处理缓存控制 HTTP 标头，那么可以，无论您如何加载特定资源，缓存都将起作用。 不过，我还是建议将您的脚本打包成一个，而不是一个接一个地加载它们。
通过这样做，您将保存一堆 HTTP 请求，并且由于浏览器将缓存捆绑的脚本，您还将在以后节省带宽。

关于从 DOM 中附加/删除元素：
当您使用remove() 或empty() 时，jQuery 会自动删除所有事件处理程序和data()。如果您使用detach()，它只会保留它们。

更多关于 JavaScript 和内存消耗的信息

这里有一些关于该主题的文章值得一读。

• http://nesj.net/blog/2012/04/javascript-memory-leaks/
• http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
• http://www.ibm.com/developerworks/library/wa-jsmemory/index.html
• http://www.infoworld.com/d/application-development/brendan-eich-tells-how-prevent-javascript-memory-leaks-210974

Answer 2

听起来您正在尝试构建SPA！

有一些框架/库旨在帮助构建和设计此类应用程序，其中的一个绝对详尽的列表是：

• backbonejs - 另见backbone tutorials
• angularjs
• knockoutjs

使用这些框架的应用程序通常还会使用 requirejs 之类的东西来帮助模块化并仅在需要时加载资源。

那里有很多选择，但我建议您浏览一些教程，看看是否有适合您需要的教程 - 祝您好运！ :)

还有一些关于复数视觉的相关教程视频，与它们与 .NET MVC 4 和 Web API 的使用有关。您需要会员资格，但我认为您可以注册免费试用 -

Single Page Apps with HTML5, Web API, Knockout and jQuery

Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure

更新：

解决您的性能问题 - 有一些关于分析内存性能的有趣信息 - Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools 值得一读，如果只是第一张图片。

此外，Writing Fast, Memory-Efficient JavaScript 在内存使用方面有一些优点：

为了让垃圾收集器有机会尽早收集尽可能多的对象，请不要抓住不再需要的对象。

最后，虽然是骨干网，Backbone.js And JavaScript Garbage Collection 给出了一个很好的总结

对于想要在 JavaScript 中更好地管理内存使用的人来说，基本想法应该是有用的。

这又引用了这个答案：What does backbone.js do with models that are not used anymore