面试题：Svelte 中 onMount 和 onDestroy 对性能及内存管理的影响

频繁创建和销毁组件的影响

性能影响：
- 响应式系统开销：每次组件创建时，Svelte 的响应式系统需要追踪组件内声明的变量依赖关系。例如，在 onMount 中可能会读取一些响应式数据，响应式系统要建立这些数据与组件更新逻辑的关联。销毁组件时，又要清理这些依赖关系，频繁操作会带来额外的计算开销。
- 虚拟 DOM 操作：组件创建和销毁会触发虚拟 DOM 的更新。创建时，需要将新组件的 DOM 结构插入到虚拟 DOM 树中，销毁时则要移除。这涉及到虚拟 DOM 的比较和实际 DOM 的操作，频繁的插入和移除操作会降低性能，尤其在大型应用中，虚拟 DOM 树庞大，操作成本更高。
内存管理影响：
- 内存泄漏风险：如果在 onDestroy 中没有正确清理资源，比如没有取消定时器、解绑事件监听器等，随着组件频繁创建和销毁，这些未清理的资源会一直占用内存，导致内存泄漏，使应用的内存使用量不断增加。

优化策略及原理

组件缓存：
- 策略：使用 Svelte 的 {#if} 指令结合一个状态变量来控制组件的显示与隐藏，而不是直接销毁和创建组件。例如：
```
let showComponent = true;
{#if showComponent}
    <MyComponent />
{/if}
```
- 原理：当 showComponent 为 false 时，组件只是从 DOM 中移除，但组件实例依然存在，其状态和资源不会被销毁。再次设置 showComponent 为 true 时，组件可以快速恢复到之前的状态，避免了重新创建组件带来的响应式系统和虚拟 DOM 的开销，同时也减少了内存泄漏的风险，因为组件的资源不需要反复创建和清理。
延迟创建和销毁：
- 策略：引入一个队列机制，在需要创建或销毁组件时，不是立即执行，而是将操作放入队列中。在合适的时机，比如在下一帧（使用 requestAnimationFrame）或某个事件循环周期结束时，批量处理这些队列中的操作。
- 原理：通过批量处理，可以减少响应式系统和虚拟 DOM 的更新频率。例如，在一个短时间内多次触发组件创建或销毁操作，如果立即执行，每次操作都会触发响应式系统和虚拟 DOM 的更新。而批量处理时，只需要在最后统一更新一次，大大降低了更新的开销，提高了性能。同时，对于内存管理，也减少了频繁资源创建和清理的次数，降低了内存泄漏的潜在风险。
优化组件内的资源管理：
- 策略：在组件的 onDestroy 钩子函数中，仔细检查并清理所有可能占用资源的操作。例如，如果在 onMount 中添加了一个全局事件监听器，在 onDestroy 中必须移除该监听器。
```
let someEventListener = () => {
    // 事件处理逻辑
};
onMount(() => {
    document.addEventListener('click', someEventListener);
});
onDestroy(() => {
    document.removeEventListener('click', someEventListener);
});
```
- 原理：确保在组件销毁时，所有占用的资源都被正确释放，避免内存泄漏。这样即使组件频繁创建和销毁，也不会因为资源未清理而导致内存问题，同时也有助于保持应用的性能稳定，因为没有无用资源占用系统资源。

星途面试题库

面试题：Svelte 中 onMount 和 onDestroy 对性能及内存管理的影响

知识考点

面试题答案

频繁创建和销毁组件的影响

优化策略及原理