哪个更适合我简单但有效的 javascript 嵌入代码（为什么？）

Question

对于你们中的大多数人来说，这可能是一个简单的问题，也许我对这个 post 的样式设计得太多了，但我只是希望它有助于得到一个好的答案（对我的第一个问题）。

背景

我想创建一个简单的 banner/visual 以便多个小学可以显示它们属于一个更大的非营利组织（例如 "umbrella brand"）。

由于大多数学校都有自己的网站和站长，CMS-es等，我想给出简单的一行JS，让站长在模板中实现 / html。就像 f.i。 Google Analytics 标签或 Intercom 等服务。

要求

易于实施 (copy/paste)
异步，因此不会影响页面速度等
没有 iFrame

我的解决方案

我写了一个简单的 working javascript (createBanner.js) 它创建了一个 DIV 和 CSS/HTML 并将被托管在外部网站上：

var logo = document.createElement("div");
logo.innerHTML =
    '<span style="height: 100px;width: 100px; background: red; position: fixed; right: 10px;top: 10px;z-index: 99999;"></span>\n' 
document.body.appendChild(logo);

我会要求学校实施一个嵌入脚本并有两个版本。

嵌入脚本版本 1：

<script>
var script = document.createElement('script');
script.src = "//externaldomain.com/createBanner.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

嵌入脚本版本 2：

<script async src="//externaldomain.com/createBanner.js"></script>

我的问题：

这两个嵌入脚本中哪个最适合我使用？或者有更好的方法吗？
这些方法是否也可以用于将来更精细的javascript？

感谢您的帮助。

此致，丹尼斯

Answer 1

取决于您的用例，但如果您的脚本在 DOM 或其他脚本中没有依赖项，请选择第二个。如果是，请选择第一个。

但是由于需求本身声明它应该是异步的，所以第二个是

哪个更适合我简单但有效的 javascript 嵌入代码（为什么？）

Which is better for my simple but working javascript embed code (and why?)

javascript

css

embed