单页Web应用程序问题

Rob*_*ert 5 html javascript ajax jquery web

情况

我正在为几个页面的Web应用程序进行原型设计,其中一些页面具有严重的JavaScript负载.我有一个(不是非常原始的)将页面布局加载一次的想法,并且只用ajax请求更改内容.这可以做到,它工作得很好,但我有一些担忧.

该站点检查它获得的每个请求,如果它是一个AJAX请求,它只返回内容(作为MVC 4局部视图,但这不完全是重点,这可以在任何地方完成.)否则,它会加载整个页面,布局和一切.我的想法是为我正在下载的每个javascript包提供类似状态标记的内容.布局将有一个初始化js文件,包含页面的基本显示逻辑,如何获取内容等.

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

问题

现在我担心的是,在一些"子页面"上有相当多的JS.因为我必须能够在移动浏览器上工作(尽管最重要的东西只是桌面,但让我们忘记了一分钟),如果我有几个MB-s的脚本加载,它将如何影响性能内存,并"永远"卸载它们(因为页面没有重新加载).此外,如果我通过jQuery.getScript(...)函数获取脚本,是否会缓存脚本?或者我应该以另一种方式加载脚本?

同样的内容问题.如果我从正文中删除DOM元素,用其他元素替换它们,然后重新加载原始子页面,在长时间使用期间,内存使用和性能会怎样?

在我用一个无用的概念验证原型让自己看起来完全愚蠢之前,我真的希望有一个在这个领域有经验的人给我一些关于我的担忧的见解.

提前致谢!

编辑:将标题更改为正确的表达

编辑2:分开问题是什么,背景是什么

Ven*_*emo 4

我们不久前开发了一个类似的应用程序,我们决定让该应用程序将每个 AJAX 密集型页面设为单独的页面。有大约。6-8 个页面,每个页面都有不同的职责,因此您可以将其视为具有 6-8 个独立的单页面应用程序。

对于您的情况,我可以想到两种方法:

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

如果您的服务器端可以正确处理缓存控制 HTTP 标头,那么是的,无论您如何加载特定资源,缓存都会起作用。尽管如此,我还是建议将您的脚本捆绑在一起,而不必费心去逐一加载它们。
通过这样做,您将节省大量 HTTP 请求,并且由于浏览器将缓存捆绑的脚本,因此您以后还将节省带宽。

关于从 DOM 附加/删除元素:
jQuery 会自动删除所有事件处理程序,并且data()当您使用remove()或时empty()。仅当您使用时它才会保留它们detach()

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

以下是有关该主题的一些值得阅读的文章。