HTML5脚本不能真正“剥离”，所谓剥离实为将逻辑移出HTML以实现结构与行为分离；document.write()因同步执行、依赖文档流且无法延迟，故不可剥离，应改用innerHTML等替代方案。
HTML5 脚本本身不能“剥离”——<script> 标签是 HTML 解析器识别并执行 JavaScript 的必要容器。所谓“剥离”，实际指的是：在不破坏功能的前提下，把脚本逻辑从 HTML 文档中移出，实现结构与行为分离。
为什么 document.write() 会阻塞解析且无法剥离？
这是最容易被误当作“可剥离脚本”的典型陷阱。一旦页面中存在 document.write()，浏览器必须同步执行它才能继续构建 DOM，导致渲染阻塞；更关键的是，它只能在文档流未关闭时调用（即 </html> 之前），无法延迟到外部文件或 DOMContentLoaded 后执行。
- 它依赖当前文档写入位置，抽成外部 JS 后会直接报错
TypeError: document.write is not a function（尤其在现代模块环境或 iframe 中） - 即使强行保留，也无法通过
async或defer控制加载时机 - 真实替代方案是用
element.innerHTML、appendChild()或模板字符串 +insertAdjacentHTML()
怎样安全地把内联 <script> 搬到外部文件？
核心原则：确保脚本不依赖尚未解析的 DOM 元素，也不依赖 window.onload 之前的隐式执行时机。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 原内联脚本若操作了
document.getElementById('xxx')，搬出后需包裹在DOMContentLoaded或检查document.readyState - 使用
<script src="app.js" defer></script>——defer保证执行顺序且不阻塞解析，适合依赖 DOM 的逻辑 - 避免用
async搬运含 DOM 操作的脚本，它不保证执行顺序，可能早于 DOM 构建完成 - 如果脚本只导出函数（如
initSlider()），可保留在外部，由 HTML 中轻量级内联调用：<script>initSlider();</script>
，此时“剥离”的是实现而非调用点
type="module" 是更彻底的剥离方式吗？
是的，但代价是放弃旧浏览器兼容性。ES 模块天然强制外部化，浏览器不会执行内联 type="module" 中的顶层代码，除非显式 import。
立即学习“前端免费学习笔记（深入）”；
- 内联模块（
<script type="module">...</script>）仍算“嵌入”，不算剥离；真正剥离必须是<script type="module" src="main.mjs"></script> - 模块自动启用
defer行为，且支持import.meta.url获取当前模块路径，比传统<script>更可控 - 注意：模块中
import的路径必须带扩展名（如.js）或协议（./utils.js），否则 404；而传统脚本可省略 - 若项目已用构建工具（Vite/Webpack），模块化剥离只是配置
build.rollupOptions.output.entryFileNames的事，无需手动挪文件
真正的剥离难点不在移动代码，而在厘清执行依赖链——比如一个内联脚本是否读取了 <meta name="csrf-token">、是否监听了 window.resize、是否修改了 document.cookie。这些上下文一旦脱离原始 HTML 环境，就容易失效或触发竞态。动手前，先用浏览器开发者工具的 Sources > Page 面板确认脚本实际运行时机和依赖项。
