加载和使用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个字符......

一如既往,请记住,作为开发人员,您的时间通常是最有价值的资源.除非明确要求提高性能,否则不要专注于选择器速度的优化.

jQuery网站

当然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" - 级联styile,你用一个"链"做到这一点:

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

这jsperf表明它$('#id')比3-6慢,document.getElementById
这意味着你每秒只能"运行"1,000,000次这些操作...... "一场灾难"!

"我们应该忘记小的效率,大约97%的时间说:过早的优化是所有邪恶的根源"

关于"加载" - jQuery库的下载时间.

• 目前缩小版的jQu​​ery(1.7.2)大小只有32K,这几乎肯定比你网站上的大多数图片都小,所以它可以忽略不计.
• 您可以使用jQuery的谷歌全局缓存副本,在这篇长篇博文中了解更多相关信息.

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

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