jQuery 性能优化指南（3）

jQuery 性能优化指南（3）

避免操作同一 DOM 元素的冗余查找

在 jQuery 中，使用选择器来遍历 DOM 树的消耗很大，特别是在大型文档中。因此，我们要尽量避免对同一 DOM 元素做多次冗余的查找。下面是一个错误的例子：

$('#btn1').click(function () {
    $('#box').css('background-color', '#f00');
    // ... 其他操作 box 元素的代码
});

$('#btn2').click(function () {
    $('#box').css('color', '#fff');
    // ... 其他操作 box 元素的代码
});

在上面的代码中，每次点击按钮时，都会使用 jQuery 的选择器 $('#box') 来访问 DOM 树，这非常浪费性能。正确的做法是将选 整节点保存到一个变量中，然后多次使用这个变量，如下所示：

var $box = $('#box');

$('#btn1').click(function () {
    $box.css('background-color', '#f00');
    // ... 其他操作 box 元素的代码
});

$('#btn2').click(function () {
    $box.css('color', '#fff');
    // ... 其他操作 box 元素的代码
});

使用上面的代码，我们只需要一次查找 DOM 树，之后就能重复使用 $box 这个变量，从而避免了冗余查找的问题。

避免过多的链式操作

在 jQuery 中，链式操作通常比较流行，例如：

$('#myList li')
    .addClass('highlight')
    .filter('.active')
    .css('color', '#00f');

但是，过多的链式操作会影响代码的可读性和性能。因此，在链式操作中应该适当的使用断点，将代码拆分为多个独立的部分。例如：

var $myList = $('#myList');
$myList.find('li').addClass('highlight'); // 第一步操作
$myList.find('.active').css('color', '#00f'); // 第二步操作

使用上面的代码，我们将一个较长的链式操作拆分成了两个独立的步骤，从而避免了代码的复杂性，提高了可读性和性能。

以上就是 jQuery 性能优化指南的第三部分，我们需要避免对同一 DOM 元素做多次冗余的查找，并且适当的使用断点，将代码拆分为多个独立的部分。