流畅地重播大量图像（600+）

Question

我正在使用一个Web应用程序，该应用程序会在页面上填充大量图像。

布局与图像搜索类似，因为用户在页面顶部选择了一些设置，并且页面上立即充满了与其选择相对应的图像。

有时，在一个回调中最多可以生成600多个图像。它们是具有包含嵌入式svg的数据uri的img元素。

我的问题是关于性能的。 Javascript本身可以非常快速地完成，但是一旦将600个左右的图像添加到DOM中，浏览器就可以占用FIFTEEN SECONDS来完成所有重排。这一次浏览器冻结，菜单变得无响应，并且直到重排完成才显示更改。 （铬版66）

我是否有办法消除此瓶颈并使所有图像回流更快？例如使布局变得琐碎的CSS方法？如果我将所有图像制作成相同大小会有所帮助吗？

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

感谢您的帮助！

Answer 1

解决方案：浏览器在所有重排过程中都冻结的原因是我的代码正在同步执行，因此绑定了浏览器。

通过对每个图像执行setTimeout(function, 0)（其中function将图像添加到DOM）来使代码不同步，从而解决了问题。