DOM查询性能瓶颈在于重复访问和跨引擎通信开销，应缓存节点、批量读写分离、优先用CSS类控制样式。
DOM 查询性能瓶颈，核心在于重复访问和跨引擎通信开销。每次调用 document.getElementById、querySelector 或 getElementsByClassName，浏览器都要遍历节点树或索引结构，还可能触发强制同步布局（尤其是后续紧跟着读取 offsetTop 等属性时）。缓存节点不是“锦上添花”，而是避免指数级性能损耗的关键一步。
把查询结果存进变量，别在循环里反复查
这是最常见也最容易修复的问题。比如在遍历列表前，先一次性获取容器或元素集合，而不是每次迭代都重新查：
- ❌ 错误写法：每次循环都触发 DOM 查找和潜在重排
for (let i = 0; i < 100; i++) {<br> const item = document.getElementById('item-' + i);<br> item.style.opacity = 0.5;<br>}
- ✅ 正确做法：查一次，复用多次
const container = document.getElementById('list');<br>const items = container.querySelectorAll('.item');<br>for (let i = 0; i < items.length; i++) {<br> items[i].style.opacity = 0.5;<br>}
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
用 const 声明 + 作用域隔离，防止意外覆盖
缓存节点后，推荐用 const 声明，明确表达“这个引用不会变”。同时把缓存逻辑放在最小必要作用域内（如函数或模块），避免污染全局，也利于垃圾回收：
- 在初始化函数中统一获取并缓存关键节点
- 避免把所有 DOM 引用挂到
window或全局对象上 - 组件销毁时，若涉及动态创建/移除的节点，可设引用为
null辅助 GC（非必须，但对长生命周期应用更稳妥）
批量读写分离：先读完所有布局值，再统一写入
读取 offsetHeight、clientWidth、getBoundingClientRect() 等会强制浏览器同步计算当前布局，俗称“强制同步布局”。如果读写交替出现在循环中，性能会断崖式下跌：
- ❌ 危险模式：边读边写 → 多次强制重排
- ✅ 安全模式：全部读完 → 批量计算 → 统一写入（优先用
transform/opacity）
示例：
const tops = [];<br>for (let i = 0; i < items.length; i++) {<br> tops.push(items[i].offsetTop); // 全部读取阶段<br>}<br>for (let i = 0; i < items.length; i++) {<br> items[i].style.transform = `translateY(${tops[i] * 0.8}px)`; // 全部写入阶段<br>}
配合 classList 和 CSS 类做样式切换，减少 style 直接赋值
直接操作 element.style.xxx 不仅代码冗长，还容易触发重排。缓存节点后，更进一步的做法是用 classList.add() / toggle() 控制预定义 CSS 类：
- CSS 中预先写好
.is-hidden { opacity: 0; transform: scale(0.95); } - JS 中只需
node.classList.add('is-hidden')—— 无内联样式、无重排风险、语义清晰 - 比反复设置
style.opacity和style.transform更轻量、更易维护
