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

Question

我为一家公司做了一些第三方 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;
}

jQuery:

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

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

Answer 1

差别很小，不值得写那 10 个字符...

As always, remember that as a developer, your time is typically the most valuable resource. Do not focus on optimization of selector speed unless it is clear that performance needs to be improved.

jQuery site

当然 jQuery 比 id 选择器有更多的特性...

---

一个好的建议是缓存查询的元素并且不要多次查询它们，但是对于 jQuery 和 vanilla javascript 都是如此；

来自:

document.getElementBy('id').value = "foo";
document.getElementBy('id').parentNode.className = "parent";

收件人:

var element = document.getElementBy('id')
element.value = "foo";
element.parentNode.className = "parent"

或 jQuery 版本:

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

由于 jQuery“chainabilty”——级联风格，你可以用一个“chain”来做到这一点:

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

---

This jsperf显示 $('#id') 比 document.getElementById
慢 3-6这意味着您每秒“只能”进行 1,000,000 次这样的操作……“一场灾难”!

“我们应该忘掉小效率，比如大约 97% 的时间:过早优化是万恶之源”

---

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

• 当前缩小版的 jQuery (1.7.2) 大小仅为 32K，这几乎可以肯定比您网站中的大多数图像都小，因此可以忽略不计。
• 您可以使用 jQuery 的 google 全局缓存副本，在 this long blog post 中阅读更多相关信息.

No matter how well optimized your site is, if you’re hosting jQuery locally then your users must download it at least once. Each of your users probably already has dozens of identical copies of jQuery in their browser’s cache, but those copies of jQuery are ignored when they visit your site.

However, when a browser sees references to CDN-hosted copies of jQuery, it understands that all of those references do refer to the exact same file. With all of these CDN references point to exactly the same URLs, the browser can trust that those files truly are identical and won't waste time re-requesting the file if it's already cached. Thus, the browser is able to use a single copy that's cached on-disk, regardless of which site the CDN references appear on.