通过放弃 JavaScript 滚动来改善 Interaction to Next Paint

打造不影响 Core Web Vitals 的美观流畅滚动体验

Arjen Karel - linkedin

Last update: 2026-02-07

立即用 CSS 替代 JavaScript 滚动

这篇博客有一段历史。直到2017年，添加一致的平滑滚动行为的唯一方法是使用 JavaScript 库。许多开发者确实这样做了。Core Web Vitals 当时还不存在，每个人都在使用 jQuery 作为主要的 JavaScript 库。

现在快进到今天。JavaScript 锚点滚动已经有了更好、更快、更简单的替代方案。然而作为 Core Web Vitals 顾问，我每天仍然会看到它们。

为什么基于 JavaScript 的滚动是“不好的”

基于 JavaScript 的滚动不好有两个原因：它很复杂，而且很慢。

复杂：基于 JavaScript 的滚动不必要地复杂。你必须编写和维护难以阅读的代码，尽管 [url=https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo]Window.scrollTo()[/url] 方法使这段代码简单了很多，但它仍然比 CSS 方案更难维护。

缓慢。JavaScript 往往会阻塞主线程，而且总是比 CSS 方案更慢。根据滚动功能的实现方式，它可能会长时间阻塞主线程，并导致 Interaction to Next Paint 指标出现严重延迟！

为什么 CSS 平滑滚动是“好的”

我讨论了为什么基于 JavaScript 的滚动不好。CSS 平滑滚动则恰恰相反。它真的就像在样式表中添加以下代码一样简单：

html{ scroll-behavior: smooth;}

简单且高效

CSS 单行代码 html { scroll-behavior: smooth; } 实现起来非常简单，而且比基于 JavaScript 的解决方案更高效。这一行代码就能为整个页面启用平滑滚动，无需任何难以维护的 JavaScript 函数。

更好的性能

基于 CSS 的平滑滚动由浏览器原生处理，在任何情况下都会优于 JavaScript 实现。这对于优化 Interaction to Next Paint (INP) 指标尤为重要，因为它对浏览器主线程的负担更小。

浏览器兼容性

CSS 平滑滚动拥有相当好的浏览器支持。不支持平滑滚动的旧浏览器会简单地回退到默认的直接跳转到锚点。

轻松自定义

CSS 让你可以轻松自定义滚动行为。例如 scroll-margin-top 属性让你设置滚动元素的顶部距离：

h1, h2, h3 {scroll-margin-top: 5rem;}

或者使用 '[url=https://developer.mozilla.org/en-US/docs/Web/CSS/:target]target[/url]' 伪类更加简单

:target {scroll-margin-top: 5rem;}

完整示例：

要查看这段代码的实际效果，只需点击本页顶部的目录。你会注意到一个漂亮的平滑滚动到所点击的锚点。

这是一个简化的示例，供你复制和重复使用

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>
   
</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    </nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>