html - 优化图像

标签 html css image

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

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

最佳答案

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

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

关于html - 优化图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7919935/

相关文章:

html - 忽略内联 block 的社交图标

图像 blob 到 base64

java - Java 中的可点击图像

javascript - 如何使用 javascript 创建 elementor block

javascript - 使用函数设置html img元素的高度

html - 为什么我的内容区域停在页脚之前?

html - 更改搜索栏的背景/文本颜色

Html 输入类型文本,带有用于 css 中表示的每个字符的插槽

javascript - 试图让按钮发挥作用,但我的警报弹出了书面脚本

html - 如何在 HTML 的标题属性中添加换行符/换行符