用document.currentScript实现内联渲染的极简技巧

前端开发中，服务端渲染和客户端渲染的边界常常让人纠结。Lean Rada 分享了一个基于 document.currentScript 的巧妙技巧，用几行代码就能实现页内动态内容的"就地替换"，甚至能拼出一个极简的模板语言。

核心技巧：让脚本替换自己

document.currentScript 是浏览器提供的一个属性，指向当前正在执行的 <script> 元素。Rada 利用这一点，把一段内联脚本放在 HTML 中，脚本执行时直接把自己替换成计算后的结果：

The year is <script>
document.currentScript.replaceWith(
  new Date().getFullYear())</script>

页面加载时，这段脚本会被替换成当前年份。整个过程不需要框架、不需要构建步骤，浏览器解析到脚本时立即执行替换，最终用户看到的只有结果。

这个思路的价值在于它把"渲染"从框架层拉回到了 DOM 层。传统做法要么在服务端拼好 HTML，要么用前端框架接管整个挂载点；而 currentScript 方案只影响脚本所在的那一小块位置，侵入性极低。

replaceWith() 是 DOM 标准中的 ChildNode 接口方法，接受一个或多个 Node 或字符串作为参数，用它们替换调用该方法的节点本身。与 innerHTML 赋值、appendChild 等常见操作不同，replaceWith 操作的是节点在父节点中的位置，替换后原节点从文档中移除，新内容占据同一位置。它支持一次传入多个节点或字符串，浏览器会按顺序依次插入。需要注意的是，如果传入字符串，浏览器会将其解析为文本节点，因此像 new Date().getFullYear() 这样的数字会被自动转为字符串显示。该方法在现代浏览器中支持良好，但不兼容 IE。正因为它直接操作节点位置，才使得“脚本在自身位置输出结果”成为可能，而不需要预先给脚本外再包一层容器元素。

从技巧到迷你模板语言

如果每次都要写 document.currentScript.replaceWith(...) 未免太啰嗦。Rada 定义了一个简短的辅助函数：

$=(...n)=>document.currentScript.replaceWith(...n)

有了这个 $ 函数，前面的例子可以简化为：

The year is <script>$(new Date().getFullYear())</script>

这几乎就是一个内联模板语言的雏形：HTML 负责静态结构，<script> 标签内用 $() 包裹动态表达式，页面加载时原地求值替换。相比引入一个模板引擎，这种做法没有额外依赖，代码量可以忽略不计。

适用场景与需要注意的边界

这种内联渲染方式适合内容简单、更新频率低的场景，比如版权年份、静态站点中的小型动态片段、原型验证等。它的优势是零构建、零依赖，看懂原理后随手就能用。

但它也有明显的边界。内联脚本会受 CSP（内容安全策略）限制，在禁止 unsafe-inline 的页面里无法执行；替换发生在脚本位置，无法处理复杂的组件状态和事件绑定；对 SEO 和可访问性来说，动态替换的内容是否被正确索引和朗读，也需要实际验证。

Rada 的分享更像是一个思路启发：浏览器的原生 API 里还藏着不少被框架掩盖的简洁解法，偶尔回到 DOM 本身，往往能找到更轻量的答案。

CSP（Content Security Policy，内容安全策略）是浏览器通过 HTTP 响应头（或 <meta> 标签）声明的安全机制，用于限制页面可以加载和执行哪些资源。其中 script-src 指令控制脚本来源，如果策略中未包含 'unsafe-inline'，则所有内联 <script> 标签（包括本技巧依赖的脚本）都会被浏览器拒绝执行，控制台会报 CSP 违规错误。此外，'unsafe-eval' 控制 eval() 等动态求值，'nonce-...' 或 'sha256-...' 哈希则可以白名单化特定内联脚本。这意味着在启用了严格 CSP 的站点上，本技巧需要为每段内联脚本生成 nonce 或哈希，动态内容较多时会显著增加服务端配置复杂度。对于原型或低安全要求的静态页面，这通常不是问题，但在生产环境中应优先确认 CSP 策略。