浏览器在渲染 5600 个 div 的网格时速度很慢，里面有 img

Question

假设我有一个javascript，经过一些计算，写出一个像

这样的字符串

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

需要字符串来填充 "grid" 个图像，我需要每秒至少更新字符串 15 次。

问题是，正如您可能猜到的那样，浏览器执行此工作的速度非常慢...

关于如何改进 "rendering" 时间有什么想法吗？

感谢任何意见。

Answer 1

这是在加载 5600 张单张图片吗？如果是这样，如果图像非常小，您可以尝试将它们组合成 sprite，然后调用单个图像，并指定背景位置以在给定位置显示单个图像。减少 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";
}