jQuery: get() is slower compared to load()

Question

Obvious question - why?

I need to get from external page table cell, and then inject it to the current page. Complex selectors are used.

This is with .load():

$('#check').load('https://bla-bla-bla .small:contains(Something)+.small:lt(1)');

This is with .get():

function showGetResult()
{
     var result = null;
     var scriptUrl = "https://bla-bla-bla";
     $.get(scriptUrl, function(data) {
            result = $(".small:contains(Something)", data).next().html() || "Error";
            $('#check').append(result);
     });
}

load() get data faster by average 1-2 seconds. But I like get() - since I can have string result, not an object.

Can someone explain why load() works faster?

Answer 1

Because I'd love to find the answer to this myself, I figured it would be nice to provide some resources to help:

---

AJAX jQuery.load versus jQuery.get:

First of all those two functions are completely different. The 'load' function works with selectors and loads the result of AJAX call inside the selected group and the callback is to handle the "oncomplete" event of the call; while the $.get function is more general and the callback handles the success response of AJAX call where you are free to define any behavior you want. And you can find all this information just by looking at the documentation and specification of the jQuery framework.

---

Difference between $.ajax() and $.get() and $.load()

$.get() is just a shorthand for $.ajax() but abstracts some of the configurations away, setting reasonable default values for what it hides from you. Returns the data to a callback. It only allows GET-requests so is accompanied by the $.post() function for similar abstraction, only for POST

.load() is similar to $.get() but adds functionality which allows you to define where in the document the returned data is to be inserted. Therefore really only usable when the call only will result in HTML. It is called slightly differently than the other, global, calls, as it is a method tied to a particular jQuery-wrapped DOM element. Therefore, one would do: $('#divWantingContent').load(...)

---

Seems $.get and $.load both use $.ajax functionality, but in different ways. Perhaps the performance difference lies in the time it takes to parse the returned data?

Maybe the real question is how long do each of these take to send the request to the external URL (a "ping" time), and then how does that compare with processing the returned data?