浏览器在渲染包含img的5600个div的网格时速度较慢

Question

假设我有一个javascript，经过一些计算，可以编写一个类似的字符串

str += '<div class="divClass"><img class="imgClass" src="all_images/'+ result_image +'.png" /></div>';

这个字符串是用来填充图像的"网格"的，我需要每秒至少更新这个字符串15次。

问题是，正如你可能猜到的，浏览器做这项工作的速度真的很慢。。。

关于如何提高"渲染"时间有什么想法吗？

感谢任何意见。

Answer 1

这是加载5600个单独的图像吗？如果是这样的话，如果图像很小，你可以尝试将它们组合成一个精灵，然后调用单个图像，并指定背景位置以在给定位置显示单个图像。减少5000多个图像调用将大有帮助。

Answer 2

@Lucio延迟的一部分是浏览器需要用每个新创建的div重建DOM。首先尝试用HTML构建网格，然后只需要填写图像文件信息，即

imgs = document.querySelectorAll(".divClass img");
for(x=0; x<imgs.length; x++ ) {
   imgs[x].src = "all_images/'+ result_image[x] +'.png";
}