面试题：优化复杂DOM行为的Svelte自定义Action

实现思路

创建自定义Action：在Svelte中，自定义Action是一个函数，它接收一个DOM元素和一些可选参数，并返回一个包含update和destroy函数的对象（如果需要的话）。
监听滚动事件：在自定义Action内部，为传入的DOM元素添加滚动事件监听器。
判断是否滚动到列表底部：通过比较scrollTop + clientHeight和scrollHeight的值来判断是否滚动到了底部。如果scrollTop + clientHeight >= scrollHeight，则说明滚动到了底部。
加载更多数据：当判断滚动到列表底部时，触发加载更多数据的逻辑，比如调用API获取更多数据，并更新组件的状态。

性能优化方面可能遇到的问题及解决方案

频繁触发滚动事件：滚动事件触发非常频繁，可能导致性能问题。
- 解决方案：使用防抖（Debounce）或节流（Throttle）技术。
  - 防抖：在一定时间内（比如200毫秒）如果再次触发滚动事件，则重置定时器，只有在停止滚动200毫秒后才执行加载更多数据的逻辑。
  - 节流：规定在一定时间间隔内（比如200毫秒），无论滚动事件触发多少次，只执行一次加载更多数据的逻辑。
大量数据渲染：如果列表数据量非常大，渲染可能会变得缓慢。
- 解决方案：使用虚拟列表技术。只渲染当前视口内可见的数据项，而不是渲染整个列表。Svelte有一些库（如@tanstack/svelte-virtual）可以帮助实现虚拟列表。

关键代码片段

<script>
    let list = [];
    let hasMore = true;
    const loadMore = () => {
        // 模拟加载更多数据，实际应用中调用API
        list = list.concat(new Array(10).fill(null).map((_, i) => `Item ${list.length + i + 1}`));
        if (list.length >= 50) {
            hasMore = false;
        }
    };

    const scrollToBottom = (node) => {
        let throttled = false;
        const handleScroll = () => {
            if (throttled) return;
            throttled = true;
            setTimeout(() => {
                if (node.scrollTop + node.clientHeight >= node.scrollHeight && hasMore) {
                    loadMore();
                }
                throttled = false;
            }, 200);
        };
        node.addEventListener('scroll', handleScroll);
        return {
            destroy() {
                node.removeEventListener('scroll', handleScroll);
            }
        };
    };
</script>

<div use:scrollToBottom>
    {#each list as item}
        <div>{item}</div>
    {/each}
    {#if hasMore}
        <div>Loading...</div>
    {/if}
</div>

在上述代码中：

scrollToBottom是自定义Action，它为传入的DOM元素添加了滚动事件监听器，并使用节流技术防止频繁触发加载逻辑。
loadMore函数模拟加载更多数据的操作，在实际应用中应该调用API获取数据。
list存储列表数据，hasMore表示是否还有更多数据可加载。
在模板中，通过use:scrollToBottom将自定义Action应用到一个div元素上，该div包含列表项和加载指示器。

星途面试题库

面试题：优化复杂DOM行为的Svelte自定义Action

知识考点

面试题答案

实现思路

性能优化方面可能遇到的问题及解决方案

关键代码片段