javascript - 为什么 JS 预加载看起来比加载常规图像引用花费的时间更长？

Question

我在一个循环中预加载了一堆图像。其中一个
这些图像也由 html 加载，所以我很好地了解了如何
这两种不同的方法执行。对于测量，我使用
清除缓存后，Safari Web Inspector 的网络面板。

ClownFish 图像是 280KB，当被 HTML 引用时需要 14 毫秒
load，而preload中JS引用的极光图为
116KB，加载需要 77 毫秒。

var images = ['Aurora', 'ClownFish', 'DewDrop', 'EarthHorizon',  'FlowingRock', 'GentleRapids', 'GoldenPalace'];
images.each(function(elm){
    var path = elm + '.jpg';
    var preload = new Image();
    preload.setAttribute('src',path);
});

这是设置 Image() 然后分配的全部开销吗
它的src？有什么办法可以加快速度吗？

Answer 1

您是否检查过 Firefox 中是否也是这种情况(使用 Firebug)？那些加载时间是检索图像本身需要多长时间？或者是从请求开始到加载图像需要多长时间？

如果是后者，它可能与 javascript 在页面上加载的位置/时间有关，或者浏览器已经对图像所在的域发出了太多请求，并且必须等到其中一些完成之前预加载您的图片。

如果您根本不预加载图像，我也很想知道加载时间有多长。如果所有图像都是通过 html 加载的，那么所有图像的加载时间都会很短吗？如果不是，则可能是 Web 服务器的问题。