内联脚本应置于前以确保dom就绪；避免document.write()；禁止出现在字符串中；defer按序执行，async立即执行且无序；动态插入脚本需手动监听domcontentloaded；行内事件处理器存在安全与维护隐患。

直接在 HTML 模板里写 <script></script> 不等于“嵌套成功”——脚本是否执行、何时执行、能否访问 DOM，全取决于你放哪、加没加属性、有没有和模板逻辑冲突。

内联脚本放 底部最省心

浏览器解析 HTML 是从上到下流式进行的。如果把 <script></script> 放在 里又没加 defer，它会立刻阻塞 DOM 构建，等 JS 执行完才继续渲染，用户看到白屏是常态。

• 操作 DOM 的代码（比如 document.getElementById 或 querySelector）必须确保目标元素已存在， 前是最稳妥的位置
• 避免用 document.write() —— 它会清空整个文档，现代页面基本等同于禁用
• 内联脚本里不能出现 字符串，哪怕在字符串字面量里也不行（如 ""），否则会被提前闭合；需写成 "" 或用模板字符串绕开

defer 和 async 别混用，选错就拿不到 DOM

外链脚本（<script src="app.js"></script>）默认是同步阻塞行为：下载 → 解析 → 执行 → 继续解析 HTML。这对首屏性能杀伤极大。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• defer：异步下载 + 等 HTML 解析完、DOM 构建完成后再按顺序执行，适合初始化逻辑（如绑定事件、填充数据）
• async：异步下载 + 下载完立刻执行，不保证顺序，适合完全独立的脚本（如统计 SDK、广告加载器）
• 两个属性互斥；同时写，浏览器只认 async
• IE9 及以下不支持这两个属性，但当前已可忽略

模板中动态插入 JS 要防重复执行和时机错乱

用 JavaScript 动态创建 <script></script> 标签（比如根据条件加载不同模块），看似灵活，但默认仍是同步执行模型：

• document.createElement('script') + appendChild() 插入后，浏览器立即发起请求并执行，不等 DOM 就绪
• 想延迟到 DOM 就绪后运行，得手动监听 load 事件，再调用逻辑，或包装进 DOMContentLoaded 回调
• 重复插入同一 src 的 <script></script>，浏览器不会重发请求，但会再次执行脚本内容——注意副作用（如重复绑定事件、重复初始化状态）
• 动态脚本无法被 defer 或 async 属性控制，这些属性只对静态 HTML 中的 <script></script> 生效

行内事件处理器（onclick 等）不是“嵌套”，是隐患源头

写 <button onclick="doSomething()"></button> 看似简单，但它本质是把字符串传给 new Function() 执行，作用域、复用性、安全性全受限。

• 只能访问全局变量和 event、this，闭包、模块导入的函数都不可见
• 逻辑分散在多个标签里，改一处要改多处，维护成本爆炸
• 若值来自用户输入（如后端拼接 HTML），极易触发 XSS：innerHTML = '<button onclick="' + userInput + '">'</button> 是典型高危模式
• 现代框架（React/Vue）早已弃用这类写法，纯 HTML 模板也应优先用事件委托 + 外部脚本管理

真正难的不是“怎么写 <script></script>”，而是判断“这个脚本该不该现在执行、能不能访问到我要的节点、会不会被其他脚本覆盖或干扰”。多数 DOM 操作失败、白屏、报错 undefined，根源都在加载时机和作用域这两关没过。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！