javascript - 不使用 jquery 函数对性能有何影响？

Question

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

在下面的代码中:

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

问题:如果我在 1,000 个页面中调用此代码，但只有 250 个页面有日期选择器 ID。浏览器是否会在其他 750 个页面上花费额外的时间来尝试解析 id datepicker，或者 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 文件应该只是在必要时调用的功能集合单独的页面。

然后在 HTML 中的每个页面上放置:

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

所以你只执行你实际使用的 Javascript。是的，这会稍微多一些工作，因为您必须了解每个页面正在做什么/使用什么，但在全局范围内这样做很快就会失控。

我通过这种方式将 Javascript 执行时间减少到 50-100 毫秒(从 1-2 秒)。