「整理总结」优化jQuery性能的多种方法

1. 懒加载

懒加载是指延迟加载某些资源，比如当页面很长时，只加载可视区域内的内容，其他区域的内容当需要时再加载。这可以避免页面一开始就加载过多的资源，提高了页面的加载速度。

实现懒加载的方法有很多，比如可以使用jQuery插件lazyload：

// 引入插件

<script src="jquery.lazyload.min.js"></script>
// 将图片的src属性替换为data-original属性，在需要的时候再加载
$("img.lazy").lazyload();

2. 缓存DOM选择

在编写jQuery代码时，选择合适的DOM元素是很重要的。如果选择的元素是一样的，而每次都重新选择，会降低性能。为了避免这种情况发生，我们可以将选择的元素缓存起来，然后重复使用。

// 选择元素

var $list = $("#list");
// 缓存选择结果
var $items = $list.find("li");
// 在需要的地方重复使用
$items.eq(0).addClass("active");
$items.eq(1).addClass("active");

3. 使用事件委托

事件委托是指将事件处理程序绑定在父级元素上，然后在子元素被点击时执行事件处理程序。这样可以避免在子元素上绑定过多的事件处理程序，提高了页面的性能。

// 绑定事件委托

$("#list").on("click", "li", function() {
  console.log("li clicked");
});

这里我们将事件处理程序绑定在父级元素#list上，当li元素被点击时会执行。使用事件委托还可以避免新添加的子元素需要重新绑定事件的问题。

4. 链式调用

jQuery的链式调用是一种非常方便的用法，可以将多个操作连接在一起，减少了冗余代码。使用链式调用还可以避免在每个方法调用结束后重新选择DOM元素的问题。

// 链式调用

$("#list")
  .addClass("active")
  .find("li")
    .addClass("active");

这里我们先给#list元素添加了一个类active，然后找到其中的li元素，再给它们也添加上active类。这一串操作可以连接起来，使用起来非常便捷。

5. 使用原生JS方法

在有些情况下，使用原生JS方法会比调用jQuery的方法更快捷。比如，获取元素的className属性：

// 使用jQuery方法

var className = $("#list").attr("class");
// 使用原生方法
var className = document.getElementById("list").className;

在获取className属性时，使用原生方法会更快。

6. 最小化DOM操作

DOM操作通常是比较耗费性能的操作，因此应该尽可能地减少DOM操作的次数。比如，当需要改变多个DOM元素的样式时，可以先将它们的样式缓存起来，然后统一修改。这样就可以减少DOM操作的次数。

// 缓存DOM元素

var $list = $("#list");
var $items = $list.find("li");
// 修改样式
$items.addClass("active");
// 修改其他样式
$list.css({
  "background-color": "red",
  "color": "white"
});

这里我们先将需要修改样式的元素缓存起来，然后统一修改。这样可以减少DOM操作的次数，提高性能。