面试题：Svelte复杂场景下信号与响应式变量性能优化

优化列表组件性能避免不必要重新渲染的策略

使用 key 属性：为每个列表项设置唯一的 key，这样 Svelte 在更新列表时可以精准定位变化的元素，避免整个列表的重新渲染。例如：

{#each items as item, index}
  <li key={item.id}>
    {item.name}
  </li>
{/each}

局部更新：尽量将响应式变量的作用域限制在最小范围。如果某个变量只影响单个列表项，不要将其提升到整个列表组件的作用域。例如，每个列表项有自己的展开/收起状态，可以在列表项内部定义该状态变量：

{#each items as item}
  <div>
    <button on:click={() => item.isExpanded =!item.isExpanded}>
      {item.isExpanded? '收起' : '展开'}
    </button>
    {#if item.isExpanded}
      {item.details}
    {/if}
  </div>
{/each}

防抖和节流：如果列表项的更新是由用户操作（如输入框输入等）触发，使用防抖或节流来限制更新频率。比如使用 setTimeout 实现防抖：

<script>
  let debounceTimer;
  function handleInput(e, item) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      item.value = e.target.value;
    }, 300);
  }
</script>
{#each items as item}
  <input type="text" bind:value={item.value} on:input={(e) => handleInput(e, item)}>
{/each}

Memoization（记忆化）：对于一些复杂计算且依赖数据不变时结果不变的函数，使用记忆化。可以自己实现一个简单的记忆化函数：

<script>
  function memoize(func) {
    const cache = new Map();
    return function(...args) {
      const key = args.toString();
      if (cache.has(key)) {
        return cache.get(key);
      }
      const result = func.apply(this, args);
      cache.set(key, result);
      return result;
    };
  }
  const expensiveCalculation = memoize((a, b) => {
    // 复杂计算逻辑
    return a + b;
  });
</script>
{#each items as item}
  {expensiveCalculation(item.num1, item.num2)}
{/each}

处理信号之间依赖关系

明确依赖关系：在代码编写过程中，要清晰地知道哪些信号依赖于哪些其他信号。例如，如果一个列表项的可见性依赖于一个全局的筛选信号，要明确这种关系。

<script>
  import { writable } from'svelte/store';
  const filter = writable('all');
  const items = writable([{ name: 'item1' }, { name: 'item2' }]);
</script>
{#each $items as item}
  {#if $filter === 'all' || item.name.includes($filter)}
    <li>{item.name}</li>
  {/if}
{/each}

合理组织信号更新逻辑：确保信号更新时，只触发真正依赖它的其他信号的更新。如果某个信号的更新逻辑比较复杂，可以将其封装成函数，在函数内部控制依赖信号的更新顺序。

<script>
  import { writable } from'svelte/store';
  const count = writable(0);
  const message = writable('');
  function incrementAndUpdateMessage() {
    count.update(c => c + 1);
    if ($count > 5) {
      message.set('Count is greater than 5');
    } else {
      message.set('');
    }
  }
</script>
<button on:click={incrementAndUpdateMessage}>Increment</button>
<p>{$message}</p>

使用 derived 信号（派生信号）：当一个信号的值是基于其他信号计算得出时，使用 derived 来创建派生信号。这样可以自动管理依赖关系，并且只有当依赖信号变化时才会重新计算。

<script>
  import { writable, derived } from'svelte/store';
  const num1 = writable(1);
  const num2 = writable(2);
  const sum = derived([num1, num2], ([$num1, $num2]) => $num1 + $num2);
</script>
<p>Sum: {$sum}</p>

面试题：Svelte复杂场景下信号与响应式变量性能优化

知识考点

面试题答案

优化列表组件性能避免不必要重新渲染的策略

处理信号之间依赖关系