Question

我有一个主要区域的页面结构。使用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);

我的问题是，当用户多次调用页面时会发生什么，所有的scritp一次又一次地加载？那将来会引起记忆问题吗？

我尝试在创建新元素之前删除脚本元素：

var headScriptfunctions = document.getElementById("dynamicScript");
if (headScriptfunctions != null){
    head.removeChild(headScriptfunctions);
}

脚本从头部删除，但无论如何，脚本仍然存在，因为我可以调用它。我想使用jquery getScript函数，但是当我多次调用相同的脚本时我不知道它是如何工作的。

Answer 1

这不仅仅是记忆问题，更重要的是引用和初始化。

快速举例：

var userClicksCountFromStart = 0;

document.body.addEventListener("click", function () {
    userClicksCountFromStart += 1;
});

重新加载此脚本会将userClicksCountFromStart重新初始化为0，并且您将失去对计数的跟踪。此外，您现在有2个听众，每次点击可能会增加两次+1。

如果脚本会修改页面（添加一些元素等），它可能会更加明显。因此，不止一次加载脚本肯定是需要避免的。

正如您所知，一旦JavaScript代码执行，从DOM中删除<script>标记毫无意义。

至于避免多次加载相同的脚本，您应该参考该帖子：getScript - How to only call if not already called

Answer 2

多次加载javascript文件是一个坏主意，可能会产生问题。

每次加载文件时，浏览器都会执行所有代码。因此，如果您在根级别（而不是函数内部）中有全局变量或代码，则将重置变量并执行代码。函数将被覆盖，这不会产生问题（可能是您提到的内存使用情况）。

正如您所见，删除dynamicScript元素并不会删除javascript代码，因为代码在内存中。

我认为您对垃圾收集器这样的想法很复杂，并且可以为您提供与不同浏览器行为相关的更多问题。

保留已加载脚本列表以避免重新加载更容易。

var loadedScripts = [];

function loadDynamicScript(scriptUrl)
{
    if (loadedScripts.indexOf(scriptUrl) == -1)
    {
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = scriptUrl;
        document.body.appendChild(js);
        loadedScripts.push(scriptUrl);
    }
}

加载Javascript动态理解

2 个答案: