立即提高 jQuery 性能的 10 种方法

本文将介绍十个简单的步骤，这些步骤将立即提高您的脚本性能。不用担心; 这里没有什么太难的事情。每个人都可以应用这些方法！

1.始终使用最新版本

保持最新的最好方法是使用像NPM这样的包管理器和像Vite这样的捆绑器。这有助于仅使用npm update.

如果您没有使用这些工具的经验，或者只是想保持最新状态而不必在本地更新，您可以使用像JSDelivr这样的 CDN 。

2.缩小和组合你的脚本

javascript 文件中有很多浪费的空间，例如制表符、空格、长变量行等等。这些字符会减慢网站加载速度，因为它们会创建更大的文件，需要更长的时间来下载和解析。幸运的是，您可以使用自动缩小工具（例如Terser ）轻松删除多余的字符。

另一部分是组合脚本。网站请求的每个单独资源都会创建另一个 HTTP 请求，这会带来更多开销。为了解决这个问题，已经创建了称为捆绑器的工具（如Vite ）。捆绑器会自动检测您导入各种脚本的位置并尝试将它们组合起来，从而减少开销。这在使用新的ECMAScript 模块时效果最好。捆绑器的另一个优点是它们通常还充当构建工具，执行诸如缩小之类的工具。

3.使用 For 而不是 Each

本机函数总是比任何辅助函数更快。每当您遍历作为 JSON 接收的对象时，您最好重写您的 JSON 并使其返回一个数组，通过该数组您可以更轻松地循环。

使用chrome DevTools或Firefox DevTools，可以测量这两个函数的运行时间。

let array = new Array();
for (var i=0; i < 10000; i++) {
    array[i] = 0;
}
 
console.time('native');
let l = array.length;
for (var i=0; i < l; i++) {
    array[i] = i;
}
console.timeEnd('native');
 
console.time('jquery');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jquery')

以上结果对于原生代码是 2ms，对于 jQuery 的each方法是 26ms。尽管我在本地机器上对其进行了测试，尽管它们实际上并没有做任何事情（只是一个数组填充操作），但 jQuery 的each函数占用的时间是 JS 原生for循环的 10 倍以上。

4.给你的选择器一个上下文

如jQuery 的文档中所述：

最初传递给 jQuery() 的 dom 节点上下文（如果没有传递，则上下文将等于文档）。它应该与选择器一起使用，以确定使用的确切查询。

所以，如果你必须使用类来定位你的元素，至少可以通过适当地使用选择器来防止 jQuery 遍历整个 DOM 。

代替

总是使用以下形式的上下文选择器：

从而产生

它运行得更快，因为它不必遍历整个 DOM — 只需遍历#class-container元素。

5.缓存变量。

不要犯一次又一次地重新运行选择器的错误。相反，您应该将结果缓存在一个变量中。这样，DOM 就不必一遍又一遍地追踪您的元素。

切勿在循环内多次选择元素！

$('#item').css ('color', '#123456');
$('#item').html ('hello');
$('#item').css ('background-color', '#ffffff');
// you could use this instead
$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');
 
// or even
const item = $('#item');
item.css ('color', '#123456');
item.html ('hello');
item.css ('background-color', '#ffffff');
 
 
// as for loops, this is a big no-no
console.time('no cache');
for (let i=0; i < 1000; i++) {
    $('#list').append (i);
}
console.timeEnd('no cache');
 
// much better this way
console.time('cache');
const list = $('#list');
 
for (let i=0; i < 1000; i++) {
    list.append (i);
}
console.timeEnd('cache'

这才是真正的速度杀手！

而且，如下图所示，即使在相对较短的迭代中，缓存的结果也很明显。

       

6.避免解析 HTML

由于需要解析 HTML，使用html()之类的方法会显着降低性能。这使得浏览器做更多的工作，你可以用类似prepend()、append()和after()的方法来替换它（前提是你没有用这些方法插入 HTML）。最终，最好的办法是将createElement()与一些放置操作一起使用。

7.没有字符串 concat()：对更长的字符串使用 join()

这可能看起来很奇怪，但这确实有助于加快速度，尤其是在处理需要连接的长字符串时。

首先，创建一个数组并用你必须加入的内容填充它。该方法将证明比字符串函数Array.join()快得多。String.concat()

let array = [];
for (let i=0; i<=10000; i++) {
    array[i] = '<li>'+i+'</li>';
}
 
$('#list').html (array.join (''))

这是由于每种方法的工作原理。String.concat()是不可变的，这意味着它在运行时返回字符串的新副本。这有时会有所帮助，但通常您不需要它，因此请Array.join()改用。

8.返回 False 或使用 preventDefault()

有时，您可能希望避免某些东西的默认行为。例如，如果您通过 ajax 加载另一个页面，您可能不希望链接加载另一个页面。为了防止这种情况，您通常return false在事件处理程序中或使用event.preventDefault().

所以，而不是

$('#item').click (function () {
    // stuff here
});

花时间写

$('#item').click (function (event) {
    // stuff here
    event.preventDefault();
})

return false调用event.preventDefault()以及event.stopPropogation().

9.不要使用 jQuery

这可能看起来很奇怪，因为这是关于加速 jQuery 的，但包含它很重要。在过去的几年里，浏览器对 JavaScript DOM 函数的支持（jQuery 存在的主要原因）有了很大的改进。现在，您可以使用原生 javaScript 做大部分事情，并且知道 >97% 的用户将能够运行它。

使用原生 JavaScript 有两个帮助。首先，它加快了网站加载速度，因为 jQuery 是一个非常大的脚本（87kb 缩小）。其次，它加速了实际操作，因为 jQuery 本质上充当了原生 DOM 和您的代码之间的中介，因此通过删除 jQuery，您可以减少开销。

例如，不要这样做：

做这个：

另一种选择是使用 jQuery 替代方案，它试图模仿 jQuery 的 api，同时更小更快。使用其中一种工具，例如Cash，可以更轻松地从 jQuery 迁移代码。函数仍然会有开销，但要小得多。

10.额外提示：备忘单和图书馆参考资料

这不是一个加速技巧，但如果您花时间通过备忘单和函数引用找到自己的方式，它可能会以一种迂回的方式结束。为自己节省一些时间，并将备忘单放在触手可及的地方。