Performance 网站上的滚动行为非常缓慢…；

我目前正在这个网站上工作

在浏览网站或使用上下箭头键导航时，您会注意到一种非常缓慢的滚动行为

知道是什么原因吗？我使用的是HTML5和简单的

img

标签，宽度和高度分别为85%和85%。Javascript不是原因。如果我完全摆脱所有的JS，它仍然是缓慢的

知道是什么原因吗？我想在滚动时提高这个网站的性能

---

感谢您的帮助。

尝试缩小图像的比例，我认为这与js有关。

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

可考虑的备选方案：

• 仅当用户向图像滚动时加载图像（加载完成后淡入淡出，以使图像看起来更漂亮）
• 加载图像后，删除/隐藏它们，直到用户滚动到它们，这样客户端就不必一直渲染所有图像（

  不透明度：0；

  将不起作用，但

  显示：无；

  或

  可见性：隐藏；

  可能会。您也可以直接删除节点，如果您重新添加它们，它们将立即加载，因为它们将被缓存。）
• 将每个部分拆分为自己的页面。我知道它没有那么优雅，但可能是必要的。不是每个人都有400美元的GPU

---

这里有很多图像，使此过程更加平滑的一种方法是异步添加和删除图像。这将允许页面内存保持较低，并且加载/显示图像的计算能力较低。逻辑很简单：当您在一张幻灯片上时，加载+5/-5张幻灯片的图像。（某些幻灯片有多个图像，因此我们将以幻灯片为基础）。使用箭头键事件并添加滚动事件来调用异步方法，以确定要加载的幻灯片以及要删除任何标记的幻灯片。

你可以通过简单地用文本替换所有图像来测试记忆概念。你的体验应该会大大提高

---

注意：您必须使用CSS来保持图像容器的恒定高度，以便您的滚动高度不会改变并取代视图窗格。

滚动对我来说非常平滑，但上/下箭头键不稳定。您确定JS不是问题吗？您知道滚动时加载图像的最佳方式吗？您会怎么做这样做？会的。就像@MattLo说的，你需要在你的图像上声明一个高度，这样滚动高度就准确了。你可能想看看插件的源代码，然后自己写，从概念上讲，它很容易实现。