html - 用于一次加载大量图像的 rendersubtree？

Question

我在服务器上有很多图像 (40.000) 以及它们在数据库表中的引用 - 名称、大小、日期、描述等。

尝试一次加载所有图像，但只有 100 张是可见的，其余的被 css 隐藏 - display:none 并通过向下滚动变为可见。

结果 - 页面加载时间过长，新图像显示速度非常慢。

所以我回到旧方法 - 分页 - 逐步加载图像，单击 next-prev 按钮。

现在我看到了一个新的 chrome 功能 - rendersubtree

这个东西是否可以成为一次加载所有 40.000 张图像并通过流畅滚动使它们可见的解决方案？

如果是 - 请给出任何代码示例。

谢谢。

Answer 1

这取决于您的页面缓慢的原因。如果您使用 display:none 来隐藏一大堆内容，则 rendersubtree 在这种情况下不太可能提供帮助。

还有一个 img 解码 API 可能对您的情况有所帮助 https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode

但在您开始之前，我建议您先进行一些分析，以确定流程的哪一部分是缓慢的。 (img 加载/布局/等)