性能优化建议

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

1. 缓存选择器

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

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

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

2. 减少 DOM 操作次数

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

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

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

3. 使用事件委托

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

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

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

4. 合理使用链式调用

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

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

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

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

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

6. 使用合适的选择器

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

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

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

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

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

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

8. 使用最新版 jQuery

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

html

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

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

在线代码演示

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul id="list"></ul>
<button id="renderBtn">渲染列表</button>
<script>
$("#renderBtn").click(function () {
const html = [];
for (let i = 1; i <= 500; i++) {
html.push(&lt;li&gt;条目 ${i}&lt;/li&gt;);
}
$("#list").html(html.join(""));
});
</script>