点击按钮切换PHP预生成UI的最优实现方案咨询

• 本地DOM切换方案（你的第一个思路）
  优点：无额外网络请求，切换响应速度极快，不会出现加载等待，服务端无额外压力，实现逻辑简单
  缺点：当两套视图重合度低于30%时，生成的HTML冗余度高，会增大首次请求的返回体积；如果新视图的数据需要实时更新、不能和旧视图同时生成时不适用
• 异步请求替换方案（你的第二个思路）
  优点：无HTML冗余，视图逻辑拆分清晰，适合两套视图结构差异极大、或者新视图需要获取最新实时数据的场景
  缺点：每次切换都要发起网络请求，存在延迟，需要额外处理加载状态、请求失败等边界情况，会增加服务端请求压力

如果两套视图只是字段内容不同、没有明显的结构差异，不需要生成两套DOM节点，直接通过HTML自定义属性存储两套数据，切换时直接替换内容即可，冗余度比你的两个原始方案都更低，实现也更简单：

// PHP 生成UI代码示例
echo '<div class="ui-block">
  <button class="toggle-btn" 
          data-old-btn="查看新字段" 
          data-new-btn="查看旧字段"
          data-current="old">查看新字段</button>
  <div class="field-item" data-old="旧字段1值" data-new="新字段1值">旧字段1值</div>
  <div class="field-item" data-old="旧字段2值" data-new="新字段2值">旧字段2值</div>
</div>';

// 切换逻辑JS代码
document.querySelector('.toggle-btn').addEventListener('click', function() {
  const isOldState = this.dataset.current === 'old';
  // 批量替换所有字段内容
  document.querySelectorAll('.ui-block .field-item').forEach(item => {
    item.textContent = isOldState ? item.dataset.new : item.dataset.old;
  });
  // 切换按钮文本
  this.textContent = isOldState ? this.dataset.newBtn : this.dataset.oldBtn;
  // 更新状态标记
  this.dataset.current = isOldState ? 'new' : 'old';
})

• 两套视图结构高度相似，仅内容不同：优先使用上述自定义属性方案
• 两套视图结构有小差异、所有数据首次请求即可全部获取：使用你第一个本地DOM切换方案
• 两套视图结构差异极大、或新视图需要实时拉取最新数据：使用第二个异步请求替换方案

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