提高Javascript性能的最经济手段（取代jQuery）

Question

好的，除了购买一台机器的野兽以提高性能......

我有一个使用jQuery编写的Javascript / AJAX驱动的Web应用程序，以加快初始开发时间。我发现从性能的角度来看，我已经准备好逐步取代以提高代码效率。

一个例子......

http://jsperf.com/innerhtml-vs-jquery

我使用 $(selector).text()

从有效区域中的 getElementById(id).innerHTML 转移到通用DOM访问

在获得最大收益方面，我有点不知道下一步该去哪里，使用jQuery会导致性能下降的一些明显区域（外部负载）次）吗

Answer 1

jQuery Performance Rules

1. 在课前使用标签
2. 缓存jQuery对象
3. 利用链接的力量
4. 使用子查询
5. 限制直接DOM操作
6. 利用事件委派（a.k.a.Bubbling）
7. 消除查询浪费
8. 按照$（窗口）.load
9. 压缩你的JS
10. 了解图书馆
11. 总是从#id下降

这些是我在使用jQuery时始终牢记的关键领域。

Answer 2

任何jquery自定义选择器，即不是浏览器本机的东西，都会慢几个数量级。这样做

$('.sharedclass').find('crappyselector');

将加快长时间搜索。

同样插入，如果你在循环中插入（即表格），首先构建一个字符串，然后一次插入所有字符串。

这是我遇到的两大问题。

此外，个人资料个人资料。修复一些不存在问题的东西毫无意义。

Answer 3

尝试其他框架。看看DOJO获胜的比较： http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison 我喜欢上面给出的所有指针，并发现Jose Vega的工作效果很好。

Answer 4

$.each循环，其中循环特别大。如果它很小，差异可以忽略不计，但传统的JavaScript for循环的性能要好得多，特别是在处理大量数据时。

此外，它并不是您所要求的 - 但是在使用事件时重新访问所有选择器，特别是对于不支持“getElementsByClassName”的IE（很多其他浏览器都支持） ）尽可能使用ID为事件连线中使用的任何类名称添加前缀。我发现这种改进的IE性能，特别是当与删除无上下文的伪选择器（如$(":input")

）结合使用时

e.g。

$(".etc").live("click", function() { } );

变为

$("#id").delegate(".etc", "click", function() { });

Answer 5

根据其他人的答案，我认为我会用经常引用的两美分投入。注意选择器性能的浏览器差异！您认为可能总是最快的并不总是如此！

最安全的选择器当然是$('#foo')，但请考虑以下因素：

在本机支持$('.bar')的浏览器中，

$('#foo .bar')比$('#foo').find('.bar')和getElementsByClassName()快。实际上，速度要快得多（在FF中基本上是每个浏览器的速度超过两倍，而IE也是如此）。

有关证明，请参阅jsPerf。

您可以进行一些特定于浏览器的选择器优化。