scriptlet标签与<script>标签有何区别？二者代码写法为何不同

两者的能力边界和语法限制差异，本质是设计定位的根本不同：

• 普通<script>是浏览器为前端开发者开放的全量网页运行环境入口，绑定完整的window全局上下文，支持所有标准ECMAScript语法，以及浏览器暴露的全部DOM、BOM、网络、存储等API，没有额外权限限制。
• 而scriptlet（包括早期IE的脚本小程序、现在广告拦截/浏览器扩展场景下的沙箱脚本）从设计之初就是受限沙箱内的轻量执行单元，核心目标是在不允许普通脚本全量权限的前提下，执行特定场景的有限逻辑，因此天生就做了多重能力限制。

• 上下文隔离
  scriptlet运行时不会挂载完整的全局对象，大部分你在普通script里可以直接调用的API（比如fetch、localStorage、window.open等）都被沙箱拦截或屏蔽，直接调用就会报错或无响应。
• 高危语法拦截
  为了避免被恶意利用，scriptlet的解析器会直接禁止高危语法的执行，包括但不限于eval()、new Function()、动态创建script标签、动态修改DOM跳转逻辑的代码，哪怕语法完全符合JS规范也不会生效。
• 执行时机限制
  普通script的执行时机完全由网页加载逻辑控制，可以通过async/defer属性自定义，也可以监听DOMContentLoaded、load等事件调整执行时机；但scriptlet的执行时机完全由宿主程序（浏览器扩展、容器应用等）控制，不允许自定义执行生命周期相关的逻辑。
• 无模块化支持
  普通script可以通过设置type="module"开启ES模块支持，使用import/export语法引入外部依赖；但scriptlet基本都不支持模块化能力，只能编写单片段的过程式代码。

对比示例：
普通script中可正常执行的代码，在scriptlet中几乎都会被禁止：

// 动态插入外部脚本
const injectScript = document.createElement('script');
injectScript.src = './test.js';
document.body.appendChild(injectScript);

// 发起跨域请求
fetch('https://example.com/api').then(res => res.json())

内容的提问来源于stack exchange，提问作者Warning Yi