流畅地重排大量图像 (600+)

Question

我正在开发一个使用大量图像填充页面的 web 应用程序。

它的布局类似于图像搜索，用户在页面顶部选择一些设置，页面会立即充满与她的选择相对应的图像。

有时在一次回调中生成多达 600 多张图像。它们是具有包含嵌入 svg 的数据 uri 的 img 元素。

我的问题是关于性能的。 Javascript 本身完成得非常快，但是一旦将 600 张左右的图像添加到 DOM 中，浏览器可能需要 15 秒才能完成所有重排。浏览器此时会冻结，菜单变得无响应，并且在重排完成之前不会显示任何更改。 （铬版本 66）

有没有办法让我消除这个瓶颈并使所有图像更快地重排？例如，使布局变得微不足道的 CSS 方法？如果我将所有图像都设置为相同大小会有帮助吗？

如果不能加快速度，有没有办法在不阻止用户与页面交互的情况下进行重排？

感谢您的帮助！

Answer 1

解决方案：在所有重排期间浏览器冻结的原因是因为我的代码正在同步执行，因此占用了浏览器。

通过为每个图像执行setTimeout(function, 0) 使代码异步，其中function 将图像添加到DOM，解决了问题。