切换display:none/block与node.replaceWith()的差异及性能对比

核心差异拆解 #

1. DOM与渲染处理 #

• display:none方案：所有标签页节点始终留在DOM树中，仅通过CSS隐藏。浏览器会完成这些节点的初始样式计算，但不会进行布局和绘制。DOM树整体体积更大，但节点状态（如输入框内容、滚动位置）会被完整保留。
• DOM增删方案：仅当前激活的标签页在DOM中，其余节点从DOM移除后存在内存（比如你用Map存储）。DOM树更简洁，但每次切换都要执行节点的移除/插入操作，触发局部DOM重排。

2. 性能开销对比 #

• 初始化阶段：
  • display:none：一次性解析、计算所有节点的样式，首次加载耗时更长，尤其是500个标签页的场景，初始DOM解析压力更大。
  • DOM增删：仅初始化激活节点，首次加载更快，但需要提前在内存中存储所有节点，内存占用和前者持平。
• 切换阶段：
  • display:none：仅修改CSS类，属于轻量的样式变更，仅触发少量重绘（或局部重排），切换速度极快，适合频繁切换的场景。
  • DOM增删：每次切换都要执行DOM节点的替换操作，触发局部重排+重绘，单次切换开销比样式切换高，频繁切换时累积开销会更明显。

3. 隐性细节差异 #

• 可访问性：两者对屏幕阅读器的表现一致，隐藏/移除的节点都不可被读取。
• 事件监听：display:none的节点上绑定的事件监听仍存在；DOM移除的节点如果未解绑监听，只要节点还在内存中，监听就不会失效，但如果后续不再使用该节点，可能造成内存泄漏。
• 状态维护：display:none的节点会自动保留自身状态；DOM增删方案中，只要节点存在内存中，状态也能保留，但如果是动态创建节点则需要额外逻辑保存状态。

500个标签页场景的选型建议 #

• 切换频率低：选DOM增删方案，DOM树更简洁，初始加载快，内存占用和display:none差不多，偶尔切换的开销可以忽略。
• 切换频率高：选display:none方案，切换操作开销极小，现代浏览器完全能应对500个隐藏节点的DOM维护，反而频繁DOM增删的累积开销会影响体验。

如果每个标签页包含大量复杂内容（如嵌套DOM、图片、视频），display:none的初始加载压力会显著增大，此时可以考虑混合方案：比如只保留最近使用的几个标签页在DOM中，其余从DOM移除并缓存，平衡初始加载和切换性能。

代码示例 #

JavaScript #

let ntbk_1, tabsMenu, tabsBtn, tabsBody, tabsMap_1, tabSel_1;

ntbk_1 = document.querySelector('.ntbk_1');
tabsMenu = document.querySelector('.ntbk_1 .tabsMenu');
tabsBtn = tabsMenu.children;
tabsBody = document.querySelectorAll('.ntbk_1 .tabsBody > div');
tabsMap_1 = new Map();
tabSel_1 = tabsBtn[0];

for ( let i=0, l=tabsBtn.length;
      i < l;
      i++ ) {
  tabsMap_1.set(tabsBtn[i],tabsBody[i]);
  tabsBody[i].dataset.i = i+1;
}

tabsBody[0].classList.add('sel');
tabsBody[0].textContent = printNodes(ntbk_1.lastElementChild.children);

tabsMenu.addEventListener( 'mousedown', navTabs_1, false);

function navTabs_1( evt ) {
  let t, e = evt.target;
  if ( !e.matches('button, button *') ||
       e === tabSel_1 ) return;
  tabSel_1.classList.remove('sel');
  (t = tabsMap_1.get(tabSel_1)).classList.remove('sel');
  t.textContent = 'Tab ' + t.dataset.i + ' Content';
  tabSel_1 = e;
  tabSel_1.classList.add('sel');
  t = tabsMap_1.get(tabSel_1);
  t.classList.add('sel');
  t.textContent = printNodes(ntbk_1.lastElementChild.children);
}

function printNodes(nodes) {
  let a = [];
  for ( let i=0, l=nodes.length;
        i < l;
        i++ ) {
    a.push( nodes[i].outerHTML.trim() );
  }
  return a.join('\r\n');
}

/* ------------------------------------------------------ */

let ntbk_2, tabsMap_2, tabSel_2;

ntbk_2 = document.querySelector('.ntbk_2');
tabsMenu = document.querySelector('.ntbk_2 .tabsMenu');
tabsBtn = tabsMenu.children;
tabsBody = document.querySelectorAll('.ntbk_2 .tabsBody > div');
tabsMap_2 = new Map();
tabSel_2 = tabsBtn[0];

for ( let i=0, l=tabsBtn.length;
      i < l;
      i++ ) {
  tabsMap_2.set(tabsBtn[i],tabsBody[i]);
  tabsBody[i].dataset.i = i+1;
}

tabsBody[1].remove();
tabsBody[2].remove();
tabsBody[0].textContent = ntbk_2.lastElementChild.innerHTML.trim();

tabsMenu.addEventListener( 'mousedown', navTabs_2, false);

function navTabs_2( evt ) {
  let t, te, e = evt.target;
  if ( !e.matches('button, button *') ||
       e === tabSel_2 ) return;
  tabSel_2.classList.remove('sel');
  (t = tabsMap_2.get(tabSel_2)).replaceWith(te = tabsMap_2.get(e)); 
  t.textContent = 'Tab ' + t.dataset.i + ' Content';
  tabSel_2 = e;
  tabSel_2.classList.add('sel');
  te.textContent = ntbk_2.lastElementChild.innerHTML.trim();  
}

CSS #

.ntbkCan {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}

.ntbk {
  height: 150px;
  width: 300px;
  display: flex;
  flex-flow: column;
}

.tabsMenu {
  padding: 5px 0;
}

.tabsMenu button {
  background-color: rgb(200,200,200);
  border-radius: 5px;
  border: 1px solid rgb(170,170,170);
  cursor: pointer;
}  

.tabsMenu button.sel {
  background-color: rgb(70,170,220);
  cursor: auto;
}  

.tabsBody {
  border: 1px solid black;
  flex: 1 1;
}

.tabsBody > div {
  padding: 10px;
  font-size: 14px;
  font-family: Arial;
  white-space: pre;
}

.ntbk_1 .tabsBody > div {
  display: none
}

.ntbk_1 .tabsBody > div.sel {
  display: block;
}

HTML #

<div class="ntbkCan">

  <div class="ntbk ntbk_1">
    <div class="tabsMenu">
       <button class="sel">Tab 1</button>
       <button>Tab 2</button>
       <button>Tab 3</button>
    </div>
    <div class="tabsBody">
      <div>Tab 1 Content</div>
      <div>Tab 2 Content</div>
      <div>Tab 3 Content</div>
    </div>
  </div>

  <div class="ntbk ntbk_2">
    <div class="tabsMenu">
       <button class="sel">Tab 1</button>
       <button>Tab 2</button>
       <button>Tab 3</button>
    </div>
    <div class="tabsBody">
      <div>Tab 1 Content</div>
      <div>Tab 2 Content</div>
      <div>Tab 3 Content</div>
    </div>
  </div>
</div>

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