面试题：Svelte use: 指令在复杂交互场景下的优化与实践

Question

假设在一个具有大量列表项的页面中，每个列表项都需要通过 use: 指令添加一个鼠标悬停显示详细信息的交互。请描述可能遇到的性能问题，并给出优化方案，同时写出关键的 Svelte 代码实现思路。

Answer 1

可能遇到的性能问题

1. 事件绑定开销：为大量列表项逐个绑定鼠标悬停事件，会增加内存开销，导致页面加载缓慢。
2. 重绘和回流：当鼠标悬停触发详细信息显示时，如果详细信息的样式改变影响布局，可能会频繁触发重绘和回流，降低性能。
3. 渲染性能：大量列表项的频繁显示隐藏操作可能导致渲染性能下降，尤其是在性能较差的设备上。

优化方案

1. 事件委托：利用事件冒泡机制，将鼠标悬停事件绑定在父元素上，通过判断事件源来处理具体列表项的交互，减少事件绑定数量。
2. 优化样式：确保详细信息的显示隐藏不会触发布局改变，尽量使用 opacity 等不影响布局的属性来控制显示隐藏，减少重绘和回流。
3. 虚拟列表：如果列表项数量极大，可以考虑使用虚拟列表技术，只渲染可见区域的列表项，提升渲染性能。

关键的 Svelte 代码实现思路

<script>
    let items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
    let hoveredIndex = null;

    const handleMouseOver = (index) => {
        hoveredIndex = index;
    };

    const handleMouseOut = () => {
        hoveredIndex = null;
    };
</script>

<div on:mouseover={handleMouseOver} on:mouseout={handleMouseOut}>
    {items.map((item, index) => (
        <div key={index}>
            {item}
            {hoveredIndex === index && <p>详细信息：这里是 {item} 的详细信息</p>}
        </div>
    ))}
</div>

在上述代码中，通过 hoveredIndex 来跟踪当前悬停的列表项索引。使用 map 方法遍历列表项，当鼠标悬停在某个列表项时，更新 hoveredIndex，并根据 hoveredIndex 判断是否显示详细信息。通过这种方式实现了鼠标悬停显示详细信息的交互，同时利用了事件委托的思想，减少了事件绑定数量。