行内script标签必须确保DOM就绪：放</body>前最可靠，或用DOMContentLoaded事件包裹；type="module"默认defer且作用域隔离，不支持document.write和file://协议模块导入。
行内 <script> 标签能直接执行，但必须注意加载时机
浏览器解析到 <script> 标签时会立即下载（如含 src）并同步执行，阻塞后续 HTML 解析。如果脚本操作 DOM，而 DOM 尚未加载完成，document.getElementById 会返回 null，常见报错是 Cannot read property 'xxx' of null。
解决办法不是“加个 setTimeout 等一下”，而是明确控制执行时机：
- 把
<script>放在</body>前，确保 DOM 已就绪 - 或用
DOMContentLoaded事件包裹逻辑：<script> document.addEventListener('DOMContentLoaded', () => { const btn = document.getElementById('submit-btn'); if (btn) btn.addEventListener('click', () => alert('clicked')); }); </script> - 避免在
<head>中写依赖 DOM 的行内脚本，除非加defer（仅对带src的有效）或明确用async（不保证执行顺序）
type="module" 让行内脚本支持 import，但有严格限制
原生 ES 模块语法（如 import / export）不能直接用于普通行内脚本，必须显式声明 type="module"：
<script type="module">
import { debounce } from './utils.js';
document.getElementById('search').addEventListener('input', debounce(() => {...}, 300));
</script>注意几个硬性约束：
- 模块脚本默认
defer行为：不会阻塞解析，且按出现顺序执行 - 模块作用域是封闭的，变量不会泄漏到全局
window，调试时console.log(myVar)后在控制台直接输myVar会报ReferenceError - 无法在模块脚本中使用
document.write，会直接抛DOMException - 本地文件（
file://协议）下模块导入会被浏览器拒绝，必须走 HTTP 服务（如npx serve）
行内脚本里拼接 HTML 字符串容易 XSS，别用 innerHTML +=
很多初学者写交互时习惯这样追加内容：
<script>
const list = document.getElementById('item-list');
list.innerHTML += '<li>' + userInput + '</li>'; // 危险！
</script>一旦 userInput 包含 <script>alert(1)</script>，就会执行任意代码。
安全做法是只操作文本内容，或用 DOM 方法构建元素：
- 用
textContent替代innerHTML插入纯文本：li.textContent = userInput; - 用
document.createElement+appendChild构造新节点，完全避开字符串拼接 - 若必须渲染 HTML，先用
DOMPurify.sanitize()过滤（需引入库），不要自己正则替换
调试行内脚本时，Chrome 控制台不显示文件名，得靠 sourceURL
浏览器把所有行内 <script> 归为 (index) 或 VMxxx，断点和错误堆栈难以定位。加一行注释可修复：
<script>
console.log('hello');
//# sourceURL=inline-interaction.js
</script>刷新后，DevTools 的 Sources 面板会出现 inline-interaction.js，断点、单步、作用域检查都恢复正常。
这个技巧对多人协作尤其重要——没有它，别人根本不知道那段逻辑藏在哪段 HTML 里；另外，sourceURL 必须写在脚本末尾，且前面不能有空行，否则失效。
行内脚本不是“简单粗暴”的代名词，它的执行环境、作用域边界、安全水位和调试成本，和外部文件脚本完全不同。最容易被忽略的是 DOM 就绪时机和模块作用域隔离——这两点出问题，80% 的“脚本不生效”就找到了根子。
