3

我为一家公司做了一些第三方 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 的负面影响有多大？

4

2 回答 2

7

差异很小，不值得写这 10 个字符......

与往常一样，请记住，作为开发人员，您的时间通常是最宝贵的资源。不要专注于优化选择器速度，除非很明显需要提高性能。

jQuery 网站

当然jQuery还有比 id 选择器更多的功能......

一个好的建议是缓存查询的元素而不是多次查询它们，但无论是使用原生javascript还是使用jQuery原生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");

这jsperf表明$('#id')比这慢 3-6document.getElementById
这意味着您每秒只能“仅”进行 1,000,000 次这些操作...... “一场灾难”！

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

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

  • 当前缩小版的 jQuery (1.7.2) 大小仅为 32K，几乎可以肯定比您网站中的大多数图像小，因此可以忽略不计。
  • 您可以使用 jQuery 的 google 全局缓存副本，在这篇长博文中了解更多信息。

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

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

于 2012-06-11T15:58:18.207 回答
4

如果不添加 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。它对于 ajax 和许多 DOM 操作函数特别有用。但是，如果您的需求很简单，那么如果站点效率/速度/大小很重要，那么通常有比包含所有 jQuery 更有效的方法。

于 2012-06-11T16:04:53.183 回答