管理动态加载页面中的javascript内存使用情况



冒着被否决的风险,我不确定如何正确处理这种情况,或者它是否重要。

我正在开发一个单页web应用程序,其中除了主页(带有菜单系统)之外的所有页面都是通过ajax动态加载的。我使用的所有javascript库(jquery、bootstrap、kendo等)以及我的application.js和css文件都加载在主页中。

我加载的每个页面都需要自己的javascript,并有一个与html文件相同名称的相应js文件(为了我自己的理智)。当页面被下载并设置在content元素中时,页面js就会运行,这很好。

我很快意识到页面js正在将它创建的任何变量添加到全局javascript空间中。理想情况下,在加载不同的页面时,这些变量会消失,因此javascript垃圾回收最终可以回收内存。

为了方便这一点,我开始对常见结构重复使用相同的名称,比如kendo视图模型,所以当加载新页面时,它会替换任何同名的全局变量。

在某些情况下,如果有专门的变量,我会将它们的值设置为null,以释放全局ajax加载程序函数中的内存。

我正在考虑向所有执行此操作的页面添加release()函数,并在页面卸载之前调用它。由于发布函数是全局的,并且每个页面都重新定义了它,所以在交换页面之前调用它应该可以工作。

我的问题:

  1. 这有关系吗?我应该关心一下可能剩下的几Kb内存吗。。

  2. 有更好的处理方法吗?

  3. 我现在所做的是否有效?javascript垃圾回收会像我想的那样清理未引用的ram吗?

Giacomo回答后的跟进

Giacomo您的技术的工作原理是页面功能正常,并且kendo绑定可以访问在page例程中创建的本地视图模型变量。我担心的是我不知道它是如何工作的。我省略了var page=page();赋值并简单地包含Page();在脚本的末尾(在Page()函数之外),似乎没有任何有害影响。

在我看来,当页面被设置到其父元素的html(一个div)中时,脚本就会运行,这定义然后运行page()函数,该函数在页面上创建所有本地变量和剑道小部件/绑定,然后它就不在范围内了。一旦Page()函数完成,它就结束了,应该什么都没有了,但是我创建的视图模型仍然存在,因为页面和它绑定了所有的工作,执行了Page()中定义的点击事件,等等。那么,这些东西什么时候会消失呢?当我用新页面替换父级的html时,它会被取消分配吗?我不明白怎么。。。当然,无论剑道做了什么来保持对视图模型的引用,似乎都能让它保持活力,我不相信它会在页面消失时发布,这就是我的全部意图。

可能是page=new page();对于取消分配过程至关重要。。。但我不知道如何确定。

可能的解决方案

有人能评论一下这个的价值吗:

//enters here on ajax page load after inserted into DOM
var pageData = {
someData: 999,
someArray: ["one","two"],
functionOne: function(arg) {
//stuff
},
functionTwo: function(arg) {
//stuff
}
};
//do some work
pageData.functionOne(pageData.someData);
pageData.functionTwo("abc");
//called before page is removed from DOM
function releasePage() {
pageData = null;
}
//GC eventually cleans it up

您可以将每个页面的js代码放在一个闭包中,如:

function Page() {
var var1;
var var2;
function myFunc() {
//...
}
}

然后在"页面切换"上将其分配给一个变量

var page = new Page();

每次都可以重新分配相同的变量

最新更新