Svelte 重新渲染虚拟图像列表会导致图像闪烁

Question

我不确定是否应该在此处发布此内容或添加到 svelte creators github，但我在这里遇到了一个问题，可能需要在 svelte 方面进行修复。

我正在尝试通过仅在 DOM 中显示在视口中的图像来呈现图像的虚拟列表。

这是重现该问题的基本 REPL： https://svelte.dev/repl/d6c4617ada3b47d8b197b0e67820eba7?version=3.42.4

在我的电脑上，我只有在使用 chrome 并出于某种原因打开开发工具时才能非常清楚地看到它。当我滚动网格并且添加到 DOM 的图像列表发生变化时，图像会闪烁。

好像是 Svelte 所做的 DOM 操作导致了这种情况。

看起来，当我们将下一个项目滚动到视图中并隐藏之前的项目时，苗条的 Dom 操作算法会更改虚拟网格上所有图像的位置和来源，以在视口。

如果相反，它能够协调列表中的项目并保持滚动时留在视口中的项目不改变，因此不闪烁（我认为也发送网络请求），那就太好了。

如果不直接使用纤细的代码，我不确定是否可以实现这一点。

也许可以分多个步骤操作项目列表，但不确定如何操作。

Answer 1

这有两个部分：

1. 开放式开发工具会发生这种情况，因为您很可能启用了“禁用缓存”。这意味着所有图像每次作为新图像元素的一部分出现时都会重新加载。如果没有打开开发工具或禁用“禁用缓存”，结果会被缓存并且不会出现闪烁
2. 您每次都为列表重新分配新项目，而 Svelte 不知道它可以重用现有节点并重新排序。不过，您可以在此处“帮助”Svelte，并给它一个提示以实现此目的：您需要指定一个唯一标识每个项目的键。这称为“键控每个块”。如果您将每个块更改为 {#each tiles as tile (tile.im)}，您告诉 Svelte im 属性是唯一标识项目的属性，然后 Svelte 能够重用现有节点。文档：https://svelte.dev/docs#each