页面速度小页面大小与 Dom 元素的数量

Question

我有一个关于网站页面速度的问题。请参阅我有一张原始大小为 100k 的图片，用于页面中的 3 个不同位置。并且在3个不同的位置图片的大小是不同的。 3个位置的最大尺寸是100k pic。当我运行 Chrome 页面速度时，它建议我为其他 2 个较小尺寸的位置提供比例图像。

请问图片是否只有1个100K大小，在3个图片位置，浏览器是从服务器获取图片3次还是一次？

这导致我现在的问题是我应该提供缩放图像并拥有更多 dom 元素但减小页面大小还是应该提供 100K 图像并且浏览器只获取一次？

如果我要提供缩放图像，那么浏览器将不得不从服务器请求 3 个不同尺寸的同一图像，这可能会增加而不是减少加载时间。

Answer 1

只要您将图像作为可缓存的（这是默认设置），浏览器只会下载一次。所以最好只引用图像的一个版本。