全动态前端页面架构(full ajax)中是如何处理javascript内存泄露问题的？

关于“全动态前端页面架构”可能不是很专业，总之我不知道最专业名词是什么= =

这个名词描述的是这样一种网站: 它的所有页面都是使用ajax加载并进行呈现的局部刷新应用到了所有页面上

举例: google plus / jsgen

我打算在一个需求多样化并且前端功能比较rich的网站中使用这个技术(比如类似于google+)。

于是在全动态页面架构中我主要想到了3方面的问题: 加载，内存，资源。以下是详细问题，不知大家有没有什么成熟的方案？

1.
加载上，应当一次性加载所有js呢还是按需加载？如果按需加载的话如何确保不会多次加载(conflict)？

另外加载某个页面时候如何知道它需要哪些js？

2.
内存上，如果是按需加载的话并且假设js不会重复加载，那么势必随着用户点击页面越来越多，加载并贮存在浏览器中的js也会越来越多(最后内存的占用接近于甚至超过一次性加载解析所有js?) 有没有什么办法可以使得加载新页面时候有效释放上一个页面的js内存占用？

3.
资源泄露。

加载新页面时候不能释放上一个页面引入的js对象是一种内存泄露，然而还有更多可以泄露的，比如setInterval()创建的计时器。

假设页面A创建了一个计时器，然后切换到了页面B，那么这个计时器显然还在工作。如何有效地对这些资源进行综合性托管？(我希望有一种先期预防的模型，类似于一种context sandbox，而不是等到发现有泄露了再修复BUG)

另外还有DOM。假设页面A使用了TinyMCE，用户使用TinyMCE弹了个浮动窗(append in body)，然后直接进入了页面B，那么这个Tinymce的浮动窗是不归自己控制的，根本抓不到除非重写。这种由于第三方内容引入的资源不可控怎么办？

最后还有javascript对象的泄露问题，这种内存泄露好像根本无法进行预防？

==========

说一下我自己曾经做的一个架构:

1. 按需加载
加载页面时候先获取要加载哪些js 然后加载之(如果已加载则忽略) 最后加载相关页面。

2. 资源上下文
随着每个页面分配一个资源上下文的对象，存储timer/intervalTimer/野生DOM，在切换页面时候进行资源释放。但是！它提供了托管的接口，却无法直接让所有东西都托管下来: 必须得开发者自己遵循规则使用其接口才行，于是最大的问题就是第三方库这种不遵循规则的怎么办？

可以看到这样一个架构实际上仍然不能从根本上解决资源泄露问题，严重对第三方库的资源泄露敏感。
另外，它也不能释放JS本身占用的内存(只能释放DOM/Timer)。

因此来请教大家，有没有什么好的想法？

(注意一切问题都是由rich client和动态页面加载产生的)

anhulife

2013-04-01 10:00:00 +08:00

我们公司最近在做类似的应用
我们的解决方案是
每个页面、组件都是一个模块，模块之间有依赖关系

1 JS加载 RequireJS 负责加载JS和处理依赖，首先加载的是libs.js和app.all.js，都是些共用的JS，然后把分业务打包JS，按需加载

2 由于使用了RequireJS加载JS，所以不会出现重复加载的场景

3 每个模块都负责管理资源，比如模块里面有setInterval，那在模块销毁的时候，需要销毁setInterval，事件绑定也是这样的，这样能够有效地释放资源

我们使用的库有：
RequireJS jQuery Backbone.js Underscore.js mustache.js Grunt