有哪些提高 jQuery 性能的快速提示？ [关闭]

Posted 2023-05-07

【中文标题】有哪些提高 jQuery 性能的快速提示？ [关闭]

【英文标题】：What are some quick tips for increasing jQuery performance? [closed]

【发布时间】：2010-12-07 22:13:40

【问题描述】：

有哪些提高 jQuery 性能的快速提示？

【问题讨论】：

买一台新电脑是显而易见的方式:-)

我认为您可以通过搜索找到该问题的多个重复项。

将赛车条纹放在您的 PC 侧面，这总是有帮助的。

***.com/questions/182630/jquery-tips-and-tricks

把它涂成红色！红色的是最快的！

【参考方案1】：

首选仅按 ID 进行简单选择，其次仅按 标记名称。通过类名或 CSS 选择器进行选择需要 jQuery 遍历 DOM，而 ID 和标签映射到“本机”浏览器 DOM 函数（getElementById 和 getElementByTagName）。 尽可能缓存您的 jQuery 对象。 作用域 你对一个根 jQuery 对象的操作。与其单独选择元素，不如选择一个共同的祖先元素并使用find 函数在该元素子元素的范围内查找元素。无论如何，这只有在您对共同祖先执行某些操作时才是最佳选择；否则，查找祖先并缓存它的开销可能会超过范围遍历的好处。 不要使用$.each()，请改用for(;;)。速度快了十倍以上。

【讨论】：

这应该是公认的答案。 +1

你能举一个for(;;)的例子吗？

这是 jQuery 文档 [docs.jquery.com/Utilities/jQuery.each] 中 $.each() 示例之一的基于 for(;;) 的版本：for(var i = 0; i

当然我们都知道递减的while循环可以执行得更快！每一个的美妙之处在于调用函数的上下文（例如 this === 你的元素）。

它主要是为了便于使用，拥有上下文是保持一致性的一种简单方法。更重要的是，each() 仍然是可链接的，这是 jquery api 的关键。

【参考方案2】：

Paul Irish 最近在 2009 年 jQuery 大会上做了一个关于性能的演示。这些幻灯片是我见过的最全面的幻灯片。

http://paulirish.com/perf/http://www.slideshare.net/paul.irish/perfcompression

【参考方案3】：

参考google's CDN 上的文件，以便它们加载更快。

【讨论】：

这不是真正的 jQuery 性能，不是吗？

如果您在 Intranet 上开发（用户在同一栋楼），则不适用。将其存储在您自己的服务器上可以节省他们上网的时间。

@Nathan 在 Intranet 上，这将是一种存储在代理上的东西，因此也可以节省他们的旅行时间，但请注意，有些地方没有代理

【参考方案4】：

而不是做：

$("#foo").addClass('test');
$("#foo").removeClass("bar");
$("#foo").slideUp('slow');

你可以这样做：

$("#foo").addClass('test').removeClass('bar').slideUp('slow');

【讨论】：

这真的能提高性能吗？真是太棒了。

或者，如果您不能一次完成所有操作，请将 $("#foo") 放入变量中并使用它，而不是每次都重新创建 $("#foo")。

@jpartogi：每次你将选择器传递给 $() 时，jQuery 都会创建一个新对象，但是因为它的方法返回 this，你可以像这样堆叠它们。这里的技巧是不要为同一个选择器创建三个不同的对象。

【参考方案5】：

它总是适用于常见的 javascript：总是 缓存、缓存、缓存 例如：

var $this = $(this);
$this.css('width', parseInt($this.css('width')) + 20 + 'px');

【参考方案6】：

提高jQuery的速度并不是真的可以，这真的取决于你的代码有多高效，浏览器的JS解释器有多高效，以及计算机运行代码的速度有多快。您或许可以尝试重写 jQuery 以提高效率，但这需要时间，而且很可能已经非常优化。

【讨论】：

如果您正在考虑大幅提高速度，则为真。但是，有一些简单的技巧确实可以提高执行效率，即使它只有 100 毫秒左右。

【参考方案7】：

确保效率的最佳方法之一是确保 *selector 以尽可能具体的元素/类等为目标。

*$(选择器)

【参考方案8】：

我认为您要求代码优化，但由于性能高度依赖于使用的 JavaScript 引擎，我想提一下Google Chrome Frame。

【参考方案9】：

知道何时使用纯 JavaScript 而不是 JQuery 方法。

jQuery 是对 JS+DOM 的补充，而不是完全替代它。您不必为编写的每一行代码都使用 jQuery。没有它，有些事情会更简洁地表达；没有它，很多事情都会更快。了解 DOM 提供了什么，这样您就不会写一些我在这里看到过的愚蠢示例。

例如：

var ix= $('#'+selectname).children().index($('#'+selectname+' option:selected'));

更快、更易于阅读，不会因 ID 中的意外字符而中断：

var ix= document.getElementById(selectname).selectedIndex;

【讨论】：

这可以浓缩为：$('#someElement').find('option:selected');