javascript - 为什么使用 JS 更改此 CSS 效果仅适用于某些值？

Question

当用户滚动页面时，我试图相对于视口(viewport)缓慢移动图像。类似于此处找到的效果 https://ihatetomatoes.net/demos/parallax-scroll-effect-part-2/

如果图像移动了一个小值，那么它会平滑地移动。如果它移动的量较大，那么它会变得非常卡顿。

var imageOffset = lastScrollY * 0.9;
$image.css({top: `${imageOffset}px`});     //Runs badly

var imageOffset = lastScrollY * 0.3;
$image.css({top: `${imageOffset}px`});     //Runs well

为什么值对性能的影响如此之大？

我已经尝试了所有不同的 CSS 样式(转换、顶部、底部、背景位置)。开发工具说我完全符合 60fps 的时间限制。如果页面上以及多个浏览器和设备上只有图像，就会发生这种情况。这不仅适用于图像，也适用于文本或其他任何内容。

错误版本:https://jsfiddle.net/4vcg8mpk/58/

好的版本:https://jsfiddle.net/4vcg8mpk/59/

问题在 Firefox 中最明显，在 Chrome 中，它在第一次滚动时很明显，然后就稳定下来了。同样最引人注目的是使用滚轮或触控板而不是拖动侧滚动条

Answer 1

这是因为您正在尝试对影响页面布局的属性进行动画处理。这些属性要求浏览器在每次布局属性更改时重新计算 DOM 的布局。您可能不会在第二个选项中遇到性能延迟，因为布局重新绘制很快，但这并不意味着您最终不会在为这些属性设置动画时遇到性能问题。

I'd recommend checking out this article on animation performance with CSS.它很旧，但信息仍然有效。我知道您说过您尝试过为其他属性设置动画，但我建议您仔细阅读所有这些建议，然后实现对浏览器来说“便宜”的东西。