jQuery - 元素检测的性能表现

Question

jQuery - 元素检测的性能表现

javascriptjqueryhtml

5

我是一名有帮助的助手，以下是您需要翻译的内容：

我正在阅读同事的代码，并且在思考是否可以改进性能。

对于任何按钮事件，都存在以下类似的代码：

a)

$("body").on("click", ".aButtonName", function() { ....});
$("body").on("click", ".aButtonName", function() { ....});
$("body").on("click", ".aButtonName", function() { ....});

....
$("body").on("click", ".aButtonName", function() { ....});

b) 点击页面主体后分析每个目标事件是否会更快：

  $(document.body).on('click', function( e ){

var trg = $(e.target).closest('button');
if(!trg || !trg.attr('class'))
  return;


if ( trg.attr('class').indexOf('my_button') > -1) {
  ....

- user2952265

2

不要使用任何选择器来绑定事件委托，因为在这种情况下，每次单击页面主体时都必须重新评估选择器。相反，您需要针对最不常见的元素来绑定处理程序，以进行事件委托。 - Arun P Johny

如果函数处理更多的按钮，这将提高性能，否则它与直接将事件附加到元素相同。 - Goran.it

3

使用 $(document.body) 而不是 $（“body”） 会略微提高性能。更好的做法是将 body 保存到变量中，例如 var $body = $(document.body);。 - pstenstrm

1

基于@user13500的建议，为什么不使用类似http://jsfiddle.net/5nRn7/1/这样的东西呢？ - Lucky Soni

@user2952265 DOM查询是昂贵的，您应该尽可能少地进行查询。但这是一般情况，与事件无关。 - pstenstrm

这个问题可能会被转移到 http://codereview.stackexchange.com/。 - Agi Hammerthief

2个回答

0

问题不清楚。如果您想在单击正文时引发事件，只需按照以下代码即可。

<body>
   <ul>
      ......
   </ul>
  </body>

在 js 文件中

  $('body').click(function(event){
   $(this).find('ul').addClass('selected');

    });

- Varma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sam R · Accepted Answer

在第二种情况下，你最终需要执行回调函数、传递参数并执行多个DOM交互才能退出，这很可能会降低性能。在第一种情况下，jQuery执行选择器匹配，只有当匹配时才执行该功能。

在两种样式中，事件在“冒泡”（传播）到 body 后被处理。这种“委托样式”检查选择器是否与目标（或父级）匹配。

正如其他人建议的那样，缓存 $("body") 可以节省许多DOM查询，并且通过使用更接近/更小的委托可以获得更好的性能。