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

标签 html css

我正在用 CSS 创建一个设计,它已经开始有点,呃,懒惰滚动。我的意思是,当您滚动时,滚动条会有点滞后。造成这种情况的常见原因是什么,以便我可以从我的站点对其进行调试?

编辑:

该文档的内容很少(甚至没有一个段落),所以根本就不多。没有闪光灯,两张图像。

编辑:

我觉得自己好蠢。背景格式不正确:属性导致了问题。不过还是谢谢大家。

最佳答案

这可能是由于 CSS 的繁重处理要求。

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

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

渐变:您的特征越多或它们覆盖的区域越大,渲染计算的指数就越大。滥用停止和额外的颜色也会加剧困惑。

Border-Radius:通常会剪掉其内部内容,无论它是什么。我注意到排除后的差异。

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

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

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

如果滥用,动画过渡和翻译显然会很耗电,尤其是连续循环或通过百分比调整浏览器大小的动画。

请记住,使用低规范赛扬 PC 的人在网站上的体验会很糟糕,而该网站在您的合理/高性能 PC/Mac 上表现不佳

关于html - 是什么导致 CSS 中的延迟滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5952974/

相关文章:

javascript - 如何动态生成带 Angular 多级下拉菜单?

javascript - 将焦点集中到具有 contentEditable 的元素 <td> 上

java - 表单嵌套 - JSP、HTML

html - 垂直对齐跨越两行的元素的文本时出现问题

html - 内部 div 上的 margin-top 正在应用于外部 div。

javascript - ListBoxFor为每个选项元素添加数据属性

css - Sublime Text Markmon 包,用 github markdown 风格渲染?

html - 如何在 HTML/CSS 中创建跟踪视口(viewport)的背景?

jquery - 光滑的 slider 更改当前和非当前的背景颜色

html - Bootstrap- Left Columns 展开时使右列向下移动