5

The situation

I am prototyping a web application of several pages, some of them with serious JavaScript load. I had the (not very original) idea of making the page layout load once, and only change the contents with ajax requests. This can be done, and it works nice, but I have some concerns.

The site check every request it gets, and if it is an AJAX request, it returns only the content (as an MVC 4 partial view, but that is not exactly the point, this can be done anywhere.) Otherwise, it loads the whole page, with layout, and everything. The idea is to have something like a status flag for each javascript bundle I'm downloading. The layout would have an initializing js file, containing the basic display logic of the page, how to get the contents, etc.

All the content pages would check, if their relevant scripts are loaded, if not, then initiate the download, and in the success event, set the correct flag. Some extra error-handling is required, for cases, when the ajax call fails for some reason.

The Question(s)

Now my concern is, there is quite much JS on some "subpages". Since I have to be able to work on mobile browsers (altough the most js-heavy stuff is desktop only, but let's forget that for a minute), how will it impact performance, if I have like several MB-s of scripts loaded in memory, and "never" unloading them (since the page is not reloaded). Also, will the scripts be cached, if I get them via the jQuery.getScript(...) function? Or should I load the scripts another way?

Same question for content. If I remove the DOM elements from the body, replace them with other elements, then reload the original subpage, what will that do with memory usage, and performance, during a long period of usage?

I would really like to have someone experienced in this field give me some insight on my concerns, before I make myself look completely stupid with a useless proof-of-concept prototype.

Thanks in advance!

EDIT: Changed title to proper expression

EDIT 2: Separated what is the question, and what is the context

4

2 回答 2

4

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

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

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

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

关于从 DOM 中附加/删除元素：
jQuery 自动删除所有事件处理程序，并且data()当您使用remove()or时empty()。仅当您使用detach().

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

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

于 2013-08-23T13:09:24.913 回答
2

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

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

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

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

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

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

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

更新：

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

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

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

最后，虽然骨干网是特定的，但Backbone.js 和 JavaScript 垃圾收集给出了一个很好的总结

[that] 应该证明对想要在 JavaScript 中更好地管理内存使用的人有用的基本思想。

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

于 2013-08-23T09:32:29.170 回答