使用纯 JavaScript 将延迟属性正确添加到脚本标记答案

【问题标题】：correctly adding defer attribute to script tag with pure javascript使用纯 JavaScript 将延迟属性正确添加到脚本标记
【发布时间】：2017-08-16 13:28:57
【问题描述】：

所以我尝试添加这样的延迟脚本标签

const script = document.createElement('script');
  script.setAttribute('src', '/script.js');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('defer', true);//this is the code in question!
  document.getElementsByTagName('body')[0].appendChild(script);

但我发现结果脚本标签会生成defer 属性，如defer=true 而不仅仅是defer。

它们是一样的吗？如果我使用defer=true 而不是defer，这意味着什么？

谢谢！

【问题讨论】：

标签： javascript setattribute script-tag deferred-loading

【解决方案1】：

我会改成：

script.setAttribute("defer", "defer");

它们的行为通常相同（尽管文档在技术上声明了属性的值，例如 defer 不应为“真”或“假”）——或者至少在我使用过布尔属性的任何浏览器中。属性 @ 987654324@通常实现在script标签中如果存在生效，其值被忽略。

话虽如此，规范指定不应存在布尔属性的值，否则应将其设置为自身，没有前导/尾随空格（大小写无关紧要）。因此，动态设置时最好将值作为属性的名称。

有关布尔属性 (HTML5)，请参阅此文档：https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

引用该文档：

许多属性是布尔属性。元素上的布尔属性的存在表示真实值，并且属性不存在代表假值。

如果属性存在，它的值必须是空字符串或属性的 ASCII 不区分大小写匹配的值规范名称，没有前导或尾随空格。

注意：布尔属性不允许使用值“true”和“false”。要表示假值，必须省略该属性完全一致。

还有这个 defer 属性的文档 (HTML5)： https://www.w3.org/TR/html5/scripting-1.html#attr-script-defer

它说：

async 和 defer 属性是布尔属性，指示应该如何执行脚本。

更新： 看起来如果你将一个属性设置为空字符串，它会添加没有值的属性。这也是一种选择。

【讨论】：

【解决方案2】：

这对我有用：(chrome 94)

script.defer = true;

【讨论】：