单页Web应用程序涉及

我原型了多页的Web应用程序，其中一些带有严重的JavaScript load。我有一个（不是非常原始的）想法使页面布局加载一次，只改变与Ajax请求的内容。这可以做到，而且效果很好，但我有一些担忧。

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

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

的问题（一个或多个）

现在我担心的是，有一些 “子页面” 颇多JS。由于我必须能够在移动浏览器上工作（尽管最重js的东西只有桌面，但我们暂时忘记了这一点），它会对性能产生怎样的影响，如果我想要加载几个MB脚本内存和“永不”卸载它们（因为页面没有重新加载）。另外，如果我通过jQuery.getScript（...）函数获取它们，脚本是否会被缓存？或者我应该以另一种方式加载脚本？

同样的问题的内容。如果我从主体中删除DOM元素，请将其替换为其他元素，然后在长时间使用期间重新加载原始子页面，对内存使用情况和性能有何影响？

我真的很想让这个领域的经验丰富的人给我一些关于我的担忧的见解，然后再让我自己看起来完全愚蠢于一个无用的概念验证原型。

在此先感谢！

编辑：更改标题正确表达

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

来源

2013-08-23 Robert

我们已经开发了类似的应用程序前一阵子，我们决定该应用程序，以使每个AJAX重页面创建一个单独的页面。有约。 6-8页，他们每个人都有不同的责任，所以你可以认为这是6-8独立的单页面应用程序。

有迹象表明，我能想到的两种方法，为您的情况：

如果您的网页是真正的JavaScript的沉重，他们每个人的要求非常不同的脚本组，则可以通过将不会获得性能重新加载页面布局可能会因为您一直加载的内容而丢失。
特别是对于垃圾开始吃掉你的记忆的写得不好的JavaScript，不时重新加载整个页面，然后去掉垃圾。
如果页面使用的JavaScript几乎相同（或者只有很小的差异），我建议将所有页面的每个脚本合并为一个并加载捆绑的脚本。
但是，在这种情况下，当整个页面不会被重新加载时，您可能会遇到这种情况，因此请尽量写出不泄漏内存的js。

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

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

更多关于JavaScript和内存消耗

这里是是值得一读的话题的文章。

来源

2013-08-23 13:09:24 Venemo

这个答案（更像是消除）我的问题的一半。如何删除读取DOM元素，特别是与事件处理程序挂钩他们？他们对性能有多大的影响（即使我倾向于使用（...）函数上的jquery来避免这个问题，我会感兴趣会发生什么） – Robert

@Robert - 这取决于你想要什么样的DOM元素追加/删除以及多久执行一次。 – Venemo

@Robert更新了我的答案 – Venemo

听起来你试图建立一个SPA！

有几个框架/库出有其目的是为了帮助构建和这样的应用程序的设计中，通过-没有办法穷尽的列表，其中是：

经常利用这些框架的应用也将使用一些像requirejs这样的东西可以帮助模块化并只在需要时加载资源。

这里有很多选项，但我建议你通过几个教程，看看是否有一个适合你的需求 - 祝你好运！ :)

还有一些关于pluralsight的相关教程视频，涉及它们与.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

来源

2013-08-23 09:32:29 RYFN

这些库很高兴知道的（我已经知道knockoutjs和requirejs），但是这并没有回答我的问题关于可能的性能问题:) – Robert

啊够公平，在你的问题的大部分中，要分辨出你要找的是什么有点困难：） – RYFN

对不起，我会尽量在稍后清除它。 – Robert

单页Web应用程序涉及

回答

相关问题