我是一名网络应用程序开发人员。在这个应用程序中，有一个特定的场景，其中有多个position:fixed元素、canvas和一个overflow:scroll元素。在这种情况下，当启用平滑滚动时，Firefox 上的滚动速度非常慢。

从用户的角度来看，解决方案只是禁用平滑滚动。但是，作为开发人员，我无法确保用户已经这样做了。

有没有什么地方可以告诉 Firefox 不要从 javascript （或 html）为我的网站使用平滑滚动？或者还有其他已知的解决方法吗？

我确实理解您的问题基本上是如何禁用平滑滚动。不过，为了让这个工作正常进行，我会以不同的方式回答你。

为什么不同？

即使您可以检测到用户的平滑滚动，您也不能强迫用户禁用它。换句话说，你试图掩盖问题而不是解决问题。所以让我们解决它！

简介：像素到屏幕管道

在每个帧上，浏览器都会执行以下步骤以在屏幕上呈现页面。

• JavaScript。通常，JavaScript 用于处理会导致视觉变化的工作，无论是 jQuery 的动画功能、对数据集进行排序，还是向页面添加 DOM 元素。不过，触发视觉变化的不一定是 JavaScript：CSS 动画、过渡和 Web 动画 API 也很常用。

• 风格计算。这是根据匹配选择器确定哪些 CSS 规则适用于哪些元素的过程，例如.headline 或 .nav > .nav__item。从那里开始，一旦知道规则，就会应用它们并计算每个元素的最终样式。

• 布局。一旦浏览器知道哪些规则适用于某个元素，它就可以开始计算它占用了多少空间以及它在屏幕上的位置。网络的布局模型意味着一个元素可以影响其他元素，例如元素的宽度通常会影响其子元素的宽度，依此类推，一直到树的上下，因此该过程对于浏览器来说可能相当复杂。

• 画。绘画是填充像素的过程。它涉及绘制文本、颜色、图像、边框和阴影，基本上是元素的每个视觉部分。绘图通常在多个表面上完成，通常称为图层。

• 合成。由于页面的各个部分可能被绘制到多个层中，因此需要以正确的顺序将它们绘制到屏幕上，以便页面正确呈现。这对于与另一个元素重叠的元素尤其重要，因为错误可能会导致一个元素错误地出现在另一个元素的顶部。

详情及来源：https://developers.google.com/web/fundamentals/performance/rendering/?hl=en

Step 1:

第一步是删除渲染成本高昂的 CSS 属性。您可能无法删除很多，但可以替换rgba(255,255,255,1); with #fff这会删除 alpha 层。

检查此以获取更多详细信息：https://csstriggers.com/有些属性不需要做layout or a paint而且比其他人轻一些。

Step 2:

检查forced synchronous layout触发器。当您强制浏览器执行以下操作时，就会发生这些情况layout当它在 javascript 步骤中时，然后返回到 javascript，而不是沿着每一帧上的管道平滑地行走。为此，请避免获取布局属性并随后在循环中直接设置它们。

以下是导致同步布局的原因列表：https://gist.github.com/paulirish/5d52fb081b3570c81e3a

阅读更多：https://developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/forced-synchronous-layouts?hl=en

Step 3:

将页面上需要定期重新绘制的组件移动到新图层中。

每次滚动或播放动画时，浏览器都需要重新绘制。为了避免整个页面重新绘制并仅重新绘制正在更改的部分，请将该部分（例如视差、导航、动画）移动到浏览器上的新图层（像 Photoshop 图层一样思考）

为此，请使用will-changecss 属性告诉浏览器将其移动到新层，并使用transform: translateZ(0);如果你想强制浏览器移动它。