javascript - 浏览器渲染包含 img 的 5600 div 网格时速度缓慢

Question

假设我有一个 JavaScript，经过一些计算后，写出一个像这样的字符串

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

需要该字符串来填充图像“网格”，并且我需要每秒至少更新该字符串 15 次。

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

关于如何改善“渲染”时间有什么想法吗？

欢迎任何意见。

Answer 1

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