我有一个带有主要区域的页面结构。该站点的每个页面都使用 ajax 加载到该区域。 为了正确加载新页面要使用的脚本,我使用了取自 http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS 的下一个代码。
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'somescript.js';
newScript.id = "dynamicScript";
headID.appendChild(newScript);
我的问题是,当用户多次调用页面时会发生什么情况,所有的脚本都被一次又一次地加载?那以后会不会导致内存问题?
我试图在创建新元素之前删除脚本元素:
var headScriptfunctions = document.getElementById("dynamicScript");
if (headScriptfunctions != null){
head.removeChild(headScriptfunctions);
}
脚本从头部删除,但无论如何,脚本仍然存在,因为我可以调用它。 我想使用 jquery getScript 函数,但我不知道多次调用同一个脚本时它是如何工作的。
最佳答案
这不仅是内存问题,更重要的是引用和初始化问题。
简单示例:
var userClicksCountFromStart = 0;
document.body.addEventListener("click", function () {
userClicksCountFromStart += 1;
});
重新加载此脚本将重新初始化 userClicksCountFromStart
至 0
, 你就忘记了你的计数。此外,您现在有 2 个监听器,可能添加了两次 +1
每次点击。
如果脚本会修改页面(添加一些元素等),它可能会更加明显。因此,一定要避免多次加载脚本。
如您所知,删除 <script>
一旦 JavaScript 代码执行完毕,来自 DOM 的标记就毫无意义了。
至于避免多次加载相同的脚本,您可能应该引用该帖子:getScript - How to only call if not already called
关于javascript - 动态加载Javascript理解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34749999/