html - 优化图像

Question

在制作网页时，当我向表格中添加更多行时，我注意到性能(客户端)大幅下降。我表格中的每一行都包含相同的 4-5 个不同的 32x32 图标(指向操作的链接)和大约 100 个字符。当有 10 行时，网页运行流畅——滚动和 jQuery 动画都很流畅。现在我的表有 100 多行(不能选择分页)，动画真的很慢而且很粗糙。
有没有一种方法不是优化图像本身，而是优化代码以提高性能？

现在我在标签中有图像。如果我将它们更改为带有背景图像，会有什么不同吗？浏览器会不会加载更少？

Answer 1

如果图像是问题所在，很可能是因为客户端正在尝试为每一行重新下载图像，即使图像很小，这也是非常低效的。您可以使用 Fiddler 等工具测试这是否属实。通过检查每次重新加载页面时是否收到一大堆相同的请求。

如果这是问题所在，请查看 CSS sprites .使用这种方法，您可以向客户端提供 1 张图像，这一张图像将用于呈现所有行上的所有图标。