JavaScript 的全部潜力在于场景化机制选择与陷阱规避：DOM 操作需避开 innerHTML 重建、重排及实时集合误用；异步需掌握 AbortController、Promise.race 超时及 allSettled 限流；模块加载应善用动态 import 和 import.meta.url 安全路径。
JavaScript 不只是让按钮变色或弹个提示框的脚本语言——它能驱动整个现代 Web 应用，也能在服务器、桌面、移动端甚至硬件上运行。但它的“全部潜力”不在于功能列表，而在于你是否清楚在什么场景下该用什么机制、绕过哪些默认陷阱。
DOM 操作不是简单 getElementById 就完事
很多人以为操作页面就是查元素、改 innerHTML，结果遇到性能卡顿、事件丢失、内存泄漏全懵了。
-
innerHTML会销毁并重建子节点，已绑定的事件监听器直接消失；改用textContent或insertAdjacentHTML更可控 - 频繁修改 DOM 触发重排（reflow），批量操作建议用
DocumentFragment或先设display: none - 用
querySelectorAll返回的是静态 NodeList，但getElementsByClassName返回的是实时 HTMLCollection——后者在 DOM 变化时自动更新，容易引发意料外的循环长度变化
异步不是只有 async/await 和 Promise
写个 API 调用就套 async/await，真到处理流式数据、取消请求、节流高频回调时立刻露馅。
-
AbortController是原生取消fetch的唯一可靠方式；没它，fetch请求即使页面跳走也不会中断 -
Promise.race配合setTimeout实现超时控制，比axios.timeout更底层、更可预测 - 真正高并发场景（比如 100 个图片加载），要用
Promise.allSettled+ 限流函数（如每批 5 个），否则可能触发浏览器连接数限制或内存溢出
模块加载：从 script 标签到 import.meta.url
还在用全局变量拼路径？或者把所有 JS 打包进一个文件硬塞给用户？那你就错过了动态加载、条件引入和本地开发调试的关键能力。
立即学习“Java免费学习笔记（深入）”；
-
import('./module.js')是动态 import，返回 Promise，可用于路由级代码分割或按需加载大体积库（如图表组件） -
import.meta.url提供当前模块的绝对 URL，配合new URL('./assets/', import.meta.url)可安全构造相对路径，彻底告别__dirname式猜测 - ESM 环境下
import不支持表达式，所以import(`./${lang}.js`)是语法错误；必须用动态 import 才能实现运行时路径拼接
JavaScript 的复杂点从来不在语法多难，而在于每个看似简单的 API 背后都绑着执行时机、作用域链、引擎优化策略和跨环境兼容性约束。漏掉其中一环，线上就可能表现为偶发白屏、内存持续增长、或 Safari 下完全不执行——这些都不是报错，而是静默失效。
