Svelte 重新渲染虚拟图像列表会导致图像闪烁
Svelte re-rendering a virtual list of images causes images to flicker
我不确定我是应该在此处发布还是添加到 svelte creators github，但我这里有一个问题，可能需要在 svelte 方面应用修复程序。
我正在尝试渲染虚拟图像列表，方法是仅在 DOM 中显示在视口中的图像。
这是重现问题的基本 REPL：
https://svelte.dev/repl/d6c4617ada3b47d8b197b0e67820eba7?version=3.42.4
在我的电脑上，如果我出于某种原因使用 chrome 并打开开发工具，我只能非常清楚地看到它。当我滚动网格并且添加到 DOM 的图像列表发生变化时，图像会闪烁。
好像是 Svelte 所做的 DOM 操作导致了这种情况。
看起来，当我们将下一个项目滚动到视图中并隐藏之前的项目时，精巧的 Dom 操作算法会更改虚拟网格上所有图像的位置和来源，以在视口中显示适当的。
相反，如果它能够协调列表中的项目并保持滚动时留在视口中的项目不变，因此不会闪烁（我认为还发送网络请求），那就太好了。
我不确定是否可以在不直接使用精简代码的情况下实现这一目标。
也许可以分多个步骤操作项目列表，但不确定它是如何工作的。
这有两部分：
- 打开开发工具会发生这种情况，因为您很可能启用了“禁用缓存”。这意味着所有图像每次作为新图像元素的一部分出现时都会重新加载。没有打开开发工具或禁用“禁用缓存”，结果被缓存并且不会出现闪烁
- 您每次都用新项目重新分配列表，而 Svelte 不知道它可以重用现有节点并只是对其重新排序。不过，您可以在此处“帮助”Svelte 并为其提供提示以实现此目的：您需要指定一个唯一标识每个项目的键。这称为“键控每个块”。如果将每个块更改为
{#each tiles as tile (tile.im)}，则告诉 Svelte im 属性 是唯一标识项目的块，然后 Svelte 能够重用现有节点。文档：https://svelte.dev/docs#each
我不确定我是应该在此处发布还是添加到 svelte creators github，但我这里有一个问题，可能需要在 svelte 方面应用修复程序。
我正在尝试渲染虚拟图像列表，方法是仅在 DOM 中显示在视口中的图像。
这是重现问题的基本 REPL： https://svelte.dev/repl/d6c4617ada3b47d8b197b0e67820eba7?version=3.42.4
在我的电脑上，如果我出于某种原因使用 chrome 并打开开发工具，我只能非常清楚地看到它。当我滚动网格并且添加到 DOM 的图像列表发生变化时，图像会闪烁。
好像是 Svelte 所做的 DOM 操作导致了这种情况。
看起来，当我们将下一个项目滚动到视图中并隐藏之前的项目时，精巧的 Dom 操作算法会更改虚拟网格上所有图像的位置和来源，以在视口中显示适当的。
相反，如果它能够协调列表中的项目并保持滚动时留在视口中的项目不变，因此不会闪烁（我认为还发送网络请求），那就太好了。
我不确定是否可以在不直接使用精简代码的情况下实现这一目标。
也许可以分多个步骤操作项目列表，但不确定它是如何工作的。
这有两部分：
- 打开开发工具会发生这种情况，因为您很可能启用了“禁用缓存”。这意味着所有图像每次作为新图像元素的一部分出现时都会重新加载。没有打开开发工具或禁用“禁用缓存”，结果被缓存并且不会出现闪烁
- 您每次都用新项目重新分配列表，而 Svelte 不知道它可以重用现有节点并只是对其重新排序。不过，您可以在此处“帮助”Svelte 并为其提供提示以实现此目的：您需要指定一个唯一标识每个项目的键。这称为“键控每个块”。如果将每个块更改为
{#each tiles as tile (tile.im)}，则告诉 Svelteim属性 是唯一标识项目的块，然后 Svelte 能够重用现有节点。文档：https://svelte.dev/docs#each