浏览器在使用img内部渲染5600 div的网格时速度很慢

Question

让我们说我有一个javascript，经过一些计算后，写一个像

这样的字符串

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

需要字符串来填充＆＃34;网格＆＃34;图像，我需要每秒至少更新15次字符串。

问题是，正如您可能猜到的那样，浏览器在完成这项工作时非常缓慢......

关于如何改进＆＃34;渲染＆＃34;的任何想法时间？

任何意见都赞赏。

Answer 1

@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";
}