单页web应用程序问题

Single page web application concerns

本文关键字：问题 应用程序 web 单页      更新时间：2023-09-26

的情况

我正在制作一个由多个页面组成的web应用程序的原型，其中一些页面的JavaScript负载很大。我的想法（不是很新颖）是让页面布局加载一次，只通过ajax请求更改内容。这是可以做到的，而且效果很好，但我有一些担心。

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

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

问题

现在我担心的是，在一些"子页面"上有相当多的JS。既然我必须能够在移动浏览器上工作（尽管最重js的东西只是桌面上的，但让我们暂时忘记这一点），如果我在内存中加载了几个MB的脚本，并且"永远"不卸载它们（因为页面没有重新加载），它会对性能产生什么影响。此外，如果我通过jQuery.getScript（…）函数获取脚本，脚本会被缓存吗？或者我应该用另一种方式加载脚本吗？

内容也有同样的问题。如果我从主体中删除DOM元素，用其他元素替换它们，然后重新加载原始子页面，那么在长时间使用期间，这会对内存使用和性能产生什么影响？

在我用一个无用的概念验证原型让自己看起来完全愚蠢之前，我真的希望有一个在这个领域有经验的人能让我对我的担忧有一些了解。

提前感谢！

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

EDIT 2:分开问题是什么，上下文是什么

我们不久前开发了一个类似的应用程序，我们决定让该应用程序将每个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

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

有一些框架/库是为了帮助构建和设计这样的应用程序而设计的，其中一个并非详尽无遗的列表是：

  • backbonejs-另请参阅主干教程
  • angularjs
  • 敲除js

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

有很多选择，但我建议你浏览一些教程，看看是否有适合你需求的教程——祝你好运！：）

还有一些关于pluralsight的相关教程视频，涉及它们与.NETMVC4和Webneneneba API的使用。你需要会员资格，但我认为你可以注册免费试用版-

带有HTML5、Web API、Knockout和jQuery 的单页应用程序

使用Bootstrap、AngularJS、ASP.NET、EF和Azure 构建网站

更新：

为了解决您的性能问题-有一些关于评测内存性能的有趣信息-驯服独角兽：在Chrome DevTools中简化JavaScript内存评测值得一读，如果只是第一张照片的话。

此外，编写快速、内存高效的JavaScript在内存使用方面有一些优点：

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

最后，尽管backbone.js和JavaScriptGarbageCollection是特定于主干网的，但它很好地总结了

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

这反过来又引用了这个答案：backbone.js对不再使用的模型做什么？

相关文章：