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?

I don't believe there would ever be such a huge discrepancy between `load` and `get`. 99% of both of these methods' execution time is related to network traffic (`XMLHttpRequest`). — Fabrício Matté, Dec 25 '13 at 10:54
Loading a full page for only a part of it is almost always bad practice. If there is any way you can request the content you're now selecting with a jquery selector using a separate URL you can use `$.get` and it will be much faster. — Koen., Dec 25 '13 at 10:56
Also, "1-2 seconds" is either an exaggeration or A. The response is really HUGE; B. The server takes too much time processing the request or C. Your connection is very slow. Open your DevTools' Network tab to get some more accurate timings. — Fabrício Matté, Dec 25 '13 at 11:18

score 2 · Answer 1 · edited May 23 '17 at 12:03

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?

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

1 Answers1