哪种JavaScript代码编写方式更优？——关于人数统计应用两种实现写法的疑问

你提出的两种写法都能实现人数统计的功能，但它们在性能和可维护性上各有侧重，咱们来具体拆解下：

首先先把两种写法贴出来方便对比：

写法一（缓存DOM元素） #

let countEl = document.getElementById("count-el")
console.log(countEl)
let count = 0 // 补充你原代码遗漏的count初始定义
function increment() {
  count = count + 1
  countEl.innerText = count
}
increment()

写法二（直接查询DOM） #

let count = 0
function increment() {
  count = count + 1
  document.getElementById("count-el").innerText = count
}
increment()

两种写法的优劣分析 #

• 写法一的优势：

  • 性能更优：document.getElementById()是DOM查询操作，浏览器需要遍历DOM树查找匹配元素，这个过程存在一定开销。写法一把查询结果缓存到countEl变量中，后续每次调用increment都直接复用这个变量，无需重复查询DOM——如果这个函数被频繁触发（比如用户快速点击按钮、自动定时计数），这个性能差异会更明显。
  • 可维护性更好：如果后续需要修改目标元素的ID（比如从count-el改成counter-display），只需要修改countEl定义那一行即可，不用到处查找document.getElementById的调用位置，避免漏改。

• 写法一的小缺点：
  多了一个变量，但这个变量语义清晰（countEl明确指向计数显示元素），并不会增加代码理解成本。

• 写法二的优势：
  代码更简洁，少了一个变量定义，对于简单的低频使用场景来说，写起来更快，看起来也更清爽。

• 写法二的劣势：

  • 性能劣势：每次调用increment都要重新查询DOM，频繁触发的话会浪费浏览器资源。
  • 维护成本高：如果元素ID需要修改，你得找到所有用到document.getElementById("count-el")的地方逐一修改，容易出现遗漏。

总结建议 #

如果你的计数器只是简单的低频使用场景（比如用户偶尔点击一次计数），写法二完全没问题；但如果是需要高频触发的场景，或者后续可能有需求变更，写法一的缓存DOM元素的方式会是更优的选择——毕竟性能和可维护性在长期项目里更重要。

内容的提问来源于stack exchange，提问作者Yuvraj Kushwaha