Javascript 加载和使用jQuery对性能的负面影响有多大？

我为一家公司做了一点第三方javascript工作，我可以将我的javascript片段输入CMS，并在面向客户的网站上运行。 我可以选择打开站点标题中的

JQuery 1.7.1

，我通常选择这样做或不这样做，这取决于如果我不这样做，代码会变得多么复杂

我经常想知道，如果我在所有情况下都打开它，会有多大的不同，即使是简单的事情，比如：

document.getElementById('myElement');

变成

$('#myElement');

“断点”在哪里决定切换JQuery更好/更有效/更容易

今天的例子让我想到了这一点，如下所示（常规javascript和JQuery等价物）：

Javascript:

if (document.getElementById('myElement')!== null) {
    var oldText = document.getElementById('myElement').innerHTML,
    newText = oldText.replace(/one/i,'two');
    document.getElementById('myElement').innerHTML = newText;
}

if ($('#myElement').length !== 0) {
    var oldText = $('#myElement').html(),
    newText = oldText.replace('one','two');
    $('#myElement').html(newText);
}

jQuery:

if (document.getElementById('myElement')!== null) {
    var oldText = document.getElementById('myElement').innerHTML,
    newText = oldText.replace(/one/i,'two');
    document.getElementById('myElement').innerHTML = newText;
}

if ($('#myElement').length !== 0) {
    var oldText = $('#myElement').html(),
    newText = oldText.replace('one','two');
    $('#myElement').html(newText);
}

---

强制客户端下载jQuery的负面影响有多大？

差别将很小，不值得写这10个字符

一如既往，请记住，作为一名开发人员，您的时间通常是最宝贵的资源。除非性能明显需要改进，否则不要将重点放在选择器速度的优化上

当然，

jQuery

比id选择器有更多的功能

---

一个很好的建议是缓存查询的元素，而不是多次查询它们，但是

jQuery

和vanilla javascript都是如此

发件人：

致：

或jQuery版本：

var $element = $('#id');
$element.val("foo");
$element.parent().addClass("parent");

由于jQuery的“chainability”-级联样式文件，您可以使用一个“chain”来实现这一点：

---

显示

$（'#id'）

比

document.getElementById

这意味着每秒只能进行1000000次操作“一场灾难”

“我们应该忘记小效率，比如说97%的时间是不成熟的 优化是万恶之源“

---

关于jQuery库的“加载”-下载时间。

• 当前jQuery（1.7.2）的缩小版大小只有32K，几乎可以肯定比你网站上的大多数图片都小，所以可以忽略不计
• 您可以使用jQuery的google全局缓存副本，请在中阅读更多关于它的信息

无论您的站点优化得有多好，如果您在本地托管jQuery，那么您的用户必须至少下载一次。每个用户的浏览器缓存中可能已经有几十个相同的jQuery副本，但是当他们访问您的站点时，这些jQuery副本将被忽略

但是，当浏览器看到对jQuery的CDN托管副本的引用时，它知道所有这些引用都引用了完全相同的文件。由于所有这些CDN引用指向完全相同的URL，浏览器可以相信这些文件确实是相同的，并且不会浪费时间重新请求已经缓存的文件。因此，无论CDN引用出现在哪个站点上，浏览器都能够使用缓存在磁盘上的单个副本

---

如果不添加jQuery，您的普通JS本身可能会更加高效：

var obj = document.getElementById('myElement');
if (obj) {
    obj.innerHTML = obj.innerHTML.replace(/one/i,'two');
}

在同一函数中重复同一选择器操作多次时，通常应将其缓存到局部变量中，而不需要在此处使用任何其他临时变量

仅供参考，如果您想要

getElementById（）

的快捷方式，您可以非常轻松地定义自己的快捷方式，而无需为此包含整个库

window.$ = function(id) {
    return(document.getElementById(id));
}

还有比jQuery小得多的库，它们提供了基本的选择器操作。jQuery本身使用Sizzle库，当我只需要选择器操作时，我经常使用它

---

如果您使用/需要jQuery提供的许多东西，我并不反对jQuery。它对于ajax和许多DOM操作函数特别有用。但是，如果您的需求很简单，那么如果站点效率/速度/大小很重要，那么通常有比包含所有jQuery更有效的方法。如果jQuery包含在主页上，您也可以将其包含在其他任何地方，因为它将缓存在主页之后。（或通常用于此问题的任何其他页面）我非常怀疑您是否会注意到这种差异您还可以通过将

document.getElementById（'myElement'）

缓存到变量来提高速度。但是，只有在多次运行此序列时，您才会注意到改进。您的标题询问如何加载jQuery，而帖子正文询问如何使用jQuery。稍微挑剔@gdoron！我需要加载Jquery才能使用它。我的观点是，知道加载JQuery需要额外的“开销”（很抱歉，我不是一个网络高手，所以可能也没有正确地使用这个术语！），在什么情况下加载它而不是在普通js中使用额外的代码会让我受益呢？一旦客户端下载了JQuery，它就会被缓存。@ErikPhilips。这是非常正确的，因为他没有问这个问题。如果你从一个CDN加载jQuery，如果用户访问过的任何其他站点使用与你相同的CDN和版本，那么在他们第一次访问你的站点之前，它就已经存在了。Ex:Up投票支持“除非性能明显需要改进，否则不要关注选择器速度的优化。”+1 jsperf，然后将其纳入考虑范围。注意：在

和.addClass（“父类”）的末尾都缺少一个“s。谢谢@jfriend00的建议。出于某种原因，在我写这篇文章之前，我认为尝试为页面上未找到的内容设置var会引发错误？这就是为什么我要先做if陈述。。刚刚用你的版本修改了我的实例，它运行得非常好，没有错误，所以不确定我以前在做什么！并且您的obj.innerHTML=obj.innerHTML.replace（/one/i，'two'）；现在我明白了，这个例子很有道理！！我还有
window.$ = function(id) {
    return(document.getElementById(id));
}