CSS will-change: scroll-position：优化滚动性能的秘密武器，以及那些年我们与卡顿的“爱恨情仇”
各位看官，今天咱们聊点实在的，说点能让你网页不再“卡成PPT”的干货。相信大家都经历过这样的场景：辛辛苦苦写出来的网页，设计得美轮美奂，交互也流畅自然，结果一到移动端，或者数据量一大，滚动起来就像老牛拉破车，一步三喘，用户体验直线下降，恨不得砸手机。
没错，罪魁祸首就是滚动卡顿！
别怕，今天我就要拿出我的“祖传秘方”—— will-change: scroll-position，教你如何利用它，让你的滚动体验丝滑柔顺，彻底摆脱卡顿的噩梦。
卡顿的根源：浏览器背后的“小心思”
要理解 will-change: scroll-position 的作用，我们得先稍微了解一下浏览器渲染页面的过程。简单来说，浏览器会把你的 HTML、CSS 和 JavaScript 代码解析成一个渲染树，然后一层一层地绘制到屏幕上。
滚动的时候，浏览器需要不断地重新绘制页面，特别是那些位置会随着滚动而改变的元素，比如固定在顶部的导航栏、视差滚动效果的背景图等等。这个重新绘制的过程非常耗费性能，如果你的页面结构复杂，或者元素过多，浏览器就会忙不过来，导致卡顿。
这就好比你在画一幅巨大的油画，每滚动一下，就相当于要重新调整画笔，重新上色，画得越多，调整的幅度越大，自然就越慢。
而浏览器为了优化性能，通常会采取一种叫做“延迟渲染”的策略。它会尽量避免不必要的重新绘制，只有在真正需要的时候才会进行更新。但这也会带来一个问题：浏览器不知道哪些元素会发生变化，所以它只能保守地对待每一个元素，每次滚动都进行全盘考虑，这无疑增加了计算量，导致卡顿。
will-change：给浏览器打个“提前量”
这时候，will-change 就派上用场了。它可以告诉浏览器，某个元素将会发生哪些变化，让浏览器提前做好准备，而不是等到真正需要的时候才临时抱佛脚。
will-change 的语法很简单：
element {
will-change: property;
}其中 element 是你想要优化的元素，property 是你预计会发生变化的 CSS 属性。
比如，如果你知道某个元素的位置会发生变化，你可以这样写：
.element {
will-change: transform;
}这样，浏览器就会提前把这个元素放到一个单独的渲染层，并优化它的 transform 属性的性能。
will-change: scroll-position：专治滚动不爽
而我们今天的主角 will-change: scroll-position，就是专门用来优化滚动性能的。它可以告诉浏览器，某个元素将会因为滚动而改变位置。
那么，什么情况下我们需要使用 will-change: scroll-position 呢？
1. 固定定位元素：
固定在顶部的导航栏、侧边栏等等，这些元素会随着滚动而保持在屏幕上的固定位置。由于它们的位置会不断变化，所以滚动的时候会频繁地触发重新绘制。
.sticky-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
will-change: scroll-position; /* 优化滚动性能 */
}2. 视差滚动效果：
视差滚动是一种非常流行的网页设计技巧，它通过让不同的元素以不同的速度滚动，营造出一种立体的视觉效果。但是，视差滚动效果的实现往往需要频繁地改变元素的位置，导致严重的性能问题。
.parallax-bg {
background-image: url('bg.jpg');
background-attachment: fixed; /* 实现视差滚动 */
will-change: scroll-position; /* 优化滚动性能 */
}3. 复杂动画：
如果你在滚动的时候触发了复杂的动画效果，比如元素的缩放、旋转等等，也可能导致卡顿。
.animated-element {
transition: transform 0.3s ease-in-out;
will-change: scroll-position, transform; /* 优化滚动和动画性能 */
}
.animated-element:hover {
transform: scale(1.2);
}will-change 的正确打开方式：不要滥用！
虽然 will-change 能够优化性能，但它并不是万能的。滥用 will-change 反而会适得其反。
为什么呢？
因为 will-change 会强制浏览器进行一些优化，比如创建新的渲染层等等。这些优化本身也会消耗一定的资源。如果你对不需要优化的元素使用了 will-change，反而会浪费资源，降低性能。
这就好比你给一个健康的人吃了太多的补药，反而会虚不受补，适得其反。
所以，使用 will-change 之前，一定要仔细分析你的页面，找到真正需要优化的元素，并只对这些元素使用 will-change。
will-change 的注意事项：
- 只在需要的时候使用： 不要对所有元素都使用
will-change。 - 尽量使用具体的属性： 尽量指定具体的 CSS 属性，比如
transform、opacity等等，而不是使用will-change: all。 - 使用后及时移除： 如果某个元素不再需要优化，应该及时移除
will-change属性。 - 配合硬件加速：
will-change通常会配合硬件加速一起使用，以达到最佳的优化效果。
举个栗子：优化一个简单的固定导航栏
假设我们有一个简单的固定导航栏，代码如下：
<nav class="sticky-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="content">
<!-- 大量的页面内容 -->
</div>.sticky-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10; /* 确保导航栏在其他元素之上 */
}
.content {
margin-top: 80px; /* 留出导航栏的高度 */
}如果没有 will-change，这个导航栏在滚动的时候可能会出现轻微的卡顿。我们可以添加 will-change: scroll-position 来优化它：
.sticky-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10; /* 确保导航栏在其他元素之上 */
will-change: scroll-position; /* 优化滚动性能 */
}这样，浏览器就会提前为导航栏的滚动做好准备，滚动体验会更加流畅。
will-change 的替代方案：防患于未然
除了 will-change 之外，还有一些其他的技巧可以用来优化滚动性能：
- 减少 DOM 元素： 尽量减少页面上的 DOM 元素数量，特别是那些复杂的、嵌套的元素。
- 优化 CSS 选择器： 避免使用过于复杂的 CSS 选择器，比如通配符选择器 (
*) 和属性选择器 ([attribute])。 - 使用 CSS Containment： CSS Containment 可以限制元素的渲染范围，减少浏览器的计算量。
- 使用虚拟滚动： 虚拟滚动只渲染用户可见的部分，避免一次性渲染整个页面。
这些技巧可以从根本上减少浏览器的负担，提高滚动性能。
总结：让你的网页“动”起来！
will-change: scroll-position 是一个非常有用的 CSS 属性，它可以帮助你优化滚动性能，让你的网页更加流畅。但是，一定要记住，will-change 不是万能的，滥用反而会适得其反。只有在真正需要的时候，并结合其他的优化技巧，才能发挥它的最大作用。
希望这篇文章能帮助你更好地理解 will-change: scroll-position，并运用它来优化你的网页。让你的网页不再“卡成PPT”，而是真正地“动”起来！
记住，流畅的滚动体验是用户体验的基础，也是一个优秀网页的标志。所以，让我们一起努力，打造更加流畅、更加完美的网页吧！
最后，祝大家编码愉快，bug 永不相见！