如何按条件加载外部JavaScript 静态与程序化脚本嵌入差异说明

需求梳理 #

本次需求为将原静态HTML嵌入的脚本改为程序化加载，仅在满足自定义条件时才加载对应资源。原有静态嵌入代码如下：

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

程序化嵌入实现方案 #

通过JS动态创建script标签并插入DOM即可实现按需加载，示例代码如下：

// 此处替换为你实际需要判断的业务条件
if (/* 自定义触发条件 */) {
  const dynamicScript = document.createElement('script')
  // 保持和原静态脚本属性完全一致，确保行为对齐
  dynamicScript.async = true
  dynamicScript.id = '__script__id__'
  dynamicScript.type = 'text/javascript'
  dynamicScript.src = '//abc.xyz.com/js/script.js'
  // 插入到body或head中均可，和静态插入位置保持一致即可
  document.body.appendChild(dynamicScript)
}

核心问题解答 #

1. 程序化添加脚本的加载、执行规则 #

• 规则说明：
  • 动态创建的script标签默认async属性为true，属于异步加载资源，不会阻塞页面HTML解析和其他资源加载，脚本加载完成后会立即执行。
  • 若手动设置async=false，脚本会按照插入DOM的顺序依次加载，加载完成后按顺序执行；若设置defer=true，脚本会在HTML解析完成后、DOMContentLoaded事件触发前按插入顺序执行。
• 权威参考：HTML 规范明确规定，通过document.createElement创建的script元素属于动态插入脚本，默认async属性值为true，加载执行逻辑和静态声明的async脚本完全对齐。

2. 嵌入方式变更对浏览器优化机制的影响 #

• 影响说明：
  浏览器内置的预加载扫描器只会解析初始HTML响应中的静态标签，提前扫描带src属性的script、img等资源进行预加载，该过程不会执行任何JS代码。因此动态创建的script标签的资源不会被预加载扫描器识别，只有当执行到创建、插入script标签的JS代码时，才会触发资源加载，加载时机比静态嵌入要晚。
• 权威参考：W3C Web性能规范明确说明，预加载扫描器的扫描范围仅为初始返回的静态HTML内容，不会解析JS动态生成的DOM节点，因此动态插入的资源无法享受预加载优化。

内容的提问来源于stack exchange，提问作者Denis Kulagin