面试题：JavaScript处理文档锚点滚动时的性能优化

优化思路

事件委托：使用事件委托来处理所有锚点的点击事件，而不是为每个锚点单独绑定事件。这样可以减少事件处理器的数量，从而提升性能。
平滑滚动：使用 scrollTo 或 scrollIntoView 的平滑滚动选项，避免生硬的跳跃。
节流或防抖：在滚动过程中，如果有与滚动相关的操作（如监听滚动位置更新导航状态），可以使用节流或防抖技术，减少频繁触发的回调函数。
预加载和缓存：如果页面有额外的资源（如图片），在需要滚动到的区域提前预加载，并且对已经处理过的锚点位置等信息进行缓存。

关键代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anchor Scroll Optimization</title>
</head>

<body>
    <nav>
        <ul id="anchorList">
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <!-- 更多锚点 -->
            <li><a href="#sectionN">Section N</a></li>
        </ul>
    </nav>
    <div id="section1">Section 1 Content</div>
    <div id="section2">Section 2 Content</div>
    <!-- 更多内容区域 -->
    <div id="sectionN">Section N Content</div>

    <script>
        const anchorList = document.getElementById('anchorList');
        anchorList.addEventListener('click', function (e) {
            e.preventDefault();
            if (e.target.tagName === 'A') {
                const targetId = e.target.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior:'smooth',
                        block: 'start',
                        inline: 'nearest'
                    });
                }
            }
        });
    </script>
</body>

</html>

在上述代码中：

使用事件委托，将点击事件绑定在包含所有锚点的父元素 anchorList 上。
当点击锚点时，阻止默认的跳转行为，获取目标元素的ID，并使用 scrollIntoView 方法实现平滑滚动到目标区域。 scrollIntoView 的 behavior:'smooth' 选项确保了平滑的滚动效果。

星途面试题库

面试题：JavaScript处理文档锚点滚动时的性能优化

知识考点

面试题答案

优化思路

关键代码示例