如何动态加载javascript并将其缓存到html

我的问题是，当我尝试动态加载脚本时，它会变得异步 当我们试图使用html主体中的函数时，它会引发问题

当我尝试使用XMLHttpRequest获取数据时，它是同步的，但不会在浏览器级别进行缓存

var jsElm = document.createElement("script"); //getting data async
    jsElm.type = "application/javascript";
    jsElm.src = file;
    document.body.appendChild(jsElm);


var xmlhttp=new XMLHttpRequest();//getting data sync but not cached
xmlhttp.send();

---

我想知道如何加载同步的脚本以及下次从缓存加载的脚本。

如果您想动态加载脚本并确保在使用它之前加载它，您可以通过一些技巧同步加载它：

通常不赞成使用

document.write

正如我在那篇文章的回答中提到的，这并不理想，但它会完成工作

<script>
document.write(`<script src="${file}"><\/script>`);
</script>

文件。写（``）；

---

应根据文件和浏览器的缓存指令缓存文件。

您正在尝试使动态检索的内容持久化。我猜您必须使用某种本地存储来存储和检索脚本，并计划某种版本控制来检查缓存的脚本是否是最新的。页面的每次加载都会查找存储的脚本，而不是动态检索的脚本。对于您来说，这意味着创建一个PWA（渐进式web应用程序）。在这里，您将获得更多信息：这里没有涉及Java，所以我已经为您删除了该标记。如果我理解正确，您的主要问题是脚本是异步加载的，您试图通过使用

XMLHttpRequest

修复该问题，而现在您没有缓存？我建议使用

onload

函数查看并附加一个脚本标记。