Question

我在一个非常相似的主题上发布了另一个question，但结果却有些主观。我可以将这个问题分成两个问题，我将在下面解释一个问题：

在以下代码中：

<script type="text/javascript">
$(function() 
{
   $("#accordion").accordion();
   $("#datepicker").datepicker();
   $("#button").click(function() 
   {
     runEffect();
     return false;
   });
});
</script>

问题：如果我在1000页中调用此代码，但只有250页具有日期选择器ID。浏览器是否会在尝试解析id datepicker的其他750个页面上花费额外的时间，或者Jquery有一种解决这种情况的智能方法而不影响性能？

如果代码引用当前页面的html标记上不存在的id或类会发生什么，这会影响性能吗？

Answer 1

对于那些说“不要担心”的人，我不能不同意。

我在外部JS文件的位置建立了一个这样的网站：

$(function() {
  // do lots and lots of stuff
});

HTML（PHP）页面内部没有Javascript。这是一场性能灾难，选择选择相对有效，意味着永远不会：

$(".someClass").doStuff();

相反：

$("div.someClass").doStuff();

等等。执行所有Javascript花了大约一秒钟，尽管其中95％没有做任何事情。我的建议？如果您想要一个响应迅速的网站 ，请不要这样做 。

而是将这样的函数放在外部JS中：

function activate_accordion() {
  $("#accordion").accordion();
}

这当然是一个简单的例子。但关键在于：除非绝大多数页面使用Javascript文件，否则不应在外部Javascript文件中自动执行Javascript。您的外部Javascript文件应该只是必要时调用的功能集合个别页面。

然后在HTML put中的每个页面上：

<script type="text/javascript">
$(function() {
  activate_accordion();
}
</script>

所以你只执行你实际使用的Javascript。是的，这是稍微多一点的工作，因为你必须知道每个页面在做什么/使用什么，但是在全球范围内做这件事很快就会失控。

我以这种方式将Javascript执行时间减少到50-100ms（从1-2秒）。

Answer 2

它将寻找这样一个元素，并且，由于没有任何元素，它将不会做任何事情。

jQuery的selector library针对性能进行了高度优化，所以我不担心。

特别是，一个简单的#id选择器变成了对浏览器的原生getElementById的调用，可以假设它非常快。

如果您真的担心，请在不同的浏览器中进行衡量。

Answer 3

是的，从技术上讲，jquery会花一些时间寻找id为'datepicker'的元素。

但是，由于您选择了ID和ID，并且每页只执行一次，所以花费的时间可能很小，甚至无法可靠地测量它。

现在，如果此代码以某种方式隐藏在循环中并且将以疯狂的频率执行，您可能想要担心这一点。但事实并非如此。

这是小东西，不要出汗。我敢肯定，如果你看起来足够努力，你可以找到十几种优化，而不是担心这一点会有更好的回报。

Answer 4

将在每个页面加载时调用代码，执行将如下所示：

$("#accordion").accordion()
1. 查找匹配元素：
  1. "#accordion" ID查询速度非常快
2. 将函数应用于所有匹配元素：
  - 如果没有#accordion元素，那么它几乎可以立即返回而不做任何事情

你只想在两种情况下担心，IMO：

你有一个非常复杂的选择器。
你在元素上调用了很多函数。

在案例2中，这是更常见的，我通过这样做来解决它：

$el = $('#myElement');
if ($el.length) {
    $el
        .find("div")
        .each(function () { .. })
        .parents()
    // etc...
}

我刚刚制作了一个基准来测试它实际上有多大的效果。如果您愿意，可以see the results和the code：

简而言之：

// doing this:
var $f = $('#fakeElement');
if ($f.length) $f.find('div');

// is almost twice as fast as this:
$('#fakeElement').find('div');

// For 10000 iterations, 404ms vs 788ms in my tests

Answer 5

为什么不混合原生电话？

以下每项都进行了10,000次迭代。

$('div#datepicker');
// 179ms

$('#datepicker').find('div');
// 65ms

var $dp = $('#datepicker'); if ($dp.length) $dp.find('div');
// 32ms

if (document.getElementById('datepicker')) $('#datepicker').find('div');
// 1ms

Answer 6

由于jQuery是无状态的，因此必须查看它。您可以通过在变量中设置元素来限制影响，然后在需要时，查看您在javascript代码中保存的内容，然后使用它。

这样的优化可以解决任何性能问题，但是，正如SLaks所说，这个调用速度非常快，但是，您可以在不同的浏览器上计时，看看是否要加快速度。

Answer 7

如果你有一大块代码依赖于元素的存在，你总是可以有条件地执行它：

if( $('#accordion').length > 0 ){
     // 20 lines of #accordion-dependent code here
}

Answer 8

$('body').find("#datapicker") ...非常快。

我从一位核心贡献者那里得到了一些建议。就像这样 - ＆gt;

if($("#datepicker")[0]) {...}

但速度更快。

没有使用jquery函数会对性能产生什么影响？

8 个答案: