为啥我的网站在我滚动时在 Chrome 中显示滞后？

Posted 2023-03-05

【中文标题】为啥我的网站在我滚动时在 Chrome 中显示滞后？

【英文标题】：Why does my website show lag in Chrome when I scroll?为什么我的网站在我滚动时在 Chrome 中显示滞后？

【发布时间】：2014-07-14 23:37:03

【问题描述】：

我只在 chrome 中遇到这个问题。当我上下滚动时，我面临滞后。这只发生在 Chrome 浏览器中，我有最新版本。网站基于 php 框架。任何人都可以找出问题吗？是网站问题还是浏览器问题？这是网站链接：http://airfuz.com 提前致谢。

【问题讨论】：

这里使用了简单的 PHP 代码。没有什么花哨。文章正在从 mysql 数据库中加载。

您有任何用于页面滚动/任何移动的 javascript/jquery 侦听器吗？

不，没有 javascript/jquery 侦听器用于页面滚动或任何类型的移动。

【参考方案1】：

我想说一个原因是中心的巨大图像。 （拿着谷歌眼镜的人）——这张图片超过 5000 像素 X 3400 像素+，但缩小到 500 像素左右。这与页面上的其他大图像一起。 http://airfuz.com/Images/2014/05/man-wearing-google-glass.jpg

当我删除该图像时，它滚动得更流畅...

考虑使用 php 缩略图脚本（如 timthumb 或 phpthumb）来实际提供接近显示尺寸的图像。这也将有利于网站的加载时间。

【讨论】：

您是否也面临 Chrome 的延迟问题？你能告诉我你是否在其他浏览器中遇到任何滞后？非常感谢。

是的，如果这就是您的意思，我在滚动时看到了一些“抖动”。这个问题在 Firefox 中很明显，但实际上只有在加载时才出现。

【参考方案2】：

您的网站有太大的资源同时加载。也许这就是问题的原因。这就是我以这个答案结束的原因：

加载网站资产时，滚动滞后。 （用 Chrome 和 Firefox 测试） 网站完全加载后，我的谷歌浏览器显示的延迟减少了。而另一方面，Firefox 则完全没有区别。

你可以缩减一些资产，我认为这会以某种方式减少延迟。

---

我注意到关于您的网站的一些事情，您使用的是 html5 Doctype。但是，您也在使用 HTML4 标记标签（我看到了 <center> 标签）。好吧，这可能不会影响问题，但这会影响 HTML5 有效性。 =)

嗯，希望我能帮上忙。

【讨论】：

感谢您的帮助。是的，因为我的主页上有很多内容，所以图片太多了。检查上一个答案，我想阻止滞后的唯一方法是缩小图像。再次感谢您的建议。如果有其他方法，请告诉我。

【参考方案3】：

谷歌浏览器notorious bug 问题 753053