DOM操作性能瓶颈不在查询本身，而在触发重排/重绘；应避免布局抖动、用CSS原生能力替代JS、优化查询方式、合理使用DocumentFragment和缓存，并警惕Web Components的隐性开销。
DOM 操作本身不依赖 JS，但实际使用中几乎必然拖慢性能
浏览器渲染引擎和 JS 引擎是分离的，document.getElementById 这类 API 本身只是桥接调用，开销极小。真正卡顿的从来不是“查 DOM”，而是查完立刻触发重排（reflow）或重绘（repaint）——比如读取 offsetHeight 后马上改 style.width，或者在循环里反复操作 innerHTML。
常见错误现象：RangeError: Maximum call stack size exceeded（深层递归遍历 DOM 节点）、滚动中 getBoundingClientRect() 频繁调用导致掉帧、用 document.write 阻塞解析。
- 避免在
scroll或resize回调里直接读写布局属性，用requestAnimationFrame节流 - 批量修改样式优先用
className切换 CSS 类，而非逐个设style.xxx - 插入大量节点时，用
DocumentFragment统一 append，再一次性挂载到真实 DOM
纯 HTML/CSS 能绕过 JS 的场景很有限，但真能省下关键毫秒
不是所有交互都需要 JS：表单验证可用 required、type="email"；折叠展开可用 <details><summary></summary></details>；深色模式可由 @media (prefers-color-scheme: dark) 控制；动画优先走 transition 和 @keyframes，而非 setInterval 改 style。
这些方案的性能优势不在“快”，而在“不参与 JS 主线程调度”——没有 GC 压力、不会被长任务阻塞、CSS 动画还能交由合成线程（compositor thread）处理。
-
<input type="date">比任何 JS 日历组件都轻量，且原生支持无障碍 - 用
:checked + label实现开关按钮，比监听click事件少一个事件绑定+回调执行 - 响应式图片用
srcset和sizes，比 JS 判断window.innerWidth后动态换图更可靠
JS 性能瓶颈常出在 DOM 查询方式，不是用不用的问题
同一份 HTML 结构，document.querySelector('.item:nth-child(2n)') 比 document.getElementsByClassName('item')[1] 慢不止一倍——前者要遍历全部节点并解析 CSS 选择器，后者是原生集合的数组访问。
容易被忽略的细节：getElementsByTagName 返回的是 HTMLCollection（动态集合），每次访问 .length 都会重新查询；而 querySelectorAll 返回 NodeList（静态快照），但代价是首次执行更重。
- 已知父容器时，优先用
parentElement.querySelector，而非全量document.querySelector - 频繁读取同一批元素？缓存结果，别在循环里重复调用
document.getElementById - 用
id查找最快（document.getElementById），class次之（getElementsByClassName），复杂选择器最慢
Web Components 和自定义元素不是性能银弹，反而可能加重负担
有人以为封装成 <my-button></my-button> 就能提升性能，其实不然。每个自定义元素实例都会触发 connectedCallback，若内部含 querySelector 或 appendChild，照样引发重排。Shadow DOM 虽隔离样式，但跨 Shadow 边界的查询（如 shadowRoot.querySelector）开销不比普通 DOM 小。
真正起作用的是“减少不必要的实例化”：用 template + cloneNode(true) 复用结构，比每次 innerHTML = '...' + data 字符串拼接更可控；用 slot 抽离内容分发，避免在 render() 里做 DOM diff。
- 不要在
attributeChangedCallback里直接操作子节点，先requestAnimationFrame推迟 - 避免在
connectedCallback中发起网络请求或复杂计算 - 如果组件只渲染静态内容，考虑用
HTMLTemplateElement预编译，而不是运行时生成
实际项目里，DOM 和 JS 的性能边界往往模糊——关键不是“该不该用 JS”，而是“这行 JS 是否真的需要触达 DOM”。很多所谓“优化”，本质是把同步阻塞操作，变成异步可中断、可丢弃的任务。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
