# 性能优化建议

URL: https://caijiao.org/jquery/09-advanced/02-performance
Source: docs/jquery/09-advanced/02-performance.md
Description: 本文总结 jQuery 使用过程中的性能优化建议，包括减少 DOM 操作、使用缓存、合并选择器等技巧，帮助开发者编写更高效的 jQuery 代码。

使用 [jQuery](/jquery/) 编写网页交互时，良好的性能优化习惯可以提升页面响应速度和用户体验。以下是一些常见且实用的 jQuery 性能优化策略。

## 1. 缓存选择器

频繁使用同一个选择器时，应将其缓存为变量，避免重复 DOM 查询：

```js
// 不推荐
$(".item").hide();
$(".item").css("color", "red");

// 推荐
const $items = $(".item");
$items.hide();
$items.css("color", "red");
```

## 2. 减少 DOM 操作次数

DOM 操作较慢，应尽量合并修改：

```js
// 不推荐
$("#box").width(200);
$("#box").height(100);

// 推荐
$("#box").css({ width: 200, height: 100 });
```

## 3. 使用事件委托

为动态元素绑定事件时，应使用事件委托绑定到父元素：

```js
// 不推荐
$(".list-item").click(function () { … });

// 推荐
$(".list").on("click", ".list-item", function () { … });
```

## 4. 合理使用链式调用

链式调用可以减少重复选择器的开销，但不宜过长，注意可读性：

```js
$("#box").addClass("active").fadeIn().css("color", "blue");
```

## 5. 批量插入 DOM 时使用文档片段

对于循环添加的元素，先使用数组拼接或构造片段，再一次性插入 DOM：

```js
const html = [];
for (let i = 0; i < 100; i++) {
  html.push(`<li>项目 ${i}</li>`);
}
$("#list").html(html.join(""));
```

## 6. 使用合适的选择器

避免使用过于复杂或低效的选择器，例如通配符或深层嵌套：

```js
// 慎用
$("div span a");

// 推荐
$(".nav-link");
```

## 7. 慎用动画，使用 `.stop()`

动画应适量使用，并在重复触发前使用 `.stop()` 避免堆积：

```js
$("#box").stop().slideToggle();
```

## 8. 使用最新版 jQuery

新版本通常对性能和兼容性做了优化，应使用最新稳定版本，例如：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```

## 示例：优化前后的对比演示

[在线代码演示](/jquery/demos/32.html)