我正在开发一个用大量图像填充页面的网络应用程序。
它在布局上类似于图像搜索，因为用户在页面顶部选择一些设置，页面会立即充满与她的选择相对应的图像。
有时在一个回调中生成多达 600 多张图像。它们是带有包含嵌入 svg 的数据 uris 的 img 元素。
我的问题是关于性能的。 Javascript 本身完成得非常快，但是一旦将 600 张左右的图像添加到 DOM 中，浏览器最多可能需要 15 秒才能完成所有重排。浏览器此时卡住，菜单变得无响应，并且在回流完成之前不会显示任何更改。 ( Chrome 版本 66)
有没有办法让我消除这个瓶颈并使所有图像回流更快？例如，一种使布局变得微不足道的 CSS 方法？如果我将所有图片制作成相同大小会有帮助吗？
如果不能加速，有没有办法在不阻止用户与页面交互的情况下进行回流？
感谢您的帮助!
最佳答案
解决方案:浏览器在所有回流期间卡住的原因是因为我的代码是同步执行的，因此占用了浏览器。
通过为每个图像执行 setTimeout(function, 0) 使代码异步，其中 function 将图像添加到 DOM，解决了问题。
关于javascript - 顺利回流大量图像(600+)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51156937/