单页Web应用程序问题

时间:2013-08-23 08:35:13

标签: javascript jquery html ajax web

情况

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

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

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

问题

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

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

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

提前致谢!

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

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

2 个答案:

答案 0 :(得分:4)

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

根据您的情况,我可以考虑两种方法:

  1. 如果您的网页真的是JavaScript,并且每个网页都需要非常不同的脚本集,那么通过不重新加载页面布局而获得的性能可能会因您一直加载的内容而丢失。登记/> 特别是对于编写得很糟糕的JavaScript,垃圾开始占用你的记忆,不时重新加载整个页面就可以取出垃圾。
  2. 如果页面使用的JavaScript几乎相同(或者只有很小的差异),我建议将所有页面的每个脚本捆绑成一个并加载捆绑的脚本。
    但是,在这种情况下,您可能会遇到永远不会重新加载整个页面的情况,因此请努力编写不会泄漏内存的js。
  3. 如果您的服务器端可以正确处理缓存控制HTTP头,那么无论您如何加载特定资源,缓存都可以正常工作。 不过,我建议您将脚本捆绑到一个,而不是一个一个地加载它们。
    通过这样做,您将保存一堆HTTP请求,并且因为浏览器将缓存捆绑的脚本,您还将在以后节省带宽。

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

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

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

答案 1 :(得分:2)

听起来你正试图建立一个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