3

I would like to know if there is any difference in perfomance (or difference at all)

Between this:

$(selector).load('page #myid');

and

$.get('page',function(data){
     $(selector).html( $(data).find('#myid') );
     /* depending the dom tree it should be .filter() */
})
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
  • 1
    @Alexander Sagen described it very well in http://stackoverflow.com/questions/3870086/difference-between-ajax-and-get-and-load – Kamil T May 28 '13 at 11:40
  • 2
    Both examples will pretty much do the same, cf. [the source](https://github.com/jquery/jquery/blob/master/src/ajax.js#L133), i.e., parse the response as HTML, apply the selector and insert the result into the DOM. I guess the performance differences are negligible. – jensgram May 28 '13 at 11:47
  • I would like to know this as well. In my experience load() is faster than "parsing" the result yourself. – powerbuoy May 28 '13 at 11:54
  • But obviously it could just be my imagination – powerbuoy May 28 '13 at 11:55
  • 1
    There's no appreciable difference, especially considering that most time is spent in performing the request. – Ja͢ck May 28 '13 at 12:37
  • @Jack: I agree. The only difference I was able to find and had a hard time putting into words was the added functionality that `get()` offers over `load()`. However, the simple example above does not indicate that they are needed so `load()` should be perfectly fine. In addition if multiple sections from a document would be required, then a single `get()` with `find()` in the callback is better than multiple individual `load()` requests. – Nope May 28 '13 at 12:49

1 Answers1

1

I would say using load() or .get() is more to do with your intentions and requirements rather than performance.

Load()

.load() is for easy/simple loading of a document or a portion of it.
It will load the complete document and then using innerHTML parse the HTML to return only the portion you are interested in.

If you only need a fast way of loading some content into a div then $(element).load(url, selector) is the way to go. I would assume load() is optimised for just that.

Get()

Unlike load(), .get() allows setting of the dataType for greater flexibility such as JSONP for cross-domain requests.

It also implements the promise interface, giving it all the features of a Deferred Object.

From the docs:

The Promise interface also allows jQuery's Ajax methods, including $.get(), to chain multiple .done(), .fail(), and .always() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

Summary

On a very basic level, there should be no worth-while performance difference between a simple .load(url, selector) and .get(url, callback). Using either should be fine.

I would think, there is no right or wrong here as such. Use what ever suits your needs.

Ask yourself question similar to:

Do you need cross-domain (JSONP)?
Do you need to chain .fail(), .done(), etc. ?
Do you need any of the features get() offers which load() does not have?
...

If you use load() or get() depends on your requirements. Performance is secondary in this case.

Nope
  • 22,147
  • 7
  • 47
  • 72
  • But the whole document must be downloaded anyways... Lets say in a single case. With only one selector needed – Toni Michel Caubet May 28 '13 at 11:56
  • What do you mean by "does not let you pass a data object"? Are you saying that `.load()` cannot perform `POST`? – Ja͢ck May 28 '13 at 12:35
  • @ToniMichelCaubet: they both let you pass data. I forgot to delete those from my template before I hit post. Apologise for that. I wanted to edit my post to highlight more of the differences between `load()` and `get()` to make it clearer that the primary focus should be on "Which method satisfies my needs" and only to look at performance secondary. For example, there is no point having a fast `load()` call if you would need to make a cross-domain call or require the use of deferreded objects etc. Hope it makes sense. There is no right or wrong as such. You use what ever suits your needs. – Nope May 28 '13 at 12:39
  • @ToniMichelCaubet: the only other thing I could think of was that if you want multiple sections from a document, then a single `get()` with `find()` in the callback is better than multiple individual `load()` requests. – Nope May 28 '13 at 12:51
  • It was @Jack who asked about the data object – Toni Michel Caubet May 28 '13 at 12:55
  • @Jack: I accidentally adressed the reponse to `ToniMichelCaubet`. That was my bad. You can POST with load off course. I had a list of differences in my template I noted and 1 by 1 going through them to verify them. I had forgotten to delete the data object references. Thank you again for noticing. – Nope May 28 '13 at 13:07
  • You have a template for this? ;-) – Ja͢ck May 28 '13 at 13:09
  • @Jack: Template might not be the right word. In the recent major edit I started by adding bullet points of `can-do/can't-do` features and then fleshed the post out while verifying the points. Not directly a template I guess :) – Nope May 30 '13 at 09:04