用于在Firefox中平滑滚动的慢滚动的Javascript解决方法

Question

我是网络应用程序的开发人员。在这个应用程序中，有一个特定场景，其中有多个位置：固定元素，画布和溢出：滚动元素。在这种情况下，启用平滑滚动时，在Firefox上滚动速度非常慢。

从用户的角度来看，解决方案只是禁用平滑滚动。但是，作为开发人员，我无法确保用户已完成此操作。

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

Answer 1

我明白你的问题基本上是如何禁用平滑滚动。但是我会以不同的方式回答你这个问题。

为什么不同？

即使您可以检测到用户的平滑滚动，也无法强制用户禁用它。换句话说，您试图解决问题而不是解决问题。所以我们来解决吧！

简介：像素到屏幕的管道

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

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

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

• 布局。一旦浏览器知道哪些规则适用于元素，它就可以开始计算它占用的空间大小以及它在屏幕上的位置。网络的布局模型意味着一个元素可以影响其他元素，例如元素的宽度通常影响其子元素的宽度，以及在树的上下一直如此，因此浏览器可以完全参与该过程。

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

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

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

第1步：

第一步是删除渲染昂贵的css属性。您可能无法删除很多内容，但是您可以将rgba(255,255,255,1);替换为删除了alpha图层的#fff。

查看此详细信息：https://csstriggers.com/ 有些属性不需要layout或paint，而且其他属性比其他属性重。

第2步：

检查forced synchronous layout次触发器。当你强制浏览器在javascript步骤中执行layout，然后返回到javascript，而不是在每个帧上沿着管道平滑地行走时，会发生这些情况。要做到这一点，请避免获取布局属性，然后在循环中直接设置它们。例如。

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

了解详情：https://developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/forced-synchronous-layouts?hl=en

第3步：

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

每次滚动或播放动画时，浏览器都需要重新绘制。要避免整页重绘并仅重新绘制正在更改的部分，请将该部分（前视差，导航，动画）移动到浏览器上的新图层（将其视为photoshop图层）

这样做可以使用will-change css属性告诉浏览器将其移动到新图层，如果要强制broswer移动它，请使用transform: translateZ(0);。

Answer 2

您是否尝试过添加

backface-visibility: hidden;

给你定位元素？

我宁愿修复问题的根源。通常有一个小细节会产生巨大的瓶颈，并且很容易通过改变一行代码或其他东西来修复。请注意，您很可能不需要减少“好看”和＃34;该应用程序的所有;它只是避免了浏览器布局引擎的小型但具有毁灭性的细节。

我会猜测并说你的网络应用上的某些内容会导致非常大的重绘和/或频繁的重排。检查offsetTop和position: fixed的使用情况。另外，使用requestAnimationFrame而不是为每个滚动事件更新是值得关注的。 Here's a good guide on both finding and fixing scrolling performance problems.

Answer 3

使用inspect元素尝试获取特定原因的句柄。 此外，如果您尚未安装FireBug，请安装它并使用它而不是默认的inspect元素。这将为您提供更多代码详细信息，并允许您逐步执行脚本以查找问题。 还有适用于各种框架的FireBug插件，如果您使用其中一个框架，它可以帮助诊断。

我们可以对原因做出假设或提出霰弹枪解决方案;但是，只有您可以诊断代码才能找到具体信息。