优化jQuery性能的多种方法（整理总结）

1. 选择最合适的选择器：

   • 使用ID选择器（$('#id')）优于类选择器（$('.class')）。
   • 使用子选择器（$('#parent > .child')）优于后代选择器（$('#parent .child')）。

2. 缓存jQuery对象：

   
   
   
   var $parent = $('#parent');
   var $child = $parent.find('.child');

3. 避免频繁使用jQuery链式调用：

   
   
   
   // 不推荐
   $('#parent').find('.child').click(function() {
       // ...
   });
    
   // 推荐
   var $child = $('#parent').find('.child');
   $child.click(function() {
       // ...
   });

4. 使用事件委托代替直接绑定：

   
   
   
   $('#parent').on('click', '.child', function() {
       // ...
   });

5. 避免在选择器中使用JavaScript表达式：

   
   
   
   // 不推荐
   $('div[data-custom="' + variable + '"]').click(function() {
       // ...
   });
    
   // 推荐
   $('div').filter(function() {
       return $(this).data('custom') === variable;
   }).click(function() {
       // ...
   });

6. 避免在循环中使用jQuery选择器：

   
   
   
   var elements = [];
   for (var i = 0; i < 10; i++) {
       elements.push($('#element' + i));
   }

7. 使用.data()方法存取数据，而不是attr()：

   
   
   
   $('#myElement').data('key', 'value'); // 设置
   var value = $('#myElement').data('key'); // 获取

8. 避免使用全局选择器：

   
   
   
   jQuery('selector'); // 不推荐
   $ ('selector'); // 推荐

9. 避免在循环中使用.append()等DOM操作：

   
   
   
   var html = '';
   for (var i = 0; i < 10; i++) {
       html += '<div id="element' + i + '"></div>';
   }
   $('#parent').html(html);

10. 使用原生JavaScript方法替代jQuery方法：

    • 对于类名切换，使用element.classList.add/remove。
    • 对于样式设置，使用element.style.property。
    • 对于属性获取，使用element.getAttribute。

这些方法可以减少不必要的DOM操作和提升性能。