Svelte中批量生成多选项select组件的性能优化问询

问题根源 #

切换到编辑模式时，Svelte会一次性创建15个<select>及每个内部的100个<option>节点（总计1500个DOM元素），DOM创建的开销导致了1秒延迟。而React的虚拟DOM diff机制会复用未变化的节点，因此无此问题。

优化方案 #

1. 预渲染所有Select，用CSS控制显示/隐藏（最简单高效）

避免切换时销毁重建DOM，提前渲染编辑模式的所有组件，仅通过CSS切换可见性：

<script>
  let editMode = false;
  const items = Array.from({ length: 15 }, (_, i) => ({ id: i, value: i % 100 }));
  const options = Array.from({ length: 100 }, (_, i) => ({ id: i, label: `Option ${i}` }));
</script>

<button on:click={() => editMode = !editMode}>
  {editMode ? '退出编辑' : '进入编辑'}
</button>

<table>
  {#each items as item (item.id)}
    <tr>
      <td>
        <!-- 查看模式 -->
        <span class={editMode ? 'hidden' : ''}>{item.value}</span>
        <!-- 编辑模式：预渲染完成，仅通过CSS显示/隐藏 -->
        <select bind:value={item.value} class={editMode ? '' : 'hidden'}>
          {#each options as opt (opt.id)}
            <option value={opt.id}>{opt.label}</option>
          {/each}
        </select>
      </td>
    </tr>
  {/each}
</table>

<style>
  .hidden { display: none; }
</style>

原理：页面加载时就完成所有<select>和<option>的DOM创建，切换编辑模式仅修改CSS属性，无DOM创建/销毁开销，性能提升最明显。

2. 复用全局选项DOM节点

如果不想预渲染所有Select，可以预渲染一个隐藏的模板Select，所有编辑用的Select克隆其选项节点：

<script>
  let editMode = false;
  const items = Array.from({ length: 15 }, (_, i) => ({ id: i, value: i % 100 }));
  const options = Array.from({ length: 100 }, (_, i) => ({ id: i, label: `Option ${i}` }));
  let templateSelect;

  // 初始化时克隆模板选项到目标Select
  function initSelect(selectEl) {
    if (!templateSelect || selectEl.children.length) return;
    const templateOptions = templateSelect.querySelectorAll('option');
    templateOptions.forEach(opt => selectEl.appendChild(opt.cloneNode(true)));
  }
</script>

<!-- 隐藏的模板Select，预渲染所有选项 -->
<select style="display: none;" bind:this={templateSelect}>
  {#each options as opt (opt.id)}
    <option value={opt.id}>{opt.label}</option>
  {/each}
</select>

<button on:click={() => editMode = !editMode}>
  {editMode ? '退出编辑' : '进入编辑'}
</button>

<table>
  {#each items as item (item.id)}
    <tr>
      <td>
        {#if !editMode}
          {item.value}
        {:else}
          <select bind:value={item.value} use:initSelect></select>
        {/if}
      </td>
    </tr>
  {/each}
</table>

原理：仅创建一次100个<option>节点，后续所有Select通过克隆复用，将总DOM创建次数从15次降为1次。

3. 虚拟列表替代原生Select

对于超大量选项场景，用自定义虚拟下拉框仅渲染可视范围内的选项：

<script>
  let editMode = false;
  const items = Array.from({ length: 15 }, (_, i) => ({ id: i, value: i % 100 }));
  const options = Array.from({ length: 100 }, (_, i) => ({ id: i, label: `Option ${i}` }));
  let activeDropdown = null;
  let scrollTop = 0;
  const visibleOptionCount = 10; // 仅显示10个可视选项
  const optionHeight = 30; // 每个选项固定高度

  // 获取当前可视范围内的选项
  function getVisibleOptions() {
    const startIndex = Math.floor(scrollTop / optionHeight);
    return options.slice(startIndex, startIndex + visibleOptionCount);
  }
</script>

<button on:click={() => editMode = !editMode}>
  {editMode ? '退出编辑' : '进入编辑'}
</button>

<table>
  {#each items as item (item.id)}
    <tr>
      <td>
        {#if !editMode}
          {item.value}
        {:else}
          <div class="custom-select" on:click={() => activeDropdown = activeDropdown === item.id ? null : item.id}>
            <div class="selected-label">{options.find(o => o.id === item.value)?.label || '选择选项'}</div>
            {#if activeDropdown === item.id}
              <div 
                class="options-container" 
                style="max-height: {visibleOptionCount * optionHeight}px;"
                on:scroll={(e) => scrollTop = e.target.scrollTop}
              >
                {#each getVisibleOptions() as opt (opt.id)}
                  <div 
                    class="option-item" 
                    style="height: {optionHeight}px;"
                    on:click={() => {
                      item.value = opt.id;
                      activeDropdown = null;
                    }}
                  >
                    {opt.label}
                  </div>
                {/each}
              </div>
            {/if}
          </div>
        {/if}
      </td>
    </tr>
  {/each}
</table>

<style>
  .custom-select {
    position: relative;
    width: 200px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
  }
  .selected-label {
    padding: 8px 12px;
  }
  .options-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #e2e8f0;
    border-top: none;
    overflow-y: auto;
    background: #fff;
    z-index: 10;
  }
  .option-item {
    padding: 8px 12px;
  }
  .option-item:hover {
    background: #f8fafc;
  }
</style>

原理：每个下拉框仅渲染10个左右的可视选项，总DOM节点数从1500降至150左右，大幅降低DOM操作开销。

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