关于“全动态前端页面架构”可能不是很专业,总之我不知道最专业名词是什么= =
这个名词描述的是这样一种网站: 它的所有页面都是使用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和动态页面加载产生的)
这个名词描述的是这样一种网站: 它的所有页面都是使用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和动态页面加载产生的)