Два способа загрузки изображения. Почему 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

Когда вы загружаете файл как изображение , браузер декодирует кодировку ".png", чтобы подготовить изображение для отображения. Он не вызывает ваш обработчик «load», пока не узнает, что это хорошее изображение. Во втором случае вы просто извлекаете данные, поэтому браузеру все равно, является ли это действительный файл «.png» или нет.

В любом случае, это моя ставка. Я уверен, что если вы загрузите файл случайных данных (не изображение) первым способом, ваш обработчик «загрузки» никогда не будет вызван.

edit Что ж, "ошибка" в исходном вопросе делает спекуляции, стоящие за этим ответом, в основном бесполезными. (Первоначальный вопрос гласил, что второй & mdash; ajax & mdash; был быстрее , чем загрузка через вновь созданное изображение.)

Answer 2

Каждый раз, когда вы сравниваете жестко закодированную функцию браузера ( т.е. , img.src="xxx.png" загрузка изображения) со сложной операцией JavaScript ( т.е. , $.ajax(almost anything)), JavaScriptкод потеряет.Интерпретируемым языкам сценариев трудно соответствовать скорости компилируемого кода, который они создают.