面试题：Svelte事件处理中的响应式与性能优化

避免不必要的重新渲染

使用 $: 块控制响应式更新范围：在Svelte中，$: 标记的语句块会在其依赖的响应式变量发生变化时重新执行。通过合理划分 $: 块，可以精确控制哪些部分需要响应式更新，避免不必要的重新渲染。
- 示例代码：

<script>
    let count = 0;
    let text = 'Initial text';
    $: {
        // 只有当count变化时，下面的计算才会执行，text变化不会触发
        let result = count * 2;
        console.log('Count related calculation:', result);
    }
    function increment() {
        count++;
    }
    function updateText() {
        text = 'Updated text';
    }
</script>

<button on:click={increment}>Increment</button>
<button on:click={updateText}>Update Text</button>

性能分析：在上述代码中，当 increment 函数被调用，count 变化，只会触发 $: 块内与 count 相关的计算。而调用 updateText 函数时，text 变化不会触发 $: 块的重新执行，从而避免了不必要的重新渲染。

利用 bind:this 优化DOM访问：如果在事件处理中需要访问DOM元素，使用 bind:this 可以避免不必要的响应式更新。
- 示例代码：

<script>
    let myDiv;
    function handleClick() {
        if (myDiv) {
            myDiv.style.color = 'red';
        }
    }
</script>

<div bind:this={myDiv} on:click={handleClick}>Click me</div>

性能分析：直接通过 bind:this 获取DOM元素并操作，而不是依赖响应式变量来更新DOM，减少了因响应式更新可能导致的不必要重新渲染。

优化事件绑定和处理函数的定义

使用箭头函数和防抖/节流：对于频繁触发的事件（如 scroll、resize），可以使用防抖或节流技术结合箭头函数来优化。
- 防抖示例代码：

<script>
    let debounceTimer;
    function debouncedFunction() {
        console.log('Debounced function called');
    }
    function handleScroll() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(debouncedFunction, 300);
    }
</script>

<div on:scroll={handleScroll}>
    <!-- 内容 -->
</div>

节流示例代码：

<script>
    let lastCallTime = 0;
    const throttleTime = 300;
    function throttledFunction() {
        const now = new Date().getTime();
        if (now - lastCallTime >= throttleTime) {
            console.log('Throttled function called');
            lastCallTime = now;
        }
    }
    function handleScroll() {
        throttledFunction();
    }
</script>

<div on:scroll={handleScroll}>
    <!-- 内容 -->
</div>

性能分析：防抖使得函数在一定时间内（如上述的300毫秒）多次触发只会执行一次，节流则是在一定时间间隔内（如300毫秒）只允许函数执行一次。这两种方法都能有效减少频繁事件处理函数的执行次数，从而提升性能。

避免在模板中定义复杂处理函数：不要在模板的事件绑定中直接定义复杂函数，这样会导致每次重新渲染都创建新的函数实例。
- 不好的示例：

<script>
    let value = 0;
</script>

<button on:click={() => {
    // 复杂计算
    value = value * 2 + 1;
}}>Click</button>

好的示例：

<script>
    let value = 0;
    function complexCalculation() {
        value = value * 2 + 1;
    }
</script>

<button on:click={complexCalculation}>Click</button>

性能分析：在好的示例中，complexCalculation 函数只创建一次，而不好的示例中每次重新渲染都会创建新的箭头函数实例，增加了性能开销。

星途面试题库

面试题：Svelte事件处理中的响应式与性能优化

知识考点

面试题答案

避免不必要的重新渲染

优化事件绑定和处理函数的定义