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

Question

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

第一：

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%，但我不知道为什么。谁能告诉我为什么？

Answer 1

任何时候您将硬编码浏览器功能（ie、img.src="xxx.png" 加载图像）与复杂的 JavaScript 操作（ie ，$.ajax(几乎任何东西))，JavaScript 代码将会丢失。解释型脚本语言很难与它们正在编写的编译代码的速度相匹配。

Answer 2

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

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

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