$(selector).load('page.html #id') 和 $.get 以及 filter/find #id 的区别

Question

我希望知道以下两者是否有性能上的差异（或者根本就没有区别）：

1.

``` 代码示例1 ```

2.

``` 代码示例2 ```

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

并且

$.get('page',function(data){
     $(selector).html( $(data).find('#myid') );
     /* depending the dom tree it should be .filter() */
})

- Toni Michel Caubet

---

@Alexander Sagen在https://dev59.com/2G865IYBdhLWcg3wU8-I中描述得非常好。 - Kamil T

两个示例基本上做的是相同的事情，参见源代码，即将响应解析为HTML，应用选择器并将结果插入到DOM中。我想性能差异可以忽略不计。 - jensgram

我也想知道这个。根据我的经验，load() 比自己“解析”结果更快。 - powerbuoy

但显然这可能只是我的想象。 - powerbuoy

没有明显的区别，特别是考虑到大部分时间都花在执行请求上。 - Ja͢ck

@Jack：我同意。我唯一能找到并且难以用言语表达的区别是get()相对于load()提供了额外的功能。然而，上面的简单示例并没有表明它们是必需的，所以load()应该完全可以胜任。此外，如果需要从文档中获取多个部分，则使用单个带有回调函数中的find()的get()比多个单独的load()请求更好。 - Nope

Answer 1

我会说使用load()或者.get()更多的是取决于你的意图和需求，而不是性能。 Load()

---

.load()用于轻松地加载整个文档或其中的一部分。
它将加载完整的文档，然后使用innerHTML解析HTML，仅返回您感兴趣的部分。

如果您只需要快速将某些内容加载到

中，则使用$(element).load(url, selector)。我认为load()针对这一点进行了优化。

Get()

---

与load()不同，.get()允许设置dataType以实现更大的灵活性，如JSONP用于跨域请求。它还实现了promise接口，使其具有Deferred Object的所有功能。

从文档中可以看到：

“Promise”接口还允许jQuery的Ajax方法（包括$.get()）在单个请求上链接多个.done()、.fail()和.always()回调，甚至在请求完成后分配这些回调。如果请求已经完成，回调将立即触发。 总结：

---

在基本层面上，简单的.load(url, selector)和.get(url, callback)之间不应该有任何值得注意的性能差异。使用任何一个都可以。

我认为，在这里没有对错之分。使用适合您需求的即可。

问问自己类似以下的问题：

您需要跨域（JSONP）吗？
您需要链接.fail(), .done()等吗？
您需要get()提供的任何load()没有的功能吗？
...

如果您使用load()或get()取决于您的要求。在这种情况下，性能是次要的。

- Nope

---

但是整个文档仍然需要下载...假设在一个单一的情况下。只需要一个选择器。 - Toni Michel Caubet

“不允许传递数据对象”是什么意思？你是说.load()不能执行POST吗？ - Ja͢ck

@ToniMichelCaubet：它们都可以让你传递数据。在发布前我忘了从模板中删除它们。对此我深感抱歉。我想编辑我的帖子，突出更多load()和get()之间的差异，使其更清晰，应该优先考虑“哪种方法满足我的需求”，而只关注性能其次。例如，如果需要进行跨域调用或需要使用延迟对象等，则快速的load()调用是没有意义的。希望这有意义。并没有绝对正确或错误的方法。你可以根据自己的需求来选择。 - Nope

@ToniMichelCaubet：我能想到的另一件事是，如果您想从一个文档中获取多个部分，则使用单个get()和回调中的find()比多个单独的load()请求更好。 - Nope

你有这个的模板吗？;-) - Ja͢ck