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

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

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

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

Answer 2

每当您将硬编码的浏览器功能（即，img.src="xxx.png"加载图像）与复杂的JavaScript操作（即，{{1 }}，JavaScript代码将会丢失。解释的脚本语言很难与他们编写脚本的编译代码的速度相匹配。

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

2 个答案: