如何在条件下加载外部 JavaScript

Question

问题是如何重写静态HTML脚本嵌入：

<script async id="__script__id__"
              type="text/javascript"
              src="//abc.xyz.com/js/script.js">
</script>

到允许仅在特定条件下加载脚本的程序化嵌入。

设置赏金是为了描述static/programmatic嵌入之间的区别，具体来说：

使用权威参考解释 JS 规范如何处理以编程方式添加的脚本（当它们被加载和执行时）。
解释将脚本嵌入从 HTML 内联转换为程序嵌入如何影响浏览器优化（众所周知，浏览器会扫描具有 src 属性的 HTML 脚本标签并预加载它们）和权威参考.

Answer 1

如果您已经知道如何检测您的条件，那么加载另一个脚本如下：

<head>
<!-- the usual head stuff goes here -->
<script>
// replace `criteria` with your actual criteria
if(criteria) {
  const script = document.createElement('script');
  script.id = '__script__id__';
  script.type = 'text/javascript';
  script.async = true;
  script.src = '//abc.xyz.com/js/script.js';
  document.head.append(script);
}
</script>
<!-- remaining scripts go here -->
<!-- injected script will end up here -->
</head>

检查条件，创建元素，设置其属性，将其添加到文档中。

我试图找到有关此机制的详细信息。我能找到的最好的是来自 MDN 关于脚本元素 async and defer properties:

The exact processing details for these attributes are complex, involving many different aspects of HTML, and therefore are scattered throughout the specification. These algorithms describe the core ideas, but they rely on the parsing rules for <script> start and end tags in HTML, in foreign content, and in XML; the rules for the document.write() method; the handling of scripting; and so on.

不幸的是，我对 W3 的各种 HTML 规范没有必要的熟悉程度，无法将其转化为通俗易懂的英语，而且看起来要花很多时间才能变得那么熟悉。

如何在条件下加载外部 JavaScript

How to load an external JavaScript on a condition

javascript

html

asynchronous

browser

pagespeed