html - 是什么导致 CSS 中的延迟滚动？

Question

我有一个用 CSS 创建的设计，它已经开始有点，呃，懒惰滚动。我的意思是当您滚动时滚动条会有点滞后。这有哪些常见原因，以便我可以从我的站点对其进行调试？

编辑:

文档内容很少(甚至一个段落都没有)，所以一点也不多。没有闪光灯，两张图片。

编辑:

我觉得自己很蠢。背景格式不正确:属性导致了问题。尽管如此，还是谢谢大家。

Answer 1

这可能是由于 css 的大量处理要求。

(CSS 确实会影响每个浏览器中的滚动)我已经多次看到这种情况(最坏的情况是使用 SVG)。由于它是 AA，它通常会严重打击像 Chrome 这样的浏览器。

有一个很棒的网站详细介绍了关于 CSS 效果的最重要到最安全的属性，抱歉我没有链接。虽然根据我的经验，我会说要考虑:

渐变:特征越多或它们覆盖的区域越大，渲染计算的指数级越高。滥用止损和额外的颜色也会增加困惑。

Border-Radius:通常会剪掉它的内部内容，不管它是什么。我注意到排除后的差异。

如果与其他 CSS 效果相结合，不透明度可能是主要问题。在某些情况下，我发现在移除不透明度或减少它的使用时有很大的改进。因为它不仅仅是透明度，它还插入了一些浏览器的抗锯齿文本。

图像:图像影响滚动的方式应该是显而易见的，尽管我发现根据图像的原始分辨率调整图像大小可能会成为一个更引人注目的因素。

背景大小等属性的使用:;在某些情况下会消耗巨大的能量，解决方法是废弃 div，替换为 < img > 并用空白 div 覆盖包含文本/内容。

动画转换和翻译如果被滥用，会明显消耗电力，尤其是连续循环或通过百分比调整浏览器大小的动画。

请记住，使用低规范赛扬 PC 的人在网站上会遇到糟糕的体验，而该网站会滞后于您的合理/高性能 PC/mac