大量动态数据更新时innerHTML、outerHTML与textContent的JS性能选择问题

方案一（innerHTML替换整个表格） #

仅有的优势是当前阶段变量数量少，但存在多个严重问题：

• 会销毁原有所有DOM节点，你提前绑定在span上的公制/英制切换事件监听器会全部失效，每次替换完都要重新绑定，后续维护成本会越来越高
• 触发全量HTML解析、页面重排重绘，性能远低于仅修改文本内容的方案
• 存在XSS安全隐患，如果存入的HTML内容混入恶意代码会直接执行
• 后续如果需要新增表格行样式、行交互等功能，每次替换完都要重新初始化相关逻辑，可扩展性极差

方案二（textContent逐个更新） #

你认为需要维护30个变量的问题完全是数据结构设计不合理导致的，优化后维护成本远低于方案一，本身性能优势非常明显：

• 不会破坏原有DOM节点，所有已绑定的事件监听器、样式都不会失效
• 仅修改文本内容，解析和重排成本极低，性能是所有方案里最优的
• 纯文本赋值没有XSS安全风险

直接用outerHTML替换整个表格的性能比用innerHTML替换外层div还要差，两者本质都是销毁原有DOM节点再插入全新节点，触发的重排范围、HTML解析成本没有本质差异，outerHTML还多了一步原有元素自身的销毁操作，完全没有使用必要。

不需要给每个span加独立ID，也不需要维护大量独立变量，用结构化数据+批量查询元素即可实现极低维护成本的更新逻辑：

1. 结构化存储所有变体的规格数据，仅存纯文本即可，无需存完整HTML：

// 5个变体仅需维护这一个变量即可
const variantSpecs = {
  "变体1": [
    { metric: "dimension_1_metric值", imperial: "dimension_1_imperial值" },
    { metric: "dimension_2_metric值", imperial: "dimension_2_imperial值" },
    { metric: "Other information metric值", imperial: "Other information imperial值" }
  ],
  "变体2": [/* 对应规格数据 */],
  "变体3": [/* 对应规格数据 */],
  "变体4": [/* 对应规格数据 */],
  "变体5": [/* 对应规格数据 */]
}

2. 公制/英制切换直接用CSS实现，不需要单独操作每个span的显示状态：

/* 默认显示公制 */
.spec-table_imperial {
  display: none;
}
/* 切换英制时给body加unit-imperial类即可 */
body.unit-imperial .spec-table_metric {
  display: none;
}
body.unit-imperial .spec-table_imperial {
  display: inline;
}

3. 变体切换时批量更新内容即可，代码通用，后续新增表格行无需修改逻辑：

function updateSpecTable(selectedVariant) {
  const currentSpecs = variantSpecs[selectedVariant];
  const metricEls = document.querySelectorAll(".spec-table_metric");
  const imperialEls = document.querySelectorAll(".spec-table_imperial");
  currentSpecs.forEach((spec, index) => {
    metricEls[index].textContent = spec.metric;
    imperialEls[index].textContent = spec.imperial;
  });
}

内容的提问来源于stack exchange，提问作者Ardavan Sepehri