在网站上滚动行为真的很迟钝......

时间:2012-01-21 17:38:49

标签: performance html5 css3

我目前正在使用此网站... http://bit.ly/yR6xzta

在滚动网站或使用向上和向下箭头键导航时,您会发现滚动行为非常缓慢且缓慢。

知道是什么原因引起的吗?我正在使用HTML5和简单的img标签,宽度为85%,高度为85%。 Javascript不是原因。如果我彻底摆脱所有JS,它仍然是迟钝的。

知道是什么造成的吗?我希望在滚动时提高此网站的性能。

感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

这里有相当多的图像,使这个过程更顺畅的一种方法是异步添加和删除图像。这将允许页面内存保持较低并且加载/显示图像的计算能力较低。逻辑很简单:当你在一张幻灯片上,加载+ 5 / -5幻灯片'图像(一些幻灯片有多个图像,所以我们将它放在幻灯片上)。 使用箭头键事件并添加滚动事件以调用异步方法以确定要加载的幻灯片以及删除任何标记的幻灯片。

您可以通过简单地用文本替换所有图像来测试内存概念。你的经历应该有很大的改善。

注意:您必须使用CSS来保持图像容器的高度恒定,这样您的滚动高度就不会改变并取代您的视图窗格。

答案 1 :(得分:0)

尝试缩小图像尺寸,我认为这与js相关。

答案 2 :(得分:0)

我的游戏装备上的滚动和方向键都很平滑,而且我的Chromebook基本无法使用。它的长短是你在一个页面上有5100万像素的图像(大概10MB左右?)。移动它时的性能将在很大程度上取决于浏览器如何处理它(硬件加速与否)以及硬件本身。对于将电源管理融入操作系统的笔记本电脑来说尤其如此。例如,JS无法触发切换到专用图形,这意味着将所有这些像素移动到CPU(实际上不是它的意图)。

要考虑的选项:

  • 仅在用户向它们滚动时加载图像(在加载图像时将它们淡入以使它们看起来很漂亮)
  • 加载图片后,删除/隐藏图片,直到用户滚动到图片,以便客户端不必一直呈现所有图片(opacity: 0;不起作用,display: none;或{ {1}}可能。您也可以直接删除节点,如果将它们重新添加,它们将在以后加载,因为它们将被缓存。)
  • 将每个部分拆分为自己的页面。我知道它不是那么优雅但可能是必要的。不是每个人都有400美元的GPU ......