通过放弃 JavaScript 滚动来改善 Interaction to Next Paint
创建不影响 Core Web Vitals 的美观平滑滚动体验
今天就用 CSS 替代 JavaScript 滚动
这篇博客有一段历史。直到 2017 年，添加一致的平滑滚动行为的唯一方法是使用 JavaScript 库。许多开发者就是这样做的。Core Web Vitals 当时还不存在，每个人都在使用 jQuery 作为主要的 JavaScript 库。
快进到今天。现在有比基于 JavaScript 的锚点滚动更好、更快、更简单的替代方案。然而作为 Core Web Vitals 顾问，我每天仍然能看到它们。
Table of Contents!
为什么基于 JavaScript 的滚动是“不好的”
基于 JavaScript 的滚动不好有两个原因：它复杂且速度慢。
复杂：基于 JavaScript 的滚动不必要地复杂。你必须编写和维护难以阅读的代码，尽管 Window.scrollTo() 方法已经使这段代码变得容易得多，但它仍然比以下方式难以维护得多。
慢。JavaScript 倾向于阻塞主线程，并且总是比其 CSS 对应方案慢。 根据滚动函数的实现方式，它可能会长时间阻塞主线程，并导致 Interaction to Next Paint 指标出现严重延迟！
为什么 CSS 平滑滚动是“好的”
html{ scroll-behavior: smooth;}简单高效
CSS 一行代码 html { scroll-behavior: smooth; } 实现起来非常简单，比基于 JavaScript 的解决方案更高效。这一行代码就能为整个页面启用平滑滚动，无需任何难以维护的 JavaScript 函数。
更好的性能
基于 CSS 的平滑滚动由浏览器原生处理，在所有情况下都优于 JavaScript 实现。这对于优化 Interaction to Next Paint (INP) 指标尤为重要，因为它对浏览器主线程的负担更小。
浏览器兼容性
CSS 平滑滚动具有相当好的浏览器支持。不支持平滑滚动的旧浏览器会简单地 fallback 到默认的直接跳转到锚点。
轻松自定义
CSS 让你轻松自定义滚动行为。例如 scroll-margin-top 属性让你设置到滚动元素的顶部距离：
h1, h2, h3 {scroll-margin-top: 5rem;} 或者用 'target' 伪类更简单
: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>Secure your Q3 Metrics.
Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.
- Strategic Planning
- Code Implementation
- Verification & Testing
