两种加载图片的方式，为什么使用ajax更快？答案

【问题标题】：Two ways to load image, why is using ajax faster?两种加载图片的方式，为什么使用ajax更快？
【发布时间】：2011-12-24 09:56:21
【问题描述】：

我有两种加载图片的方法，测试加载速度。

第一：

var img = document.createElement("img");
var date1 = new Date().getTime();
img.src = "xxx.png";
img.onload = function() {
    var date2 = new Date().getTime();
    var delta = date2 - date1;
};

第二：

var date1 = new Date().getTime();
$.ajax({ url: "xxx.png",
         data: { _s: new Date().getTime(), },
         success: function () {
             var date2 = new Date().getTime();
             var delta = date2 - date1;
         }
       });

以上两种方式我测试过很多次。第二个比第一个慢 30%，但我不知道为什么。谁能告诉我为什么？

【问题讨论】：

Ajax 对我来说比较慢。 jsfiddle.net/f9zRT
是的，我也是，但我就是不知道究竟是为什么。
等待 - @pimvdb 说 second 方式（“ajax”）较慢，但您的问题说它更快。
@Pointy：这就是我在 Chrome 15 上遇到的问题。也许是因为 jQuery 开销——你能告诉我你遇到了什么吗？
对不起，我刚刚弄错了。第一种方式比第二种方式（ajax）快。

标签： javascript html ajax dom

【解决方案1】：

当您将文件加载为图像时，浏览器会解码“.png”编码以准备显示图像。它不会调用你的“加载”处理程序，直到它知道它是一个好的图像。在第二种情况下，您只是获取数据，因此浏览器并不关心它是否是有效的“.png”文件。

无论如何，这是我的赌注。我很确定如果您以第一种方式加载随机数据文件（不是图像），您的“加载”处理程序将永远不会被调用。

edit 原来问题中的“错误”使得这个答案背后的猜测基本上毫无价值。（最初的问题是第二个——ajax——比通过新构建的图像加载更快。）

【讨论】：

是的，它只在文件是图像时调用。但在你看来，第二种方法更快，它与我的测试结果不符。
@piggy_Yu 但是您在问题中明确指出，“第二个比第一个快 30%”。
问题是，当您尝试对只需要几百毫秒的事情进行计时时，有许多系统效应会产生影响。你只是在加载一个“favicon”文件；尝试使用数兆字节的图像进行测试。
是的，我测试了一个 10M 大小的图像，并得到了结果。我觉得很有用。

【解决方案2】：

当您将硬编码的浏览器函数（ie、img.src="xxx.png" 加载图像）与复杂的 JavaScript 操作（ie、$.ajax(almost anything)）进行比较时， JavaScript 代码将会丢失。解释性脚本语言很难与它们正在编写的已编译代码的速度相匹配。

【讨论】：

现在 JavaScript 是及时编译的，所以它可能不是解释器相关的问题。
@Ross，我认为这两种方式都需要解释，这不是重点。