jQuery 性能优化：19 个技巧让你的网站提速-JavaScript中文网-JavaScript教程资源分享门户

jQuery 是一款广泛使用的 JavaScript 库，它可以帮助我们更方便地操作 DOM、处理事件、发送 AJAX 请求等。然而，如果不注意优化，使用 jQuery 也会导致网站性能下降，影响用户体验。本文将介绍 19 个 jQuery 性能优化技巧，帮助你让网站更快地加载和响应。

1. 使用最新版本的 jQuery

jQuery 团队会不断发布新版本，其中包括性能优化和 bug 修复。使用最新版本的 jQuery 可以让你的网站运行更快、更稳定。你可以在 jQuery 官网上下载最新版本的 jQuery。

2. 使用 CDN

使用内容分发网络（CDN）可以让你的网站更快地加载 jQuery。CDN 会将 jQuery 存储在多个服务器上，用户可以从离他们最近的服务器获取 jQuery。常用的 jQuery CDN 有：Google CDN，Microsoft CDN 和 jQuery CDN

<!-- 从 Google CDN 加载 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

3. 使用压缩版的 jQuery

压缩版的 jQuery 会去掉注释和空格，文件体积更小，加载更快。你可以在 jQuery 官网下载压缩版的 jQuery。

4. 缓存 jQuery 对象

在使用 jQuery 选择器时，我们可以将选择器结果缓存到变量中，避免重复选择。这样可以减少 DOM 操作，提高性能。

// 不缓存 jQuery 对象
$(".my-class").show();
$(".my-class").hide();

// 缓存 jQuery 对象
var $myClass = $(".my-class");
$myClass.show();
$myClass.hide();

5. 使用链式操作

链式操作可以减少代码行数，提高可读性。同时，也可以减少 DOM 操作，提高性能。

// 不使用链式操作
$(".my-class").show();
$(".my-class").addClass("active");

// 使用链式操作
$(".my-class").show().addClass("active");

6. 使用原生 JavaScript

在某些情况下，使用原生 JavaScript 可以比使用 jQuery 更快。比如，获取元素的属性时，可以使用原生的 element.getAttribute() 方法。

// 使用 jQuery
var href = $("a").attr("href");

// 使用原生 JavaScript
var href = document.querySelector("a").getAttribute("href");

7. 使用事件委托

事件委托可以减少事件处理程序的数量，提高性能。比如，当需要为一个列表中的每个元素添加点击事件时，可以使用事件委托。

// www.javascriptcn.com code example
// 不使用事件委托
$(".my-class").on("click", function() {
  // 处理点击事件
});

// 使用事件委托
$(".my-list").on("click", ".my-class", function() {
  // 处理点击事件
});

8. 避免使用全局选择器

全局选择器会遍历整个 DOM 树，性能较差。在使用 jQuery 时，应尽量避免使用全局选择器。

// 不使用全局选择器
$(".my-class");

// 使用局部选择器
$(".my-parent").find(".my-class");

9. 避免使用复杂的选择器

复杂的选择器会增加 DOM 操作的次数，降低性能。在使用 jQuery 时，应尽量避免使用复杂的选择器。

// 不使用复杂的选择器
$(".my-class");

// 使用简单的选择器
$("input[type='text']");

10. 避免使用不必要的动画

动画会占用 CPU 和内存资源，影响性能。在使用 jQuery 动画时，应尽量避免使用不必要的动画。

// 不必要的动画
$(".my-class").fadeIn(1000).fadeOut(1000);

// 简化后的动画
$(".my-class").fadeToggle(1000);

11. 使用 CSS3 动画

CSS3 动画使用 GPU 加速，性能更好。在实现动画效果时，应尽量使用 CSS3 动画。

/* 使用 CSS3 动画 */
.my-class {
  transition: all 1s;
}

12. 避免频繁修改样式

频繁修改样式会引起浏览器的重绘和重排，影响性能。在使用 jQuery 修改样式时，应尽量避免频繁修改。

// www.javascriptcn.com code example
// 频繁修改样式
for (var i = 0; i < 1000; i++) {
  $(".my-class").css("left", i + "px");
}

// 简化后的修改样式
var $myClass = $(".my-class");
for (var i = 0; i < 1000; i++) {
  $myClass.css("left", i + "px");
}

13. 使用缓存的 DOM 元素

在使用 jQuery 操作 DOM 元素时，应尽量使用缓存的 DOM 元素，避免重复查找。

// www.javascriptcn.com code example
// 重复查找 DOM 元素
for (var i = 0; i < 1000; i++) {
  $(".my-class").eq(i).hide();
}

// 使用缓存的 DOM 元素
var $myClass = $(".my-class");
for (var i = 0; i < 1000; i++) {
  $myClass.eq(i).hide();
}

14. 使用批量操作

在使用 jQuery 操作 DOM 元素时，应尽量使用批量操作，避免重复操作。

// 重复操作 DOM 元素
$(".my-class").hide();
$(".my-class").show();

// 使用批量操作
$(".my-class").hide().show();

15. 使用动态插入的 DOM 元素

在插入大量 DOM 元素时，应尽量使用动态插入的 DOM 元素，避免重复渲染。

// www.javascriptcn.com code example
// 直接插入 DOM 元素
for (var i = 0; i < 1000; i++) {
  $("body").append("<div>" + i + "</div>");
}

// 使用动态插入的 DOM 元素
var $container = $("<div></div>");
for (var i = 0; i < 1000; i++) {
  $container.append("<div>" + i + "</div>");
}
$("body").append($container);

16. 避免使用多个 document.ready()

多个 document.ready() 会增加 DOM 操作的次数，降低性能。在使用 jQuery 时，应尽量避免使用多个 document.ready()。

// www.javascriptcn.com code example
// 多个 document.ready()
$(document).ready(function() {
  // 处理事件
});
$(document).ready(function() {
  // 处理事件
});

// 合并后的 document.ready()
$(document).ready(function() {
  // 处理事件
  // 处理事件
});

17. 使用 requestAnimationFrame()

requestAnimationFrame() 可以优化动画的性能，避免卡顿。在实现动画效果时，应尽量使用 requestAnimationFrame()。

// www.javascriptcn.com code example
// 不使用 requestAnimationFrame()
$(".my-class").animate({left: "100px"}, 1000);

// 使用 requestAnimationFrame()
var $myClass = $(".my-class");
var start = null;
function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  $myClass.css("left", progress + "px");
  if (progress < 1000) {
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);

18. 使用 Web Workers

Web Workers 可以将耗时的计算移到后台线程，避免阻塞主线程。在需要进行大量计算的场景下，应尽量使用 Web Workers。

// www.javascriptcn.com code example
// 创建 Web Worker
var worker = new Worker("worker.js");

// 发送消息给 Web Worker
worker.postMessage({data: "hello"});

// 接收 Web Worker 的消息
worker.onmessage = function(event) {
  console.log(event.data);
};

19. 使用 Chrome 开发者工具进行性能分析

Chrome 开发者工具可以帮助我们分析网站的性能问题，找出瓶颈所在。在进行性能优化时，应尽量使用 Chrome 开发者工具进行分析。

以上就是 jQuery 性能优化的 19 个技巧。希望本文对你有所帮助，让你的网站更快、更流畅。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6789112d881faa801f4c4a7a

jQuery 性能优化：19 个技巧让你的网站提速