问题是如何重写一个静态HTML脚本嵌入:
<script async id="__script__id__"
type="text/javascript"
src="//abc.xyz.com/js/script.js">
</script>
嵌入到可编程嵌入中，该嵌入只允许在特定条件下加载脚本。
赏金用于描述静态/编程嵌入彼此之间的区别，具体为:
- 解释JS规范如何处理编程添加的脚本-当它们被加载和执行时-使用权威引用。
- 用权威引用解释如何将脚本嵌入从HTML内联转换为编程影响浏览器优化(已知浏览器扫描带有
src属性的HTML脚本标签并预加载它们)。
如果您已经知道如何检测您的标准，那么加载另一个脚本如下:
<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和defer属性的主题:
这些属性的确切处理细节很复杂，涉及HTML的许多不同方面，因此分散在整个规范中。这些算法描述了核心思想，但它们依赖于HTML、外文和XML中
<script>开始和结束标记的解析规则;document.write()方法的规则;脚本的处理;等等。
不幸的是，我对W3的各种HTML规范没有必要的熟悉，无法将其转换成简单的英语，而且看起来要花相当多的时间才能熟悉。