2011-10-27 121 views
1

在制作网页时,我注意到在向表中添加更多行时性能(客户端)性能大幅下降。我表格中的每一行由相同的4-5个不同的32x32图标(操作链接)和大约100个字符组成。当有10行时,网页流畅运行 - 滚动和jQuery动画流畅。现在我的桌子有100多行(分页不是一个选项),动画真的很慢,很粗糙。
有没有办法优化图像本身,但代码,以提高性能?优化图像

现在我有标签中的图像。如果我将它们改为背景图像,它会有什么区别吗?浏览器会减少加载吗?

回答

1

如果图像出现问题,很可能是因为客户端试图为每一行重新下载图像,即使图像很小,效率也非常低。您可以使用诸如Fiddler之类的工具,通过检查每次重新加载页面时是否收到大量相同的请求来测试这种情况是否属实。

如果这是问题,请查看CSS sprites。使用这种方法,您可以将1个图像传送到客户端,并且这个图像将用于渲染所有行上的所有图标。

+0

谢谢你的回复,我很担心这个问题,但这对我来说没有多大意义,因为问题在于系统的后端。更让我困扰的是,如果将相同的图像分别存储在RAM中,我只需要对浏览器使用的方法进行一些解释。怎么样的精灵 - 如果图像下载一次,客户端存储一次或多次,因为我们在标记/ CSS中引用它?谢谢你的提琴手工具,将研究它。 –

+0

@Vlakarados:只要你用于加载/检索图像的URL是固定的,客户端浏览器应该足够聪明,可以将图像存储一次,并在将元素绘制到窗口中时根据需要重用。 – Briguy37