动态加载/卸载外部JS

时间:2015-10-25 20:22:59

标签: javascript html memory memory-management loading

在尝试模仿Youtube等网站并在链接点击时只加载页面的特定片段的过程中,我尝试创建一个加载/卸载当前页面所需的特定JS文件和CSS文件的函数。

我注意到当从DOM中删除CSS文件时,该文件的样式不再是虚假的,只有再次添加特定的link标记才会再次生效。但是,似乎JS文件在加载时存储在内存中,只是删除DOM中的引用并不会阻止与该文件关联的函数仍然有效。 Youtube是如何解决这个问题的,或者你有什么建议我应该去哪个路径来实现卸载/加载JS文件"完全"?

我的一个想法是让我的代码中的所有变量,元素ID等(当涉及到HTML和JS时)都是唯一的,并且有一个数组可以检查已经加载了哪些JS文件 - 所以在内存中,每个JS文件都不会超过一个。但我想这不是一个安全的解决方案,因为GC可以从内存中删除一个JS文件,如果那个"页面"还没用多久?

1 个答案:

答案 0 :(得分:2)

你可以将变量设置为null然后垃圾收集器将它从内存中清除,这样你就可以将你的javascript动态加载到变量中,以便稍后你可以将它设置为null。您的文件可以有一个对象或是一个构造函数。

这只是一个基本的解释,但是,我的建议是你检查angularjs,reactjs和许多其他适合开发单页面应用程序的框架。

如果你已经开发了一些东西,requierejs是一个用于dinamically加载依赖的库,并且实现非常简单和容易。

缓存是另一个故事,你可以通过加载文件的方式避免/刷新缓存。您可以使用例如时间戳向URL添加查询参数。这样,每次文件的URL都会不同,浏览器不会从缓存中加载它。您还可以使用标头来告诉浏览器何时应该从缓存中刷新文件,或者甚至阻止它缓存它。