放里未加defer/async最容易出错，因js执行时dom尚未生成，导致document.getelementbyid等报undefined；应按依赖关系选择底部放置、defer或async。
script 标签放哪最容易出错
绝大多数页面加载失败、undefined 报错，根源不在 JS 写得对不对，而在 <script></script> 放错了位置。浏览器是顺序解析 HTML 的，如果 <script></script> 写在 里又没加 defer 或 async，它会立刻下载、执行，此时 DOM 还没开始渲染，document.getElementById 肯定拿不到元素。
实操建议：
- 普通脚本（依赖 DOM）：放到
前，也就是页面最底部 - 需要提前加载的逻辑（如统计、防抖初始化）：用
defer，保证按顺序执行且不阻塞 HTML 解析 - 完全独立的脚本（如广告、埋点）：用
async，下载不阻塞，但执行时机不可控，不能依赖其他脚本 - 绝对不要在
里直接写带document.querySelector的内联脚本
src 路径写错的三种典型表现
404 Not Found 是最直白的提示，但实际开发中常被忽略——控制台报 Failed to load resource 后，很多人只刷新页面，不看 Network 面板里哪个 js 文件状态是红色。
常见路径问题：
立即学习“前端免费学习笔记（深入）”；
JS超酷图片翻动展示效果，根据鼠标进出图片的方向来控制图片进出的方式，效果超炫，兼容主流浏览器。 使用方法： 1、head区域引用文件 lrtk.css，animation.css 2、在文件中加入!-- 代码 开始 --!-- 代码 结束 --区域代码 3、js代码需要在html代码之后载入public.js，main.js 4、如需修改图片尺寸，直接在lrtk.css第10行修改即可
- 相对路径从当前 HTML 文件位置算起，不是从 JS 文件位置——比如
index.html在根目录，js/main.js在子目录，那么<script src="js/main.js"></script>才对，不是./js/main.js（.在这里无意义） - 服务器开了路由模式（如 Vue Router history 模式），但没配 fallback，导致刷新时
/user/profile页面请求/user/js/main.js，404 - 用了构建工具（Vite/Webpack）却手动写死路径，比如 Vite 默认把资源输出到
/assets/xxx.js，但你写成src="js/app.js"
模块化脚本必须加 type="module"
只要用了 import 或 export，就必须声明 type="module"，否则浏览器当普通脚本处理，直接报 Unexpected token 'export' 或 Cannot use import statement outside a module。
注意点：
-
type="module"脚本默认是defer行为，不用额外加 - 模块内
import的路径必须带扩展名（.js），不能省略：import { foo } from './utils.js'✅，import { foo } from './utils'❌（ESM 规范要求） - 模块脚本的
this是undefined，不是window，别在模块顶层写this.xxx = yyy - 本地文件协议（
file://）下，模块导入会因 CORS 被拒，必须走本地服务（npx serve或vite preview）
动态加载 script 的兼容性坑
用 document.createElement('script') + appendChild 加载脚本看似灵活，但容易掉进执行时序和错误捕获的坑里。
关键细节：
-
script.onload只在成功加载并执行后触发；script.onerror必须在src设置**之后**立即绑定，否则可能错过错误（事件触发早于监听器注册） - 动态插入的模块脚本（
type="module"）无法通过onload判断是否全部依赖加载完成，要用import()动态导入替代 - 多个动态脚本之间没有执行顺序保证，除非手动链式调用或用
Promise.all包裹import() - IE11 不支持
script.onload，得降级用script.onreadystatechange判断readyState
真正麻烦的不是怎么写，而是不同加载方式混用时的隐性冲突——比如一个页面既有 defer 脚本，又有动态插入的模块，还有内联 DOMContentLoaded 监听器，它们的执行顺序、作用域隔离、错误传播路径全都不一样。上线前最好用 Lighthouse 的 “Avoids render-blocking resources” 和 “Properly size images” 之外的 JS 加载诊断项过一遍。
